Віджет «Спливаюче вікно бронювання» додає на ваш сайт кнопку. Натискання відкриває вашу сторінку бронювання Barberly у спливаючому вікні посередині екрана, тож відвідувач бронює, не залишаючи поточну сторінку. Його можна використовувати на всьому сайті або на окремих сторінках, наприклад на сторінках послуг чи в дописах блогу.
Створіть новий екземпляр#
- Увійдіть в обліковий запис Barberly на portal.barberly.com.
- Перейдіть до МенюДодаткиВсі віджети.
- Натисніть Спливаюче вікно бронювання.
- Виберіть Створити новий екземпляр.
- Дайте екземпляру назву, наприклад «Основне вікно бронювання».
Налаштування#
- Текст кнопки
- Текст на кнопці, яка відкриває спливаюче вікно.
- URL-адреса для бронювання
- URL вашої сторінки бронювання Barberly, яка показується у вікні.
Стилі#
- Колір фону
- Колір кнопки.
- Колір тексту
- Колір тексту на кнопці. Виберіть такий, що контрастує з фоном.
- Набивка
- Внутрішній відступ кнопки.
- Радіус кордону
- Наскільки заокруглені кути кнопки.
- Вага шрифту
- Звичайний, жирний тощо.
- Радіус кордону
- Наскільки заокруглені кути вікна.
- Тінь від коробки
- Тінь навколо вікна.
На мобільних пристроях вікно підлаштовується під розмір екрана і має кнопку X, щоб його закрити.
Додайте вікно на сайт#
Попередній перегляд показує кнопку і спливаюче вікно. Натисніть кнопку, щоб перевірити, що вікно відкривається з вашою сторінкою бронювання.
- Скопіюйте код із розділу Скопіюйте цей код на свій сайт.
- Вставте його в HTML сайту там, де має бути кнопка.
- Збережіть і опублікуйте сайт.
Приклад коду:
<div id="popup-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="popup_booking" data-container-id="popup-booking-container"></script>Кроки для окремих платформ описано в інструкціях для WordPress, Wix і Squarespace.
Кілька екземплярів#
Ви можете створити більше екземплярів спливаючого вікна, наприклад з окремим дизайном для кожного розділу сайту. Повторіть описані вище кроки в Спливаюче вікно бронювання. Кожен екземпляр має власний код інтеграції.
Оновлення вікна на сайті#
Відкрийте екземпляр у МенюДодаткиВсі віджети, внесіть зміни та збережіть. Спливаюче вікно на сайті оновиться автоматично, тож змінювати код на сайті не потрібно.