Как добавить онлайн-запись на сайт салона

Короткий ответ: чтобы добавить онлайн-запись Tervita на сайт салона, вставьте одну строку script в HTML страницы, укажите адрес салона в data-clinic и выберите режим: inline показывает форму прямо на странице, popup открывает её по кнопке, а bubble закрепляет плавающую кнопку внизу экрана. Генератор ниже соберёт код из тех настроек, которые действительно поддерживает embed.js.

Встроенная запись сокращает путь между «мне подходит эта услуга» и выбором свободного времени. Клиент остаётся на вашем домене, но сама форма загружается с Tervita и использует те же услуги, сотрудников, рабочие часы и правила, что публичная страница записи. Обычную прямую ссылку при этом стоит сохранить: она удобнее для Instagram, Google Business Profile, мессенджеров и как запасной вариант.

Если вы ещё настраиваете сам процесс, сначала прочитайте практический гид по онлайн-записи. Свой адрес и прямую ссылку вы найдёте по инструкции Ваша публичная страница записи, а вид услуг, языки формы, подтверждение контакта, отмену и перенос задают Настройки онлайн-записи.

Inline, popup или bubble: что выбрать

У виджета три режима. Это не три разных формы и не три тарифа: меняется только способ показа одной и той же страницы записи.

Для отдельной страницы записи чаще всего подходит inline: посетитель сразу понимает, что делать. На главной странице длинная форма может отодвинуть важный контент, поэтому там аккуратнее смотрится popup. Bubble удобен как дополнительная точка входа на всех страницах, но не должен быть единственной: оставьте заметную текстовую кнопку или прямую ссылку.

В inline-режиме начальная минимальная высота равна 520 пикселям. Затем форма сообщает свою фактическую высоту, и iframe подстраивается под текущий шаг. Popup и bubble не задают iframe адрес до клика, поэтому сама форма начинает загружаться только после действия клиента.

Генератор кода виджета

В поле «Адрес салона» введите slug — часть прямой ссылки после /booking/. Если ваша ссылка выглядит как https://tervita.ee/booking/moy-salon, нужное значение — moy-salon. Не вставляйте весь URL и не добавляйте слеши.

<script src="https://tervita.ee/embed.js" data-clinic="moy-salon" data-mode="inline" data-lang="ru" async></script>

Адрес страницы записи можно изменить в Tervita, но старый адрес после этого перестаёт работать. Если поменяли slug, обновите data-clinic во всех виджетах, кнопках, профилях и рекламных ссылках.

Готовые примеры для трёх режимов

Inline: форма внутри страницы

<script
  src="https://tervita.ee/embed.js"
  data-clinic="moy-salon"
  data-lang="ru"
  async
></script>

Inline используется по умолчанию, поэтому писать data-mode="inline" необязательно. Скрипт ставит iframe перед собой, задаёт ему ширину 100%, убирает рамку, включает ленивую загрузку и начинает с минимальной высоты 520 пикселей. Изменить минимум можно так:

<script
  src="https://tervita.ee/embed.js"
  data-clinic="moy-salon"
  data-lang="ru"
  data-min-height="640"
  async
></script>

Указывайте положительное целое число без px. Автовысота принимает сообщения только от того Tervita origin, с которого загружен embed.js, и только от конкретного iframe. Это важно, если на странице по какой-то причине несколько встроенных форм.

Popup: кнопка и модальное окно

<script
  src="https://tervita.ee/embed.js"
  data-clinic="moy-salon"
  data-lang="ru"
  data-mode="popup"
  data-label="Записаться онлайн"
  data-color="#245c4f"
  async
></script>

Кнопка появляется именно там, где стоит код. data-label меняет подпись, data-color — фон. По клику форма открывается в окне шириной до 460 пикселей и высотой до 90% экрана. Закрыть его можно кнопкой с крестиком, кликом по затемнённому фону или Escape. После закрытия адрес iframe сбрасывается, поэтому следующий запуск начинается заново, а скрытая форма не продолжает работать в фоне.

Bubble: плавающая кнопка

<script
  src="https://tervita.ee/embed.js"
  data-clinic="moy-salon"
  data-lang="ru"
  data-mode="bubble"
  data-label="Записаться"
  data-color="#245c4f"
  async
></script>

Bubble добавляется в body и фиксируется справа внизу. Такой элемент виден при прокрутке, но занимает самое конфликтное место мобильного интерфейса. Проверьте его вместе с кнопкой чата, баннером согласия, нижней навигацией браузера и системной безопасной зоной телефона.

Полный список поддерживаемых data-атрибутов

Параметров для заранее выбранной услуги, специалиста, даты, скидки или аналитической метки в текущем embed.js нет. Не добавляйте выдуманные data-service или data-staff: браузер их сохранит в HTML, но виджет проигнорирует.

Куда вставлять код на WordPress, Wix и Webflow

Общий принцип: inline или popup ставьте в контенте ровно там, где должна появиться форма или кнопка. Bubble можно добавить в глобальный код сайта, если он нужен на каждой странице. Сначала опубликуйте на одной тестовой странице — так проще заметить конфликт со стилями, политикой безопасности или другим скриптом.

WordPress

В блочном редакторе добавьте блок Custom HTML через кнопку «+» или команду /html и вставьте фрагмент кода. В официальной документации WordPress отдельно сказано, что у пользователя без права unfiltered_html система может удалить script и iframe при сохранении. Если код исчезает, попросите администратора добавить его с подходящими правами или в шаблоне; не отключайте общую фильтрацию HTML наугад.

У конструкторов поверх WordPress — Elementor, Divi и других — названия блока отличаются: ищите HTML, Code или Embed. Логика та же, но кэш-плагин или оптимизатор JavaScript может отложить либо переписать скрипт. После очистки кэша проверьте не только редактор, но и опубликованную страницу без авторизации.

Webflow

Добавьте Code Embed на холст, вставьте код, сохраните и опубликуйте. Webflow предупреждает, что скрипты могут отображаться в Designer только как placeholder и исполняются в preview или на опубликованном сайте. Поэтому пустой прямоугольник в редакторе ещё не означает ошибку.

Wix

В Wix Editor путь выглядит как Add Elements → Embed Code → Embed HTML; затем нажмите Enter Code, вставьте фрагмент кода и примените. Это описано в официальной инструкции Wix. Настройте размер элемента и обязательно откройте опубликованный сайт. Поскольку Wix может запускать код внутри собственного embed-контейнера, inline обычно предсказуемее, а popup или bubble могут оказаться ограничены рамками этого контейнера. Если модаль обрезается, используйте inline или обычную ссылку на запись.

Сайт, который поддерживает разработчик

Передайте разработчику URL https://tervita.ee/embed.js, таблицу атрибутов выше и желаемое место. На статической HTML-странице достаточно вставить фрагмент кода. В React, Vue и других одностраничных приложениях нельзя считать, что удаление тега script при unmount полностью удаляет виджет: у публичного embed.js нет teardown-API, поэтому созданные элементы, общая модаль или слушатели могут остаться. Повторные mount/unmount не поддерживаются и способны дублировать состояние интеграции. Подключите скрипт один раз в стабильном шаблоне документа, используйте отдельную страницу с полной навигацией либо оставьте прямую ссылку. Не копируйте содержимое embed.js в проект — такая частная копия быстро устареет.

Как выбрать место на странице

У посетителя должна быть возможность записаться, когда он уже понял услугу, цену и доверяет салону. Практичная схема:

1. Короткая кнопка «Записаться онлайн» на первом экране.
2. Повторная кнопка после списка услуг или цены.
3. Inline-форма на отдельной странице записи либо popup из этих кнопок.
4. Прямая ссылка в контактах и подвале как понятный запасной путь.

Не прячьте запись только в меню из трёх уровней. Не называйте кнопку «Подробнее», если она начинает запись. На мобильном оставьте вокруг кнопки место для нажатия, а inline-контейнеру — полную доступную ширину. Если сайт многоязычный, ставьте явный data-lang на каждой языковой версии: русской — ru, эстонской — et, английской — en.

Content Security Policy: почему код могут заблокировать

На сайте со строгой CSP браузер разрешает только перечисленные источники. Для виджета origin https://tervita.ee должен быть допустим в политике загрузки скриптов и фреймов. Директива script-src управляет JavaScript, а frame-src — iframe; их назначение описано в MDN про script-src и MDN про frame-src.

Текущая версия виджета динамически добавляет блок <style> и style-атрибуты. Строгий style-src без разрешения inline-стилей может скрыть оформление или размеры. Не копируйте в заголовок всего сайта 'unsafe-inline' без оценки: MDN прямо предупреждает, что это ослабляет одну из основных защит CSP. Разработчик должен объединить разрешения с существующей политикой и посмотреть точную ошибку в консоли. Если политика принципиально запрещает такие стили, безопаснее временно оставить прямую ссылку.

Приватность: что меняется после встраивания

Страница начинает загружать ресурс с домена Tervita. Запрос к embed.js происходит при открытии страницы; inline-iframe помечен как lazy и может загрузиться позже, когда приблизится к области просмотра; popup и bubble получают адрес формы только после клика. Однако нельзя обещать, что до клика «ничего не передаётся»: сам внешний скрипт уже запрашивается браузером.

IP-адрес относится к примерам персональных данных в разъяснении Европейской комиссии о GDPR. В собственной политике приватности опишите цели обработки, получателей и роли сторон так, как они реально устроены у вашего бизнеса. Европейская комиссия перечисляет, какую информацию человек должен получить при сборе данных.

Из факта встраивания нельзя автоматически вывести ни «cookie-баннер точно нужен», ни «он точно не нужен». Это зависит от фактических технологий, правового основания и вашей конфигурации. Проверьте собственную политику, договорные роли и настройки с ответственным за защиту данных. Для общего контекста используйте наш практический гид по GDPR для салонов.

Производительность без магических обещаний

Атрибут async позволяет классическому скрипту скачиваться параллельно с разбором HTML и исполняться, когда он готов; это стандартное поведение по документации MDN о script. Inline-iframe использует loading="lazy", назначение которого описано в документации MDN об iframe. Popup и bubble откладывают загрузку самой формы до клика.

Это уменьшает риск блокировки первого рендера, но не гарантирует конкретный Lighthouse или Core Web Vitals. Итог зависит от темы CMS, изображений, шрифтов, аналитики и других виджетов. Измерьте опубликованную страницу до и после, проверьте медленную мобильную сеть и не ставьте несколько одинаковых embed-кодов без необходимости.

Доступность и клавиатура

У кнопки должен быть конкретный текст на языке страницы, например «Записаться онлайн». Выберите data-color, на котором белая надпись остаётся контрастной, и не убирайте стандартный видимый фокус стилями темы. Сам iframe получает title «Online booking», popup обозначен как dialog и закрывается Escape.

Но визуально работающая модаль ещё не доказывает полную доступность. Паттерн модального диалога W3C требует переносить фокус внутрь, удерживать Tab и Shift+Tab в диалоге и возвращать фокус на кнопку после закрытия. Проверьте popup на опубликованном сайте только клавиатурой и по возможности экранным диктором: сторонние скрипты и тема могут влиять на порядок фокуса. Если тест не проходит, выберите inline или прямую ссылку до исправления.

Чек-лист после установки

1. Откройте страницу в приватном окне и убедитесь, что в консоли нет ошибки data-clinic is required, CSP или блокировки фрейма.
2. Пройдите поток на компьютере и телефоне: услуга → специалист → время → контакты. Для проверки интеграции не обязательно подтверждать тестовую запись в рабочем календаре.
3. Переключите все языковые версии и проверьте data-lang.
4. Inline не должен обрезаться при переходе между шагами; popup и bubble должны открываться, закрываться и возвращать прокрутку страницы.
5. Пройдите кнопки Tab и Shift+Tab, активируйте их Enter и Space, закройте модаль Escape.
6. Увеличьте страницу до 200% и проверьте, не перекрывает ли bubble интерфейс.
7. Измените ширину до мобильной и убедитесь, что форма не создаёт горизонтальную прокрутку.
8. Оставьте под виджетом ссылку https://tervita.ee/booking/moy-salon с понятным текстом «Открыть страницу записи».

Частые вопросы

Где взять data-clinic?

Откройте в Tervita Настройки записи и найдите прямую ссылку. Нужна только часть после /booking/. Подробно это показано в статье Ваша публичная страница записи.

Можно ли заранее выбрать услугу или мастера?

Нет, текущий embed.js не принимает таких атрибутов. Клиент выбирает услугу, специалиста и слот внутри формы. Не обещайте deep link, пока он не поддерживается публичным скриптом.

Почему виджет показывает английский?

Проверьте, что стоит data-lang="ru". Без явного языка скрипт читает первые две буквы <html lang> вашей страницы. Если CMS оставила там английский, форма получит английский контекст.

Можно ли изменить шрифт и форму кнопки?

Публичные настройки позволяют задать текст и цвет фона через data-label и data-color. Отдельных атрибутов для шрифта, радиуса, иконки и размера нет. Не переопределяйте внутренние классы как стабильный API: они могут измениться.

Виджет работает на нескольких страницах?

Да. Один и тот же фрагмент кода можно поставить на разные страницы. На одной странице скрипт также поддерживает несколько экземпляров и общую модаль, но обычно лучше один основной CTA и одна запасная ссылка — так интерфейс понятнее.

Клиенту нужен аккаунт Tervita?

Нет. Публичная запись работает без пользовательского аккаунта. Если салон включил проверку контакта, клиент подтверждает email или телефон кодом; это проверка конкретной записи, а не регистрация в Tervita.

Сам виджет снижает неявки?

Он делает запись доступнее, но не гарантирует явку. На результат влияют корректное подтверждение, своевременные email/SMS-напоминания и простой перенос. Практические шаги собраны в статье Как сократить неявки клиентов.

Начните с тестовой страницы и одного режима. Сгенерируйте код выше, вставьте его, пройдите форму на русском языке с телефона и только после этого добавляйте глобальный bubble или меняйте главный CTA сайта. Такой порядок быстрее выявляет неверный slug, ограничения CMS, CSP, пересечения с cookie-баннером и проблемы клавиатуры.