Бічна панель бронювання

Віджет «Бічна панель бронювання» додає на ваш сайт кнопку. Натискання висуває з краю екрана бічну панель із вашою сторінкою бронювання Barberly. Щоб повернутися до сторінки, відвідувач закриває панель. Вона займає мало місця, тому її зручно мати на кожній сторінці сайту, зокрема на довгих сторінках, де звичайна кнопка зникає з поля зору під час прокручування.

Створіть новий екземпляр#

Увійдіть в обліковий запис Barberly на portal.barberly.com.
Перейдіть до МенюДодаткиВсі віджети.
Натисніть Бічна панель бронювання.
Виберіть Створити новий екземпляр.
Дайте екземпляру назву, наприклад «Основна бічна панель».

Налаштування#

Текст кнопки: Текст на кнопці, яка відкриває бічну панель.
URL-адреса для бронювання: URL вашої сторінки бронювання Barberly, яка показується в панелі.
Положення бічної панелі: Бік екрана, з якого відкривається панель, праворуч або ліворуч.

Стилі#

Стиль кнопки

Колір фону: Колір кнопки.
Колір тексту: Колір тексту на кнопці. Виберіть такий, що контрастує з фоном.
Набивка: Внутрішній відступ кнопки.
Радіус кордону: Наскільки заокруглені кути кнопки.
Вага шрифту: Звичайний, жирний тощо.

Стиль бічної панелі

Радіус кордону: Наскільки заокруглені кути панелі.
Тінь від коробки: Тінь навколо панелі.
ширина: Яку частину екрана займає панель, окремо для комп'ютера і мобільних пристроїв.

На менших екранах панель займає більшу частину ширини, а кнопку закриття добре видно.

Додайте панель на сайт#

Попередній перегляд показує кнопку і бічну панель. Натисніть кнопку, щоб перевірити, що панель висувається з вашою сторінкою бронювання.

Скопіюйте код із розділу Скопіюйте цей код на свій сайт.
Вставте його в HTML сайту там, де має бути кнопка.
Збережіть і опублікуйте сайт.

Приклад коду:

html

<div id="sidebar-booking-container"></div>
<script src="https://widgets.barberly.com/barberly-widgets.js" data-business-id="house13" data-widget-id="sidebar_booking" data-container-id="sidebar-booking-container"></script>

Кроки для окремих платформ описано в інструкціях для WordPress, Wix і Squarespace.

Закріпіть кнопку на місці#

Щоб кнопку було видно під час прокручування, додайте це до власного CSS вашого сайту:

css

#sidebar-booking-container {
  position: fixed;
  right: 20px; /* or left: 20px; */
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
}

Кілька екземплярів#

Ви можете створити більше екземплярів бічної панелі, наприклад з окремим дизайном для кожного розділу сайту. Повторіть описані вище кроки в Бічна панель бронювання. Кожен екземпляр має власний код інтеграції.

Оновлення панелі на сайті#

Відкрийте екземпляр у МенюДодаткиВсі віджети, внесіть зміни та збережіть. Бічна панель на сайті оновиться автоматично, тож змінювати код на сайті не потрібно.