View source for Widgets for your own website/uk

<languages/>
{{#seo: |title=Віджети для вашого веб-сайту — SimplyBook.me |description=Додайте віджети SimplyBook.me на свій веб-сайт для прямого бронювання клієнтами. Налаштуйте їх відповідно до вашого бренду. Дізнайтеся більше тут! |titlemode=додати |keywords=fAQ, поширені запитання, програмне забезпечення для бронювання, запитання про систему запису на прийом, онлайн-запис на прийом, програмне забезпечення для календаря, система бронювання, календар бронювання, 	програмне забезпечення для планування, онлайн-планування запису на прийом, онлайн-планування, віджет, віджети, інтеграція, інтеграція з веб-сайтом, віджети для веб-сайту, віджети для веб-сайту }}


:Чому варто використовувати наші віджети <p><youtube>ngAxW1uTOk4</youtube></p>
<br><br>
:Доступний відеоурок  <p><youtube>8mi4MCmE_qg</youtube></p>
<br><br>

__FORCETOC__
= віджет iFrame =
<br><br>
:1. Візьміть код iFrame вашої сторінки бронювання в <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування віджетів бронювання</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Віджет iFrame</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Отримати код віджета.</span>
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
[[File:Booking widget design path redesigned.png|1200px | center|link=https://help.simplybook.me/images/3/37/Booking_widget_design_path_redesigned.png]]
<br><br>
[[File:Copy widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]
<br><br>
:2. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame). <br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.</span>
:'''Ось посібники для декількох популярних конструкторів веб-сайтів:'''
:::*[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::*[[Special:MyLanguage/Shopify |Shopify]]
:::*[[Special:MyLanguage/Joomla_integration |Joomla]]
:::*[[Special:MyLanguage/Squarespace |Squarespace]]
:::*[[Special:MyLanguage/Weebly |Weebly]]
:::*[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::*[[Special:MyLanguage/SITE123_integration |SITE123]]

;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті]
<br><br>
== Віджети з попередньо визначеною послугою, постачальником, категорією або місцем розташування ==
<br>

Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, [[Special:MyLanguage/Service_Categories_custom_feature |категорії]] або [[Special:MyLanguage/Multiple_Locations_custom_feature|місця]], які ви маєте. Наприклад, якщо у вас є 2 послуги А і В, і ви вибрали послугу А як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на конкретній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити.

[[File:Widget predefined values redesigned.png|1200px| center|link=https://help.simplybook.me/images/e/ed/Widget_predefined_values_redesigned.png]]
<br><br>

== Віджети з попередньо визначеними даними клієнта ==
<br>
Тепер ви також можете створити віджет для конкретного клієнта з уже заповненими його даними.
:1. Просто виберіть потрібний тип віджета в <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштуваннях</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування віджетів бронювання</span>, встановіть дизайн і натисніть <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Отримати код віджета.</span>
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
:2. Ви побачите спливаюче вікно з кодом, натисніть на нижню частину, щоб отримати детальну інформацію про код клієнта.
:Скопіюйте основний код, додайте до нього нижню частину (до заздалегідь визначеного розділу) і замініть <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">заздалегідь визначені</span> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">ім'я клієнта</span>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">електронну адресу клієнта</span> та <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">номер телефону клієнта</span> на необхідні дані клієнта.
[[File:Predefined client details redesigned.png|1200px |border| center|link=https://help.simplybook.me/images/3/3a/Predefined_client_details_redesigned.png]]
<br><br>
:3. Ви отримаєте такий код:<br>
<code><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": {<br>
"name": "Mary",<br>
"email": "mary@gmail.com",<br>
"phone": "+1234567890"<br>
}}
}});</script></code>
<br><br>
:4. В результаті детальна інформація про цього клієнта буде попередньо заповнена у віджеті, і клієнту не потрібно буде її вводити.
[[File:Predefined client result view.png|center]]
<br><br>
== Віджети для [[Special:MyLanguage/Client_Login_custom_feature|входу клієнта]], [[Special:MyLanguage/Packages_custom_feature|пакетів]], [[Special:MyLanguage/Membership_custom_feature|членства]], [[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|подарункових карток]] ==
<br><br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Наразі це працює тільки з віджетами iFrame і не працює з віджетами кнопки бронювання та кнопки контакту.</span><br>
<br><br>
Якщо ви використовуєте одну або кілька з цих функцій, може знадобитися додати віджет, який дозволить вашим клієнтам користуватися цією опцією на вашому веб-сайті.<br>
Це можна зробити простим способом, додавши відповідний елемент <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"> «navigate»</span> до коду віджета:
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Client_Login_custom_feature|Вхід клієнта]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;"> «navigate»: «client/sign-in»</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Packages_custom_feature|Пакети]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;"> «navigate»: «packages»</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Membership_custom_feature|Членство]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;"> «navigate»: «membership»</span>
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|Подарункові картки]]</span> - <span style="background-color:#fef3de; padding:5px; border-radius:5px;"> «navigate»: «gift-card»</span>
<br><br>
Приклад коду віджета <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|подарункових карток]]</span>:<br><br>
<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>
<br><br>
= Віджет кнопки бронювання =
<br><br>
:1. Візьміть код кнопки бронювання зі сторінки бронювання в <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування віджета бронювання</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Кнопка бронювання</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Отримати код віджета.</span>
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
[[File:Booking button widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b3/Booking_button_widget_path_redesigned.png]]
<br><br>
[[File:Booking button label redesigned.png|1200px|center|link=https://help.simplybook.me/images/d/dc/Booking_button_label_redesigned.png]]
<br><br>
[[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>
:2. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame).<br> 
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.</span>
:'''Ось посібники для декількох популярних конструкторів веб-сайтів:'''
:::*[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::*[[Special:MyLanguage/Shopify |Shopify]]
:::*[[Special:MyLanguage/Joomla_integration |Joomla]]
:::*[[Special:MyLanguage/Squarespace |Squarespace]]
:::*[[Special:MyLanguage/Weebly |Weebly]]
:::*[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::*[[Special:MyLanguage/SITE123_integration |SITE123]]

;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті]


;Віджети з попередньо визначеною послугою, постачальником, категорією або місцем розташування.
Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, [[Special:MyLanguage/Service_Categories_custom_feature|категорії]] або [[Special:MyLanguage/Multiple_Locations_custom_feature |місця розташування]], які ви маєте. Наприклад, якщо у вас є 2 послуги A і B, і ви вибрали послугу A як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на певній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити.
<br><br>

= Віджет кнопки бронювання та контактів =
<br><br>
:1. Увімкніть <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Contact_Widget_custom_feature |віджет контактів]]</span> у <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">розділі «Налаштування»</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Для розробки</span>».
[[File:Contact widget enable path redesigned.png|1200px| center|link=https://help.simplybook.me/images/8/8c/Contact_widget_enable_path_redesigned.png]]
<br><br>
:2. Візьміть код кнопки бронювання зі сторінки бронювання, перейшовши до <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">налаштувань</span> біля цієї налаштованої функції або в <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">налаштуваннях</span> у меню зліва -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування віджетів бронювання</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Віджет контактів</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Отримати код віджета.</span>
[[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>
[[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>
[[File:Contact widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/4/49/Contact_widget_code_redesigned.png]]
<br><br>
:3. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame). <br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.</span>
:'''Ось посібники для декількох популярних конструкторів веб-сайтів:'''
:::*[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::*[[Special:MyLanguage/Shopify |Shopify]]
:::*[[Special:MyLanguage/Joomla_integration |Joomla]]
:::*[[Special:MyLanguage/Squarespace |Squarespace]]
:::*[[Special:MyLanguage/Weebly |Weebly]]
:::*[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::*[[Special:MyLanguage/SITE123_integration |SITE123]]

;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті]

= Відгуки =
<br><br>
Хочете додати відгуки, які ваші клієнти залишають на сторінці бронювання, на свій веб-сайт?<br>
Просто дотримуйтесь цих інструкцій:
:1. Перейдіть до <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Налаштування віджетів бронювання</span> -&gt; <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Віджет відгуків.</span>
[[File:Reviews widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/5b/Reviews_widget_path_redesigned.png]]
<br><br>
:2. На цій сторінці ви зможете вибрати тему, встановити кольори, визначити кількість відгуків, які ви хочете відображати, та чи хочете ви, щоб ваші клієнти могли додавати відгуки за допомогою віджета. 
[[File:Reviews widget settings redesigned.png|1200px| center|link=https://help.simplybook.me/images/6/6d/Reviews_widget_settings_redesigned.png]]
<br><br>
:3. Тепер, коли дизайн налаштований, просто натисніть кнопку <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">«Отримати код віджета»</span>, скопіюйте код і вставте його на свій веб-сайт у потрібне місце.
[[File:Get reviews widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/f/f8/Get_reviews_widget_code_redesigned.png]]
<br>
Вітаємо! Віджет готовий, ваші відгуки будуть опубліковані та оновлюватися на вашому веб-сайті!
<br><br>