Reservation.Studio JavaScript Widget

Общ преглед

Reservation.Studio JavaScript Widget ви позволява да интегрирате функционалност за резервации във всеки уебсайт. Този лек widget предоставя персонализируем интерфейс за резервации, който се свързва с платформата Reservation.Studio.

Какво ще научите

• Как да вградите JS кода и да инициализирате RSConfig.
• Кои задължителни и незадължителни параметри са налични.
• Как да персонализирате бутон, модал и параметри на заявките.

Бързо начало

Инсталация

Добавете следния код към вашия уебсайт:

<script>
  var RSConfig = {
    type: 'location_services',
    slug: 'your-location-slug',
  };
  !(function (b, c, d) {
    var a,
      e = b.getElementsByTagName(c)[0];
    b.getElementById(d) ||
      (((a = b.createElement(c)).id = d),
      (a.src = 'https://js-widget.reservation.studio/v2/widget.min.js'),
      e.parentNode.insertBefore(a, e),
      (a.onload = function () {
        window.RSWidget(RSConfig);
      }));
  })(document, 'script', 'rs-booking-widget-js');
</script>

Конфигурация

Задължителни опции

Опция	Тип	Описание	По подразбиране
type	string	Типът на изгледа за резервации	location_profile
slug	string	Уникалният идентификатор за вашата локация или бизнес	-

Налични типове:

• location_profile
• location_services
• location_service_category
• location_classes
• business_profile

Незадължителни опции

Опция	Тип	Описание	По подразбиране
language	string	Език на widget-а (bg, en, de, es, it, fr, tr, ro, el, mk, ru)	Език на браузъра
buttons_selector	string	CSS селектор за елементи, които трябва да отварят widget-а	-
parameters	object	Допълнителни параметри, които да се подадат на widget-а	-

Опции за плаващ бутон

Конфигурирайте плаващия бутон с тези опции под sticky_button:

Опция	Тип	Описание
text	string	Текст на бутона
text_color	string	Цвят на текста
background_color	string	Цвят на фона на бутона
tooltip_text	string	Текст на подсказката
tooltip_expire_time	number	Време за изтичане на подсказката в секунди
tooltip_show_delay	number	Забавяне преди показване на подсказката в секунди
position	string	Позиция на бутона

Състоянието на подсказката се управлява с помощта на бисквитки. След като потребителят затвори подсказката, тя няма да се появи отново, докато не изтече времето за изтичане (контролирано от tooltip_expire_time).

Налични позиции:

• top-left, top-middle, top-right
• right-top, right-middle, right-bottom
• bottom-left, bottom-middle, bottom-right
• left-top, left-middle, left-bottom

Опции за модалния прозорец

Конфигурирайте модалния прозорец с тези опции под modal:

Опция	Тип	Описание	По подразбиране
max_width	string	Максимална ширина (напр. 500px или 90%)	1320px
max_height	string	Максимална височина (напр. 500px или 90%)	98%

Параметри на заявката

Подайте допълнителни параметри към widget с опцията parameters:

var RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  parameters: {
    category: '123',
    services: '123,124',
  },
};

Поддържани параметри:

Параметър	Тип	Описание	Пример
category	string	Показване на категория	'123'
services	string	Списък с ID на услуги, разделени със запетая, които да се показват като избрани	'123,124'

UTM параметри

Проследявайте маркетинг кампании с тези опции под utm:

Опция	Тип	Описание
source	string	Източник на трафик
medium	string	Медия на трафик
campaign	string	Име на кампания
content	string	Идентификатор на съдържание
term	string	Търсена дума

Widget-ът автоматично открива UTM параметри от URL адреса на заявката (utm_source, utm_medium и т.н.) и ги съхранява в локалното хранилище. Тези параметри се използват за всички взаимодействия с widget-а, докато не изтекат (по подразбиране: 1 час). Ако не са предоставени UTM параметри, widget-ът използва по подразбиране source: 'reservation.studio', medium: 'js-widget'.

Разширено използване

Персонализирани бутони за задействане

Използвайте опцията buttons_selector, за да укажете кои елементи трябва да отварят widget-а при кликване:

<!-- HTML -->
<button class="open-booking-widget">Резервирай сега</button>

<!-- JavaScript конфигурация -->
<script>
  var RSConfig = {
    type: 'location_services',
    slug: 'your-location-slug',
    buttons_selector: '.open-booking-widget',
  };
</script>

Селекторът може да насочва елементи по клас, ID, име на таг или сложни селектори.

Забележка: Елементите трябва да съществуват, когато widget-ът се инициализира. Динамично добавените елементи може да не работят според очакванията.

Динамична конфигурация с атрибути на данни

Персонализирайте поведението на widget-а за конкретни бутони, използвайки атрибути на данни:

<!-- Различна локация -->
<button class="open-booking-widget" data-slug="location2">
  Резервирай в Локация 2
</button>

<!-- Различен език -->
<button class="open-booking-widget" data-language="en">
  Резервирай на английски
</button>

<!-- Персонализирани UTM параметри -->
<button
  class="open-booking-widget"
  data-utm='{"source":"newsletter","medium":"email"}'
>
  Резервирай от бюлетин
</button>

<!-- Филтриране по категория -->
<button class="open-booking-widget" data-parameters-category="123">
  Резервирай в категория
</button>

<!-- Филтриране по услуги -->
<button class="open-booking-widget" data-parameters-services="123,124">
  Резервирай конкретни услуги
</button>

За параметри на заявката използвайте формата data-parameters-{name}, където {name} е името на параметъра. Можете да използвате сложни вложени параметри, като разделяте всяко ниво с тире.

Забележка: Свойствата slug, language, utm и параметрите (чрез data-parameters-*) могат да бъдат презаписани с атрибути на данни.

Пълен списък с всички налични опции и техните описания можете да намерите тук: Опции на компонента.