Віджети для вашого веб-сайту
- Чому варто використовувати наші віджети
- Доступний відеоурок
віджет iFrame
- 1. Візьміть код iFrame вашої сторінки бронювання в Налаштування -> Налаштування віджетів бронювання -> Віджет iFrame -> Отримати код віджета.
- 2. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame).
Зверніть увагу! Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.
- Ось посібники для декількох популярних конструкторів веб-сайтів:
Віджети з попередньо визначеною послугою, постачальником, категорією або місцем розташування
Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, категорії або місця, які ви маєте. Наприклад, якщо у вас є 2 послуги А і В, і ви вибрали послугу А як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на конкретній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити.
Віджети з попередньо визначеними даними клієнта
Тепер ви також можете створити віджет для конкретного клієнта з уже заповненими його даними.
- 1. Просто виберіть потрібний тип віджета в Налаштуваннях -> Налаштування віджетів бронювання, встановіть дизайн і натисніть Отримати код віджета.
- 2. Ви побачите спливаюче вікно з кодом, натисніть на нижню частину, щоб отримати детальну інформацію про код клієнта.
- Скопіюйте основний код, додайте до нього нижню частину (до заздалегідь визначеного розділу) і замініть заздалегідь визначені ім'я клієнта, електронну адресу клієнта та номер телефону клієнта на необхідні дані клієнта.
- 3. Ви отримаєте такий код:
<script src="//simplybook.me/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/companyname.simplybook.me","theme":"belle","theme_settings":{"sb_base_color":"#FF6969","body_bg_color":"#ffffff","dark_font_color":"#494949","light_font_color":"#ffffff","sb_busy":"#dad2ce","sb_available":"#d3e0f1"},"timeline":"flexible","datepicker":"top_calendar","is_rtl":false,"app_config":{"predefined": {"client": {
"name": "Mary",
"email": "mary@gmail.com",
"phone": "+1234567890"
}}
}});</script>
- 4. В результаті детальна інформація про цього клієнта буде попередньо заповнена у віджеті, і клієнту не потрібно буде її вводити.
Віджети для входу клієнта, пакетів, членства, подарункових карток
Зверніть увагу! Наразі це працює тільки з віджетами iFrame і не працює з віджетами кнопки бронювання та кнопки контакту.
Якщо ви використовуєте одну або кілька з цих функцій, може знадобитися додати віджет, який дозволить вашим клієнтам користуватися цією опцією на вашому веб-сайті.
Це можна зробити простим способом, додавши відповідний елемент «navigate» до коду віджета:
- Вхід клієнта - «navigate»: «client/sign-in»
- Пакети - «navigate»: «packages»
- Членство - «navigate»: «membership»
- Подарункові картки - «navigate»: «gift-card»
Gift Cards widget code example:
<script src="//simplybook.it/v2/widget/widget.js"></script>
<script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/demo.simplybook.it","navigate":"gift-card","theme":"default","theme_settings":{"timeline_show_end_time":"0","timeline_modern_display":"as_slots","sb_base_color":"#0cadef","display_item_mode":"block","booking_nav_bg_color":"#80d0f2","body_bg_color":"#f7f7f7","dark_font_color":"#494949","light_font_color":"#ffffff","btn_color_1":"#5e7da7","sb_company_label_color":"#ffffff","hide_img_mode":"0","show_sidebar":"1","sb_busy":"#dad2ce","sb_available":"#0cadef"},"timeline":"modern","datepicker":"inline_datepicker","is_rtl":false,"app_config":{"predefined":[]}});</script>
Booking Button Widget
- 1. Take the booking button code of your booking page in Settings -> Booking widget settings -> Booking button -> Get widget code.
- 2. Insert it to the HTML code <body> of your website (or any other place in your website platform designed for inserting HTML JavaScript iFrame code).
Please note! Different website builders/platforms may have various ways to add HTML code, you should check first whether your website supports inserting HTML JavaScript code.
- Widgets with predefined service, provider, category or location.
This feature allows you to generate iframe code specifically for service, provider, category or location you have. For example, if you have 2 services A and B and you choose service A as predefined, the widget will open on that service, skipping the step of choosing the service. This feature may be useful if you need to display only certain services on a specific page on your website. The steps to generate the code are the same as above, only in the settings of the widget, choose the item you need to predefine.
Booking and Contact Button Widget
- 1. Enable Contact Widget in Custom Features -> For Development.
- 2. Take the booking button code of your booking page by navigating to Settings near this custom feature or in Settings in the left-side menu -> Booking widgets settings -> Contact widget -> Get widget code.
- 3. Insert it to the HTML code <body> of your website (or any other place in your website platform designed for inserting HTML JavaScript iFrame code).
Please note! Different website builders/platforms may have various ways to add HTML code, you should check first whether your website supports inserting HTML JavaScript code.
Reviews Widget
Wish to add reviews your clients leave on the booking page to your website?
Just follow these instructions:
- 1. Please go to Settings -> Booking widgets settings -> Reviews widget.
- 2. On the page you will be able to select the theme, set colors, decide on the number of reviews you wish to display and whether you wish your clients to be able to add reviews using the widget.
- 3. And now, when design is set, just click on Get widget code button, copy the code and insert it to your website to the desired place.
Congratulations! Widget is now ready, your reviews will be published and updated on your website!
