SimplyBook.me

Widgets for your own website/uk: Difference between revisions

← Older edit
VisualWikitext
Created page with "Віджети для вашого веб-сайту"
Tags: Mobile edit Mobile web edit
No edit summary
 
(18 intermediate revisions by 2 users not shown)
Line 3: Line 3:




:Чому варто використовувати наші віджети [[File:Youtube-Logo.png|link=https://www.youtube.com/watch?v=ngAxW1uTOk4]]
:Чому варто використовувати наші віджети <p><youtube>ngAxW1uTOk4</youtube></p>
<br><br>
<br><br>
:Доступний відеоурок [[File:Youtube-Logo.png|link=https://youtu.be/8mi4MCmE_qg]]
:Доступний відеоурок <p><youtube>8mi4MCmE_qg</youtube></p>
<br><br>
<br><br>


__FORCETOC__
__FORCETOC__
<div lang="en" dir="ltr" class="mw-content-ltr">
= віджет iFrame =
=iFrame Widget=
<br><br>
<br><br>
:1. Take the iFrame code of your booking page in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">iFrame widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
: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]]
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
<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]]
[[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>
<br><br>
[[File:Copy widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png ]]
[[File:Copy widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]
<br><br>
<br><br>
: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). <br>
:2. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame). <br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''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.</span>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.</span>
:'''Here are tutorials for several popular website builders:'''
:'''Ось посібники для декількох популярних конструкторів веб-сайтів:'''
:::*[https://help.simplybook.me/index.php/WordPress_integration Wordpress]
:::*[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::*[https://help.simplybook.me/index.php/Shopify Shopify]
:::*[[Special:MyLanguage/Shopify |Shopify]]
:::*[https://help.simplybook.me/index.php/Joomla_integration Joomla]
:::*[[Special:MyLanguage/Joomla_integration |Joomla]]
:::*[https://help.simplybook.me/index.php/Wix_integration Wix]
:::*[[Special:MyLanguage/Squarespace |Squarespace]]
:::*[https://help.simplybook.me/index.php/Squarespace Squarespace]
:::*[[Special:MyLanguage/Weebly |Weebly]]
:::*[https://help.simplybook.me/index.php/Weebly Weebly]
:::*[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::*[https://help.simplybook.me/index.php/Go_Daddy Go Daddy]
:::*[[Special:MyLanguage/SITE123_integration |SITE123]]
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
<br><br>
<br><br>
</div>
== Віджети з попередньо визначеною послугою, постачальником, категорією або місцем розташування ==
<div lang="en" dir="ltr" class="mw-content-ltr">
==Widgets with predefined service, provider,category or location==
<br>
<br>
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, [[Special:MyLanguage/Service_Categories_custom_feature |категорії]] або [[Special:MyLanguage/Multiple_Locations_custom_feature|місця]], які ви маєте. Наприклад, якщо у вас є 2 послуги А і В, і ви вибрали послугу А як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на конкретній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити.
This feature allows you to generate iframe code specifically for service, provider, [[Custom_Features#Service_Categories |category]] or [[Custom_Features#Multiple_Locations |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.
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
[[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]]
<br><br>
<br><br>
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
== Віджети з попередньо визначеними даними клієнта ==
==Widgets with predefined client details==
<br>
<br>
Now you can also create a widget for some particular client with his/her details already filled in.
Тепер ви також можете створити віджет для конкретного клієнта з уже заповненими його даними.
:1. Just select the widget type you need in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span>, set the design and click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
: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]]
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
<br><br>
</div>
:2. Ви побачите спливаюче вікно з кодом, натисніть на нижню частину, щоб отримати детальну інформацію про код клієнта.
<div lang="en" dir="ltr" class="mw-content-ltr">
:Скопіюйте основний код, додайте до нього нижню частину (до заздалегідь визначеного розділу) і замініть <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> на необхідні дані клієнта.
:2. You will see a pop-up window with the code, click on the bottom part to get client code details.
:Please copy the main code, add bottom part to it(to predefined section) and replace <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client name</span>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client email</span>, <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Predefined client phone</span> with the necessary client details.
[[File:Predefined client details redesigned.png|1200px |border| center|link=https://help.simplybook.me/images/3/3a/Predefined_client_details_redesigned.png]]
[[File:Predefined client details redesigned.png|1200px |border| center|link=https://help.simplybook.me/images/3/3a/Predefined_client_details_redesigned.png]]
<br><br>
<br><br>
:3. You will get the code like this:<br>
:3. Ви отримаєте такий код:<br>
<code><script src="//simplybook.me/v2/widget/widget.js"></script>
<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>
<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>
Line 72: Line 58:
}});</script></code>
}});</script></code>
<br><br>
<br><br>
</div>
:4. В результаті детальна інформація про цього клієнта буде попередньо заповнена у віджеті, і клієнту не потрібно буде її вводити.
<div lang="en" dir="ltr" class="mw-content-ltr">
[[File:Predefined client result view.png|center]]
:4. As a result the details of this client will be pre-filled in the widget and there will be no need for client to provide them.
[[File:Predefined client result view.png | center]]
<br><br>
<br><br>
</div>
== Віджети для [[Special:MyLanguage/Client_Login_custom_feature|входу клієнта]], [[Special:MyLanguage/Packages_custom_feature|пакетів]], [[Special:MyLanguage/Membership_custom_feature|членства]], [[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|подарункових карток]] ==
<div lang="en" dir="ltr" class="mw-content-ltr">
==Widgets for [[Client_Login_custom_feature|Client Login]], [[Packages_custom_feature|Packages]], [[Membership_custom_feature|Memberships]], [[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]==
<br><br>
<br><br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Please note!''' It currently works with iFrame widgets only and does not work with booking button and contact button widgets.</span><br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Наразі це працює тільки з віджетами iFrame і не працює з віджетами кнопки бронювання та кнопки контакту.</span><br>
<br><br>
<br><br>
If you are using one or several of these features it may be necessary to add a widget that will allow your clients to use the option on your website.<br>
Якщо ви використовуєте одну або кілька з цих функцій, може знадобитися додати віджет, який дозволить вашим клієнтам користуватися цією опцією на вашому веб-сайті.<br>
It can be done in a simple way by adding of the corresponding <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">"navigate"</span> element to the widget code:
Це можна зробити простим способом, додавши відповідний елемент <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"> «navigate»</span> до коду віджета:
*<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Client_Login_custom_feature|Client Login]]</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/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;">[[Packages_custom_feature|Packages]]</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/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;">[[Membership_custom_feature|Memberships]]</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/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;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</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;">[[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>
<br><br>
</div>
Приклад коду віджета <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Special:MyLanguage/Coupons_and_Gift_Cards_custom_feature|подарункових карток]]</span>:<br><br>
<div lang="en" dir="ltr" class="mw-content-ltr">
<span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Coupons_and_Gift_Cards_custom_feature|Gift Cards]]</span> widget code example:<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>
<br><br>
<br><br>
<div lang="en" dir="ltr" class="mw-content-ltr">
= Віджет кнопки бронювання =
=Booking Button Widget=
<br><br>
<br><br>
:1. Take the booking button code of your booking page in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widget settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking button</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
: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]]
[[File:Booking widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]
<br><br>
<br><br>
</div>
<div lang="en" dir="ltr" class="mw-content-ltr">
[[File:Booking button widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/b/b3/Booking_button_widget_path_redesigned.png]]
[[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>
<br><br>
Line 111: Line 87:
[[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>
:2. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame).<br>  
<div lang="en" dir="ltr" class="mw-content-ltr">
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.</span>
: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).<br>  
:'''Ось посібники для декількох популярних конструкторів веб-сайтів:'''
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''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.</span>
:::*[[Special:MyLanguage/WordPress_integration |Wordpress]]
:'''Here are tutorials for several popular website builders:'''
:::*[[Special:MyLanguage/Shopify |Shopify]]
:::*[https://help.simplybook.me/index.php/WordPress_integration Wordpress]
:::*[[Special:MyLanguage/Joomla_integration |Joomla]]
:::*[https://help.simplybook.me/index.php/Shopify Shopify]
:::*[[Special:MyLanguage/Squarespace |Squarespace]]
:::*[https://help.simplybook.me/index.php/Joomla_integration Joomla]
:::*[[Special:MyLanguage/Weebly |Weebly]]
:::*[https://help.simplybook.me/index.php/Wix_integration Wix]
:::*[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::*[https://help.simplybook.me/index.php/Squarespace Squarespace]
:::*[[Special:MyLanguage/SITE123_integration |SITE123]]
:::*[https://help.simplybook.me/index.php/Weebly Weebly]
:::*[https://help.simplybook.me/index.php/Go_Daddy Go Daddy]
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
</div>




<div lang="en" dir="ltr" class="mw-content-ltr">
;Віджети з попередньо визначеною послугою, постачальником, категорією або місцем розташування.
;Widgets with predefined service, provider, category or location.
Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, [[Special:MyLanguage/Service_Categories_custom_feature|категорії]] або [[Special:MyLanguage/Multiple_Locations_custom_feature |місця розташування]], які ви маєте. Наприклад, якщо у вас є 2 послуги A і B, і ви вибрали послугу A як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на певній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити.
This feature allows you to generate iframe code specifically for service, provider, [[Custom_Features#Service_Categories |category]] or [[Custom_Features#Multiple_Locations |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.
<br><br>
<br><br>
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
= Віджет кнопки бронювання та контактів =
=Booking and Contact Button Widget=
<br><br>
<br><br>
:1. Enable <span style="background-color:#cdeffc; padding:5px; border-radius:5px;">[[Custom_Features#Contact_Widget |Contact Widget]]</span> in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Custom Features</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">For Development</span>.
: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]]
[[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>
<br><br>
:2. Take the booking button code of your booking page by navigating to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> near this custom feature or in <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> in the left-side menu -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Contact widget</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code.</span>
: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]]
[[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 lang="en" dir="ltr" class="mw-content-ltr">
[[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>
[[File:Contact widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/4/49/Contact_widget_code_redesigned.png]]
[[File:Contact widget code redesigned.png|1200px | center|link=https://help.simplybook.me/images/4/49/Contact_widget_code_redesigned.png]]
<br><br>
<br><br>
: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). <br>
:3. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame). <br>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''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.</span>
<span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.</span>
:'''Here are tutorials for several popular website builders:'''
:'''Ось посібники для декількох популярних конструкторів веб-сайтів:'''
:::*[https://help.simplybook.me/index.php/WordPress_integration Wordpress]
:::*[[Special:MyLanguage/WordPress_integration |Wordpress]]
:::*[https://help.simplybook.me/index.php/Shopify Shopify]
:::*[[Special:MyLanguage/Shopify |Shopify]]
:::*[https://help.simplybook.me/index.php/Joomla_integration Joomla]
:::*[[Special:MyLanguage/Joomla_integration |Joomla]]
:::*[https://help.simplybook.me/index.php/Wix_integration Wix]
:::*[[Special:MyLanguage/Squarespace |Squarespace]]
:::*[https://help.simplybook.me/index.php/Squarespace Squarespace]
:::*[[Special:MyLanguage/Weebly |Weebly]]
:::*[https://help.simplybook.me/index.php/Weebly Weebly]
:::*[[Special:MyLanguage/Go_Daddy |Go Daddy]]
:::*[https://help.simplybook.me/index.php/Go_Daddy Go Daddy]
:::*[[Special:MyLanguage/SITE123_integration |SITE123]]
:::*[https://help.simplybook.me/index.php/SITE123_integration SITE123]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
;[https://simplydemowidgets.mozello.com/ Перевірте, як віджети можуть виглядати на вашому веб-сайті]
;[https://simplydemowidgets.mozello.com/ Check how widgets can look like on your website]
</div>


<div lang="en" dir="ltr" class="mw-content-ltr">
= Відгуки =
=Reviews Widget=
<br><br>
<br><br>
Wish to add reviews your clients leave on the booking page to your website?<br>
Хочете додати відгуки, які ваші клієнти залишають на сторінці бронювання, на свій веб-сайт?<br>
Just follow these instructions:
Просто дотримуйтесь цих інструкцій:
:1. Please go to <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Booking widgets settings</span> -> <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Reviews widget.</span>
: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]]
[[File:Reviews widget path redesigned.png|1200px | center|link=https://help.simplybook.me/images/5/5b/Reviews_widget_path_redesigned.png]]
<br><br>
<br><br>
: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.  
:2. На цій сторінці ви зможете вибрати тему, встановити кольори, визначити кількість відгуків, які ви хочете відображати, та чи хочете ви, щоб ваші клієнти могли додавати відгуки за допомогою віджета.  
[[File:Reviews widget settings redesigned.png|1200px| center|link=https://help.simplybook.me/images/6/6d/Reviews_widget_settings_redesigned.png]]
[[File:Reviews widget settings redesigned.png|1200px| center|link=https://help.simplybook.me/images/6/6d/Reviews_widget_settings_redesigned.png]]
<br><br>
<br><br>
:3. And now, when design is set, just click on <span style="background-color:#d4f8e5; padding:5px; border-radius:5px;">Get widget code</span> button, copy the code and insert it to your website to the desired place.
: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]]
[[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>
Congratulations! Widget is now ready, your reviews will be published and updated on your website!
Вітаємо! Віджет готовий, ваші відгуки будуть опубліковані та оновлюватися на вашому веб-сайті!
<br><br>
<br><br>
</div>
Retrieved from "https://help.simplybook.me/index.php?title=Widgets_for_your_own_website/uk"