Reservation.Studio JavaScript Widget
Общ преглед
Reservation.Studio JavaScript Widget ви позволява да интегрирате функционалност за резервации във всеки уебсайт. Този лек widget предоставя персонализируем интерфейс за резервации, който се свързва с платформата Reservation.Studio.
Бързо начало
Инсталация
Добавете следния код към вашия уебсайт:
<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-*
) могат да бъдат презаписани с атрибути на данни.
Пълен списък с всички налични опции и техните описания можете да намерите тук: Опции на компонента.