Widgets for your own website/uk: Difference between revisions

From SimplyBook.me
← Older editNewer edit →
VisualWikitext
Created page with "== Віджети для входу клієнта, пакетів, членства, подарункових карток == <br><br> <span style="background-color:#ffe9e9; padding:5px; border-radius:5px;">'''Зверніть увагу!''' Наразі це працює тільки з віджетами iFrame і не працює з в..."
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> вашого веб-сайту (або в будь-яке інше місце на вашій веб-плат..."
Line 103: Line 103:




<div lang="en" dir="ltr" class="mw-content-ltr">
;Віджети з попередньо визначеною послугою, постачальником, категорією або місцем розташування.
;Widgets with predefined service, provider, category or location.
Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, [[Custom_Features#Service_Categories |категорії]] або [[Custom_Features#Multiple_Locations |місця розташування]], які ви маєте. Наприклад, якщо у вас є 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;">[[Custom_Features#Contact_Widget |віджет контактів]]</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]
:::[https://help.simplybook.me/index.php/WordPress_integration *Wordpress]
:::*[https://help.simplybook.me/index.php/Shopify Shopify]
:::[https://help.simplybook.me/index.php/Shopify *Shopify]
:::*[https://help.simplybook.me/index.php/Joomla_integration Joomla]
:::[https://help.simplybook.me/index.php/Joomla_integration *Joomla]
:::*[https://help.simplybook.me/index.php/Wix_integration Wix]
:::[https://help.simplybook.me/index.php/Wix_integration *Wix]
:::*[https://help.simplybook.me/index.php/Squarespace Squarespace]
:::[https://help.simplybook.me/index.php/Squarespace *Squarespace]
:::*[https://help.simplybook.me/index.php/Weebly Weebly]
:::[https://help.simplybook.me/index.php/Weebly *Weebly]
:::*[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>


<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>

Revision as of 12:23, 19 May 2025

Other languages:


Чому варто використовувати наші віджети



Доступний відеоурок




віджет iFrame



1. Візьміть код iFrame вашої сторінки бронювання в Налаштування -> Налаштування віджетів бронювання -> Віджет iFrame -> Отримати код віджета.







2. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame).

Зверніть увагу! Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.

Ось посібники для декількох популярних конструкторів веб-сайтів:
*Wordpress
*Shopify
*Joomla
*Wix
*Squarespace
*Weebly
*Go Daddy
*SITE123
Перевірте, як віджети можуть виглядати на вашому веб-сайті



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


Ця функція дозволяє генерувати код 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» до коду віджета:



Приклад коду віджета подарункових карток:

<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.

Ось посібники для декількох популярних конструкторів веб-сайтів:
*Wordpress
*Shopify
*Joomla
*Wix
*Squarespace
*Weebly
*Go Daddy
*SITE123
Перевірте, як віджети можуть виглядати на вашому веб-сайті


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

Ця функція дозволяє генерувати код iframe спеціально для послуги, постачальника, категорії або місця розташування, які ви маєте. Наприклад, якщо у вас є 2 послуги A і B, і ви вибрали послугу A як попередньо визначену, віджет відкриється на цій послузі, пропускаючи крок вибору послуги. Ця функція може бути корисною, якщо вам потрібно відобразити тільки певні послуги на певній сторінці вашого веб-сайту. Кроки для створення коду такі самі, як і вище, тільки в налаштуваннях віджета виберіть елемент, який потрібно попередньо визначити.

Віджет кнопки бронювання та контактів



1. Увімкніть віджет контактів у розділі «Налаштування» -> «Для розробки».



2. Візьміть код кнопки бронювання зі сторінки бронювання, перейшовши до налаштувань біля цієї налаштованої функції або в налаштуваннях у меню зліва -> Налаштування віджетів бронювання -> Віджет контактів -> Отримати код віджета.







3. Вставте його в HTML-код <body> вашого веб-сайту (або в будь-яке інше місце на вашій веб-платформі, призначене для вставки HTML-коду JavaScript iFrame).

Зверніть увагу! Різні конструктори/платформи веб-сайтів можуть мати різні способи додавання HTML-коду, тому спочатку слід перевірити, чи підтримує ваш веб-сайт вставку HTML-коду JavaScript.

Ось посібники для декількох популярних конструкторів веб-сайтів:
*Wordpress
*Shopify
*Joomla
*Wix
*Squarespace
*Weebly
*Go Daddy
*SITE123
Перевірте, як віджети можуть виглядати на вашому веб-сайті

Відгуки



Хочете додати відгуки, які ваші клієнти залишають на сторінці бронювання, на свій веб-сайт?
Просто дотримуйтесь цих інструкцій:

1. Перейдіть до Налаштування -> Налаштування віджетів бронювання -> Віджет відгуків.



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



3. Тепер, коли дизайн налаштований, просто натисніть кнопку «Отримати код віджета», скопіюйте код і вставте його на свій веб-сайт у потрібне місце.


Вітаємо! Віджет готовий, ваші відгуки будуть опубліковані та оновлюватися на вашому веб-сайті!

Retrieved from "https://help.simplybook.me/index.php?title=Widgets_for_your_own_website/uk&oldid=21448"