Как установить виджет записи на сайт

Подготовьте публичное расписание

Если вы ещё не настроили бизнес, начните с гайда по веб-кабинету или настройки через Telegram. Для виджета нужны профиль, видимая клиентам услуга и рабочие интервалы, к которым она привязана.

В веб-кабинете откройте Настройки → Виджет. В блоке «Расписание» выберите то, в которое должны попадать записи с сайта.

Расписание должно быть публичным и не находиться в архиве. Если список пуст, откройте раздел «Расписание» и проверьте настройку «Публичное». Доступа только по ссылке для виджета недостаточно.

Выберите подходящий формат

Вверху редактора доступны четыре типа. Выбирайте по тому, где клиенту удобнее начать запись:

Кнопка

Компактная кнопка в нужном месте страницы, например под описанием услуги. По нажатию открывает окно записи.

Карточка

Блок с названием бизнеса, расписанием и кнопкой. Можно показывать до трёх услуг с ценами. Подойдёт для раздела «Услуги» или «Контакты».

Встроенный

Форма записи сразу внутри страницы. Выделите ей достаточно места, чтобы клиенту было удобно выбирать услугу и время.

Плавающий

Кнопка в выбранном углу экрана. Удобна на длинных страницах: запись остаётся под рукой при прокрутке.

Для нашего примера выберите «Карточка» и оставьте включённым «Показывать услуги и цены». Предпросмотр покажет услугу «Стрижка» из выбранного расписания.

Увеличить ↗

Подстройте оформление и проверьте телефон

В блоке «Оформление» выберите акцентный цвет из палитры и задайте короткий «Текст кнопки», например «Записаться». Лимит подписи — 40 символов.

Для карточки настройте показ услуг и цен. Для плавающего виджета выберите «Положение на экране»: сверху или снизу, справа или слева. Старайтесь не перекрывать чат поддержки, меню и баннер cookies.

Переключайте «Компьютер» и «Телефон» в предпросмотре. Проверьте длину подписи, читаемость карточки и расположение кнопки. На снимке ниже показан альтернативный вариант — плавающая кнопка снизу справа.

Увеличить ↗

Сохраните изменения и скопируйте код

Когда оформление готово, нажмите «Сохранить». Пока есть несохранённые изменения, вместо копирования редактор предлагает «Сначала сохраните». На сайте используется сохранённая версия.

В блоке «Код для сайта» выберите способ установки:

• «Скрипт» — для кнопки, карточки, плавающего и встроенного виджета. Код содержит контейнер и загрузчик.
• Iframe — только для типа «Встроенный». Это отдельный вариант вставки формы в страницу.

Нажмите «Скопировать код» вверху или «Копировать» рядом с кодом. Если копирование не удалось, выделите и скопируйте весь фрагмент вручную.

Для одного и того же виджета изменения оформления и выбранного расписания сохраняются под тем же идентификатором. После сохранения перезагрузите страницу сайта и проверьте результат. При смене способа встраивания замените фрагмент кодом, который показывает редактор.

Увеличить ↗

Вставьте код в страницу и опубликуйте её

Обычный HTML-сайт

1. Откройте HTML страницы. Вставьте контейнер виджета туда, где должна появиться кнопка, карточка или форма.
2. Добавьте тег загрузчика из того же фрагмента один раз на страницу. Сохраните контейнер и его атрибут data-bookingtime-widget без изменений.
3. Для варианта Iframe вставьте весь предложенный фрагмент в нужный блок страницы.
4. Опубликуйте изменения и откройте страницу по её обычному адресу.

Tilda

1. Добавьте блок T123 «HTML-код» из категории «Другое».
2. Вставьте код из Booking Time в содержимое блока.
3. Сохраните и переопубликуйте страницу. Проверяйте виджет на опубликованной странице: в редакторе и предпросмотре Tilda код может отображаться текстом.

Подробнее — в инструкции Tilda по HTML-коду.

WordPress

1. Добавьте блок «Произвольный HTML» в редакторе страницы.
2. Вставьте код виджета, обновите страницу и откройте её вне редактора.
3. Если после сохранения тег скрипта или iframe исчезает, обратитесь к администратору сайта: права пользователя и настройки платформы могут ограничивать такой код.

Расположение полей зависит от версии редактора. См. документацию блока Custom HTML.

Если сайт ведёт разработчик, передайте ему скопированный код и укажите, на каких страницах и в каком месте нужен виджет. Для плавающего варианта также назовите выбранный угол экрана.

Проверьте запись на опубликованном сайте

Откройте сайт как посетитель на компьютере и телефоне. Для кнопки, карточки и плавающего варианта нажмите «Записаться»; у встроенного варианта форма уже находится на странице.

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

Сделайте одну пробную запись со своими контактами и найдите её в кабинете. Если включено ручное подтверждение, подтвердите заявку и проверьте результат для клиента. Затем отмените пробную запись, чтобы освободить время.

Путь от выбора услуги до подтверждения подробнее разобран в статье «Как проходит запись глазами клиента». Виджет использует ту же систему записей; настройки расписания продолжают действовать.

Увеличить ↗