Виджет
Загрузчик
Параметры и методы загрузчика widget.js: адрес виджета, плавающая кнопка, свой триггер, логотип, открытие нужной услуги или сотрудника из кода.
https://widget.booknow.ru/widget.js объявляет глобальный класс BookNowWidget. Экземпляр создаётся один раз на страницу и размещает виджет в скрытом iframe, который загружается при первом открытии.
Параметры конструктора
var ewWidget = new BookNowWidget({
url: 'https://widget.booknow.ru/ваш-slug', // обязателен
button: { text: 'Записаться', showText: true, position: 'right',
color: '#fff', background: '#3793FF', textColor: '#000', textBackground: '#fff' },
trigger: '.my-book-button', // свой селектор-триггер
logo: true, // false — без логотипа; строка — свой логотип (white label)
logoBackground: '#fff'
})
| Параметр | Значение | По умолчанию |
|---|---|---|
url | адрес виджета аккаунта. Можно сразу указать локацию, услугу или сотрудника: …/<slug>/<location_uuid>/<service_uuid> | — |
button | объект с настройками плавающей кнопки или false, чтобы кнопку не показывать | кнопка без текста, справа |
button.text / button.showText | подпись и показывать ли её | Book Now, скрыта |
button.position | right или left | по направлению письма страницы |
button.color, button.background, button.textColor, button.textBackground | цвета иконки, фона, текста и подложки | из настроек аккаунта |
trigger | CSS-селектор элементов, клик по которым открывает виджет | — |
logo, logoBackground | логотип в кнопке | логотип BookNow |
Элементы с классом EWBookingWidgetTrigger открывают виджет всегда, без параметра trigger.
Методы
| Метод | Действие |
|---|---|
ewWidget.show() | открыть виджет |
ewWidget.hide() | закрыть |
ewWidget.setMain() | вернуть виджет на стартовый экран аккаунта |
ewWidget.setBranch(locationUuid) | открыть выбранную локацию |
ewWidget.setProduct(serviceUuid, locationUuid, stafferUuid) | открыть выбранную услугу, при необходимости с локацией и сотрудником |
ewWidget.setUser(stafferUuid, locationUuid) | открыть запись к сотруднику |
ewWidget.destroy(removeHTML) | удалить обработчики событий; со значением true удаляется и разметка |
UUID локаций, услуг и сотрудников берутся из панели или из API.
Сообщения виджета
Виджет внутри iframe общается с загрузчиком через postMessage. Загрузчик обрабатывает три типа: close (клиент закрыл форму), track (события аналитики, если на странице есть Яндекс.Метрика или GA) и redirect (после онлайн-оплаты: перейти на страницу результата). Если вы встраиваете виджет собственным iframe, эти сообщения необходимо обрабатывать самостоятельно.
Особые случаи
- Во встроенном браузере Instagram виджет открывается с учётом особенностей его области просмотра, загрузчик определяет это автоматически.
- Модальное окно блокирует прокрутку страницы на время показа и возвращает её при закрытии.
- Загрузчик добавляет в адрес виджета
back_url=iframeиreferrerс адресом страницы, откуда открыт виджет; это используется для кнопки «Закрыть» и статистики источников.