Виджет онлайн-записи для сайта

Виджет поможет клиентам записываться на ваши услуги через Телеграм и на сайте.

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

Как создать виджет?

Предварительно нужно создать филиал и настроить услуги, назначив их сотрудникам. Как это сделать, рассказали в статье "Настройки сервиса записи".

Для начала перейдите в раздел "Виджеты", кнопку можно найти в верхнем меню:

Если в проекте еще не было созданных виджетов, то в середине экрана в разделе "Виджеты" вы увидите четыре кнопки:

Нажмите на кнопку "Виджет онлайн-записи", после чего вы перейдете в настройки виджета:

Основная информация

В данной вкладке необходимо прописать наименование виджета (будет отображено на сайте) и домен сайта, на котором вы хотите отображать виджет с онлайн-записью (если сайт собран не на стороне Сейлбот). Если сайт собран в конструкторе Сейлбота, то указывать домен не нужно.

Далее выберите филиал, услуги и исполнители которого будут отображаться в виджете:

Теперь можно переходить к кастомизации виджета.

Настройки внешнего вида

Логотип и название виджета будут отображены в его шапке:

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

Цветовая гамма виджета

Цветовую гамму виджета можно выбрать по своему усмотрению:

Фон виджета:

Главная тема бренда виджета: отобразит кнопки, цены и иконки в установленном цветовом решении:

Цвет текста: изменит цветовое решение текста кнопки или основного текста в зависимости от выбранного значения:

Текст кнопки

По умолчанию в кнопке располагается текст "Выбрать услуги" и "Выбрать специалиста", но можно задать собственный текст:

Теперь сохраните настройки:

Как встроить виджет на сайт

Перейдите в режим редактирования сайта:

Далее найдите в списке секций онлайн-запись и добавьте ее:

В контенте выберите, какой виджет отображать на сайте (если у вас несколько виджетов онлайн-записи):

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

Далее установите необходимые настройки фона и отображения:

Сохраните настройки сайта.

Теперь ваши клиенты смогут записываться на услуги круглосуточно, просто перейдя на ваш сайт:

Как встроить виджет на иной сайт

После сохранения виджета, обновите страницу, чтобы у вас появился следующий блок со скриптом виджета и полем для названия секции:

Если вам необходимо встроить код на сайт, то скопируйте скрипт и вставьте его в свой лендинг.

В случае, если вы будете использовать виджет на собственных сайтах, НЕ собранных на Salebot, тогда пропишите в поле класс элемента:

Виджет для Telegram

После того как вы узнали, как создать виджет и внедрить его на сайт, вы можете создать кнопку Web-app в Telegram, которая помогает открывать сайт в виде приложения в мессенджере.

Вместо полного сайта можно создать лендинг с одной секцией в виде виджета онлайн-записи и направлять вашим клиентам виджет в виде кнопки в Телеграме с помощью кнопки веб-апп.

Необходимо воспользоваться функцией quiz_link(mini_landing_page_id,display_my_domain), из которой понадобится только один параметр mini_landing_page_id.

Далее создайте блок, где в калькуляторе назначьте переменную (в примере переменная называется booker_link), в которой укажите функцию quiz_link(mini_landing_page_id), где в параметре передается значение айди страницы сайта:

Шаг 1. Создание блока с функцией

Создайте блок в конструкторе и в калькуляторе пропишите переменную, в которой нужно задать значение в виде функции booker_link = quiz_link('ID ВАШЕГО САЙТА'):

Важно!

Не забудьте сохранить настройки блока.

Шаг 2. Находим нужный ID страницы сайта.

Чтобы найти ID страницы сайта, перейдите в соответствующий раздел:

Далее нажмите на плашку с нужным сайтом, чтобы перейти в настройки страниц этого сайта:

Далее наведите на строку со страницей, в котором у вас создана секция "Онлайн-запись":

Скопируйте ID и вставьте его в блок в конструкторе воронок:

Шаг 3. Добавляем кнопку в блок конструктора.

Следующим шагом нужно добавить кнопку в блок — для этого сначала разверните вкладку настроек "Кнопки" (кликните на "Кнопки") и нажмите на "+ Добавить кнопку":

После клика откроется настройка для добавления кнопки:

Здесь необходимо:

Задать название кнопки: это может быть любое необходимое наименование.
Задать функцию кнопки: должна быть кнопка Web App Telegram:

Указать ссылку для открытия сайта при нажатии на кнопку:

Ссылка уже лежит в переменной с помощью калькулятора и функции quiz_link, поэтому в поле URL будет указана назначенная переменная booker_link через интерполяцию — то есть переменную добавляем в конструкцию #{}, в которой лежит наша ссылка с сайтом и виджетом:

Далее нажмите кнопку “Добавить”, чтобы настройки кнопки сохранились и добавились в блок.

Обязательно кликните на "Сохранить", чтобы настройки блока не потерялись:

Полностью настроенный блок выглядит следующим образом:

Полезно!

Необязательно для кнопки Web-app создавать блок с условием (первостепенной проверки условия, начало диалога): вы можете создать кнопку и добавить функцию quiz_link в любой блок вашей воронки (состояние, не состояние и т.п.) (см. пример "Блок "Состояние диалога" с кнопкой Web-app Telegram')