Преминете към основното съдържание

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>

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

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

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

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

  • location_profile
  • location_services
  • location_service_category
  • location_classes
  • business_profile

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

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

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

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

ОпцияТипОписание
textstringТекст на бутона
text_colorstringЦвят на текста
background_colorstringЦвят на фона на бутона
tooltip_textstringТекст на подсказката
tooltip_expire_timenumberВреме за изтичане на подсказката в секунди
tooltip_show_delaynumberЗабавяне преди показване на подсказката в секунди
positionstringПозиция на бутона

Състоянието на подсказката се управлява с помощта на бисквитки. След като потребителят затвори подсказката, тя няма да се появи отново, докато не изтече времето за изтичане (контролирано от 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_widthstringМаксимална ширина (напр. 500px или 90%)1320px
max_heightstringМаксимална височина (напр. 500px или 90%)98%

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

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

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

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

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

UTM параметри

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

ОпцияТипОписание
sourcestringИзточник на трафик
mediumstringМедия на трафик
campaignstringИме на кампания
contentstringИдентификатор на съдържание
termstringТърсена дума

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-*) могат да бъдат презаписани с атрибути на данни.

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

💡Все още нямаш бизнес профил?

Възползвайте се максимално от възможностите за успех! Регистрирайте се за нашето безплатно обучение и създайте бизнес профил, за да откриете нови хоризонти и да подобрите вашето бизнес представяне. Не пропускайте шанса да станете част от нашата професионална мрежа, където ще получите ценни знания и ресурси, необходими за вашия растеж и успех.