Created page with "1200px|border|center|link=https://help.simplybook.me/images/7/74/Contact_widget_design_path_redesigned.png <br><br> 1200px | center|link=https://help.simplybook.me/images/4/49/Contact_widget_code_redesigned.png <br><br> :3. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-плат..." |
Updating to match new version of source page |
||
| Line 3: | Line 3: | ||
<div class="mw-translate-fuzzy"> | |||
:Чому варто використовувати наші віджети [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=ngAxW1uTOk4]] | :Чому варто використовувати наші віджети [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=ngAxW1uTOk4]] | ||
<br><br> | <br><br> | ||
:Доступний відеоурок [[File:Youtube-Logo.png|link=https://youtu.be/8mi4MCmE_qg]] | :Доступний відеоурок [[File:Youtube-Logo.png|link=https://youtu.be/8mi4MCmE_qg]] | ||
<br><br> | <br><br> | ||
</div> | |||
__FORCETOC__ | __FORCETOC__ | ||
<div class="mw-translate-fuzzy"> | |||
= віджет iFrame = | = віджет iFrame = | ||
<br><br> | <br><br> | ||
| Line 29: | Line 32: | ||
:::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy] | :::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy] | ||
:::[https://help.simplybook.me/index.php/SITE123_integration *SITE123] | :::[https://help.simplybook.me/index.php/SITE123_integration *SITE123] | ||
</div> | |||
;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті] | ;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті] | ||
| Line 35: | Line 39: | ||
<br> | <br> | ||
<div class="mw-translate-fuzzy"> | |||
Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, [[Custom_Features#Service_Categories |категорії]] або [[Custom_Features#Multiple_Locations |місця]], які ви маєте. Наприклад, якщо у вас є 2 послуги А і В, і ви вибрали послугу А як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на конкретній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити. | Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, [[Custom_Features#Service_Categories |категорії]] або [[Custom_Features#Multiple_Locations |місця]], які ви маєте. Наприклад, якщо у вас є 2 послуги А і В, і ви вибрали послугу А як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на конкретній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити. | ||
</div> | |||
[[File:Widget predefined values redesigned.png|1200px| center|link=https://help.simplybook.me/images/e/ed/Widget_predefined_values_redesigned.png]] | [[File:Widget predefined values redesigned.png|1200px| center|link=https://help.simplybook.me/images/e/ed/Widget_predefined_values_redesigned.png]] | ||
| Line 62: | Line 68: | ||
[[File:Predefined client result view.png|center]] | [[File:Predefined client result view.png|center]] | ||
<br><br> | <br><br> | ||
<div class="mw-translate-fuzzy"> | |||
== Віджети для [[Client_Login_custom_feature|входу клієнта]], [[Packages_custom_feature|пакетів]], [[Membership_custom_feature|членства]], [[Coupons_and_Gift_Cards_custom_feature|подарункових карток]] == | == Віджети для [[Client_Login_custom_feature|входу клієнта]], [[Packages_custom_feature|пакетів]], [[Membership_custom_feature|членства]], [[Coupons_and_Gift_Cards_custom_feature|подарункових карток]] == | ||
<br><br> | <br><br> | ||
| Line 73: | Line 80: | ||
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Подарункові картки]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;"> «navigate»: «gift-card»</span> | *<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Подарункові картки]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;"> «navigate»: «gift-card»</span> | ||
<br><br> | <br><br> | ||
</div> | |||
<div class="mw-translate-fuzzy"> | |||
Приклад коду віджета <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|подарункових карток]]</span>:<br><br> | Приклад коду віджета <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|подарункових карток]]</span>:<br><br> | ||
</div> | |||
<code><script src="//simplybook.it/v2/widget/widget.js"></script> | <code><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></code> | <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></code> | ||
| Line 88: | Line 98: | ||
[[File:Get booking button widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/54/Get_booking_button_widget_code_redesigned.png]] | [[File:Get booking button widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/54/Get_booking_button_widget_code_redesigned.png]] | ||
<br><br> | <br><br> | ||
<div class="mw-translate-fuzzy"> | |||
:2. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame).<br> | :2. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame).<br> | ||
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.</span> | <span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.</span> | ||
| Line 99: | Line 110: | ||
:::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy] | :::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy] | ||
:::[https://help.simplybook.me/index.php/SITE123_integration *SITE123] | :::[https://help.simplybook.me/index.php/SITE123_integration *SITE123] | ||
</div> | |||
;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті] | ;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті] | ||
<div class="mw-translate-fuzzy"> | |||
;Віджети з попередньо визначеною послугою, постачальником, категорією або місцем розташування. | ;Віджети з попередньо визначеною послугою, постачальником, категорією або місцем розташування. | ||
Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, [[Custom_Features#Service_Categories |категорії]] або [[Custom_Features#Multiple_Locations |місця розташування]], які ви маєте. Наприклад, якщо у вас є 2 послуги A і B, і ви вибрали послугу A як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на певній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити. | Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, [[Custom_Features#Service_Categories |категорії]] або [[Custom_Features#Multiple_Locations |місця розташування]], які ви маєте. Наприклад, якщо у вас є 2 послуги A і B, і ви вибрали послугу A як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на певній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити. | ||
<br><br> | <br><br> | ||
</div> | |||
<div class="mw-translate-fuzzy"> | |||
= Віджет кнопки бронювання та контактів = | = Віджет кнопки бронювання та контактів = | ||
<br><br> | <br><br> | ||
| Line 115: | Line 130: | ||
[[File:Contact widget settings path redesigned.png|1200px|border| center|link=https://help.simplybook.me/images/0/09/Contact_widget_settings_path_redesigned.png]] | [[File:Contact widget settings path redesigned.png|1200px|border| center|link=https://help.simplybook.me/images/0/09/Contact_widget_settings_path_redesigned.png]] | ||
<br><br> | <br><br> | ||
</div> | |||
<div class="mw-translate-fuzzy"> | |||
[[File:Contact widget design path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/7/74/Contact_widget_design_path_redesigned.png]] | [[File:Contact widget design path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/7/74/Contact_widget_design_path_redesigned.png]] | ||
<br><br> | <br><br> | ||
| Line 130: | Line 147: | ||
:::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy] | :::[https://help.simplybook.me/index.php/Go_Daddy *Go Daddy] | ||
:::[https://help.simplybook.me/index.php/SITE123_integration *SITE123] | :::[https://help.simplybook.me/index.php/SITE123_integration *SITE123] | ||
</div> | |||
;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті] | ;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті] | ||
Revision as of 12:44, 22 September 2025
- Чому варто використовувати наші віджети
- Доступний відеоурок
віджет 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»
Приклад коду віджета подарункових карток:
<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>
Віджет кнопки бронювання
- 1. Візьміть код кнопки бронювання зі сторінки бронювання в Налаштування -> Налаштування віджета бронювання -> Кнопка бронювання -> Отримати код віджета.
- 2. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame).
Зверніть увагу! Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.
- Ось посібники для декількох популярних конструкторів веб-сайтів:
- Віджети з попередньо визначеною послугою, постачальником, категорією або місцем розташування.
Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, категорії або місця розташування, які ви маєте. Наприклад, якщо у вас є 2 послуги A і B, і ви вибрали послугу A як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на певній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити.
Віджет кнопки бронювання та контактів
- 1. Увімкніть віджет контактів у розділі «Налаштування» -> «Для розробки».
- 2. Візьміть код кнопки бронювання зі сторінки бронювання, перейшовши до налаштувань біля цієї налаштованої функції або в налаштуваннях у меню зліва -> Налаштування віджетів бронювання -> Віджет контактів -> Отримати код віджета.
- 3. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame).
Зверніть увагу! Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.
- Ось посібники для декількох популярних конструкторів веб-сайтів:
Відгуки
Хочете додати відгуки, які ваші клієнти залишають на сторінці бронювання, на свій веб-сайт?
Просто дотримуйтесь цих інструкцій:
- 1. Перейдіть до Налаштування -> Налаштування віджетів бронювання -> Віджет відгуків.
- 2. На цій сторінці ви зможете вибрати тему, встановити кольори, визначити кількість відгуків, які ви хочете відображати, та чи хочете ви, щоб ваші клієнти могли додавати відгуки за допомогою віджета.
- 3. Тепер, коли дизайн налаштований, просто натисніть кнопку «Отримати код віджета», скопіюйте код і вставте його на свій веб-сайт у потрібне місце.
Вітаємо! Віджет готовий, ваші відгуки будуть опубліковані та оновлюватися на вашому веб-сайті!
