Интеграция чрез JavaScript

Този вариант е подходящ, ако имате достъп до HTML и JavaScript на сайта си и искате сами да управлявате как и къде се отваря уеб компонентът.

Какво ви е нужно

Активни онлайн резервации за обекта.
Правилен slug за обекта или профила, който ще показвате.
Достъп до страницата, в която ще добавите кода.

Базово инициализиране

Добавете следния код в страницата, в която искате да инициализирате уеб компонента:

<script>
  window.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`

Определя какво ще се отвори в уеб компонента. Потвърдените типове в текущите интеграции са:

location_profile
location_services
location_service_category
location_classes
business_profile

`slug`

Това е идентификаторът на профила, който уеб компонентът трябва да отвори. Ако slug липсва или не отговаря на избрания type, уеб компонентът няма да зареди правилната цел.

`language`

Ако не подадете език, уеб компонентът използва езика на браузъра и при нужда преминава към поддържан резервен език. Потвърдените стойности в текущия код са:

bg
en
de

Пример:

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  language: 'en',
};

Как потребителят отваря уеб компонента

От бутон или линк в страницата

Използвайте buttons_selector, когато искате уеб компонентът да се отваря от един или повече елементи в страницата:

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

<script>
  window.RSConfig = {
    type: 'location_services',
    slug: 'your-location-slug',
    buttons_selector: '.open-booking-widget',
  };
</script>

Всички елементи, които отговарят на селектора, ще отварят една и съща цел.

Различни цели с `data-*` атрибути

Ако искате различни бутони или линкове да отварят различни цели, можете да запазите един общ buttons_selector и да подадете заместващи стойности през data-* атрибути на самия елемент.

Потвърдените data-* параметри в текущия JavaScript вариант са:

data-slug
data-type
data-language
data-utm

Пример:

<button class="open-booking-widget" data-slug="location-2">
  Резервирай в обект 2
</button>

<button class="open-booking-widget" data-language="en">Book in English</button>

<button class="open-booking-widget" data-type="business_profile">
  Виж бизнес профила
</button>

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

<script>
  window.RSConfig = {
    type: 'location_services',
    slug: 'default-location',
    buttons_selector: '.open-booking-widget',
  };
</script>

При клик уеб компонентът взема основната конфигурация и я заменя само за избрания елемент.

Как се подават параметрите през `data-*`

data-slug сменя целевия slug.
data-type сменя типа на целта, например location_services или business_profile.
data-language подава език за конкретния бутон.
data-utm подава JSON обект със стойности за:
- source
- medium
- campaign
- content
- term

Пример само за UTM:

<button
  class="open-booking-widget"
  data-utm='{"source":"facebook","medium":"paid","campaign":"summer"}'
>
  Резервирай от кампанията
</button>

Важно:

стойността на data-utm трябва да е валиден JSON низ;
за data-type и data-language се приемат само стойности, които уеб компонентът разпознава;
в текущия потвърден код заместващите стойности на ниво елемент са за slug, type, language и utm, не за произволни вложени параметри от стари интеграции.

От плаващ бутон

Ако искате уеб компонентът да се отваря от плаващ бутон, подайте sticky_button:

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  sticky_button: {
    text: 'Запази час',
    text_color: '#ffffff',
    background_color: '#343232',
    position: 'right-middle',
  },
};

Потвърдените полета за плаващия бутон в текущите интеграции са:

text
text_color
background_color
tooltip_text
tooltip_show_delay
tooltip_expire_time
position

Потвърдените позиции са:

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
max_height

Пример:

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  modal: {
    max_width: '1320px',
    max_height: '95%',
  },
};

Тези настройки важат само когато уеб компонентът се отваря в прозорец. Те не се използват при вграден iframe.

UTM параметри

Можете да подадете UTM параметри в основната конфигурация:

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  utm: {
    source: 'facebook',
    medium: 'paid',
    campaign: 'summer',
  },
};

Поддържаните ключове са:

source
medium
campaign
content
term

Ако не подадете UTM стойности, уеб компонентът може да използва:

UTM параметрите от текущия URL;
предварително запазени UTM стойности;
резервна стойност reservation.studio / js-widget, когато липсва друга стойност.

Свързване с банера за бисквитки на сайта

Ако сайтът ви има свой банер за бисквитки, можете да предадете решението на посетителя към уеб компонента. Тогава в прозореца за записване не се показва второ съобщение за бисквитки, а вашите Facebook Pixel, Conversions API и Google Analytics следват решението от банера на сайта ви.

Сложете този ред в кода, който банерът ви пуска при решение на посетителя, със стойностите от неговия избор:

window.RSWidgetConsent = { marketing: true, analytics: true };

marketing — маркетинговите бисквитки: вашият Facebook Pixel и Conversions API.
analytics — аналитичните бисквитки: вашият Google Analytics.

И двете са незадължителни: категория, която не подадете, се смята за отказана — без analytics Google Analytics в уеб компонента не тръгва. Докато посетителят още не е отговорил на банера ви, можете да сложите window.RSWidgetConsent = {};: нашето съобщение не се показва, а нищо не тръгва до решението му.

Когато посетителят откаже или оттегли съгласието си, пуснете реда със false:

window.RSWidgetConsent = { marketing: false, analytics: false };

Къде точно се слага кодът зависи от банера: потърсете в настройките му място за собствен код при решение на посетителя. Ако банерът ви може само да блокира скриптове до съгласие — както блокира Facebook Pixel-а на сайта ви — сложете без блокиране ред, който отказва и двете, а под него по един блокиран ред за всяка категория, отбелязан по начина на банера ви:

// без блокиране
window.RSWidgetConsent = { marketing: false, analytics: false };
// блокиран до съгласие за маркетинг
window.RSWidgetConsent = { ...window.RSWidgetConsent, marketing: true };
// блокиран до съгласие за анализ
window.RSWidgetConsent = { ...window.RSWidgetConsent, analytics: true };

Какво се случва след това:

Щом редът се изпълни, в прозореца за записване не се показва нашето съобщение за бисквитки. Докато не се е изпълнил, посетителят вижда нашето съобщение.
При marketing: true вашият Pixel получава събитията от уеб компонента, а ако сте включили Conversions API — резервациите се изпращат и от сървъра. При analytics: true събитията стигат и до вашия Google Analytics. При false съответните не се изпращат.
Ако посетителят оттегли съгласието си, докато прозорецът за записване е отворен, Pixel-ът и Google Analytics спират веднага.
Редът работи преди или след кода на уеб компонента и колкото пъти посетителят промени решението си. Важи и когато уеб компонентът е добавен с WordPress плъгина.
Решението от сайта ви не засяга инструментите на Reservation.Studio — за тях е връзката "Настройки на бисквитките" под прозореца за записване. Pixel-ът в прозореца обаче е един: ако там маркетингът бъде изключен, спира и вашият Pixel.
Ако посетителят стигне в прозореца до страница на друг бизнес, решението от сайта ви важи и за неговите Pixel, Conversions API и Google Analytics.

Ако нашето съобщение продължава да се показва, проверете, че стойността е обект, в който marketing и analytics са точно true или false, и че е зададена с window.RSWidgetConsent = …. Не я обявявайте с var: тогава важи само първата стойност, а по-късните промени, включително оттеглянето, не стигат до прозореца. Задавайте целия обект при всяка промяна — промяна само на едно негово поле няма ефект. При грешна стойност или непознато поле браузърът показва предупреждение в конзолата.

Бележка

Банерът и политиката за поверителност на сайта ви трябва да казват, че при записване през уеб компонента данни за посетителя стигат до Meta и до Google. Вие отговаряте за тези данни пред посетителите си.

Когато страницата за записване е във ваш iframe

Ако сте вградили страницата за записване в iframe на сайта си, редът важи и за нея, стига на страницата да е скриптът на уеб компонента. Скриптът подава на iframe-а и клика от реклама във Facebook, Instagram или Google, ако посетителят е дошъл от такава. Самия iframe скриптът не променя: адресът и настройките му остават такива, каквито сте ги сложили. WordPress плъгинът зарежда скрипта сам. При iframe, сложен ръчно, адресът му трябва да е на https://reservation.studio — скриптът отговаря само на страници от този адрес — и на същата страница добавете само скрипта, без настройки:

<script src="https://js-widget.reservation.studio/v2/widget.min.js" async></script>

Най-честите готови конфигурации

Бутон към каталог с услуги

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

<script>
  window.RSConfig = {
    type: 'location_services',
    slug: 'your-location-slug',
    buttons_selector: '.open-booking-widget',
  };
</script>

Плаващ бутон

window.RSConfig = {
  type: 'location_services',
  slug: 'your-location-slug',
  sticky_button: {
    text: 'Запази час',
    text_color: '#ffffff',
    background_color: '#343232',
    position: 'right-middle',
  },
};

Различни бутони към различни цели

<button class="open-booking-widget" data-slug="location-1">Обект 1</button>

<button class="open-booking-widget" data-slug="location-2">Обект 2</button>

<button class="open-booking-widget" data-type="business_profile">
  Бизнес профил
</button>

<script>
  window.RSConfig = {
    type: 'location_services',
    slug: 'default-location',
    buttons_selector: '.open-booking-widget',
  };
</script>

Бутон с отделни UTM параметри

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

Кога този вариант е подходящ

когато имате собствен сайт;
когато искате да управлявате интеграцията директно от кода на страницата;
когато искате уеб компонентът да се отваря в прозорец от собствен бутон, линк или плаващ бутон;
когато не искате да зависите от генератора на shortcodes в WordPress.

Важно

Самото type + slug описва целта на уеб компонента, но трябва и да решите как потребителят ще го отвори.
buttons_selector, sticky_button и modal са настройки за отваряне на уеб компонента в прозорец.
data-* заместващите стойности са част от JavaScript логиката за отваряне. WordPress shortcode бутоните и линковете използват същия принцип под капака, но самите shortcode-и са описани отделно в Интеграция с WordPress.
В текущата документация вграденият iframe е описан през WordPress shortcode варианта, не като отделен JavaScript API вариант.

Какво ви е нужно​

Базово инициализиране​

Какво правят задължителните полета​

type​

slug​

language​

Как потребителят отваря уеб компонента​

От бутон или линк в страницата​

Различни цели с data-* атрибути​

Как се подават параметрите през data-*​

От плаващ бутон​

Как се настройва прозорецът на уеб компонента​

modal​

UTM параметри​

Свързване с банера за бисквитки на сайта​

Когато страницата за записване е във ваш iframe​

Най-честите готови конфигурации​

Бутон към каталог с услуги​

Плаващ бутон​

Различни бутони към различни цели​

Бутон с отделни UTM параметри​

Кога този вариант е подходящ​

Важно​

Свързани теми​

Какво ви е нужно

Базово инициализиране

Какво правят задължителните полета

`type`

`slug`

`language`

Как потребителят отваря уеб компонента

От бутон или линк в страницата

Различни цели с `data-*` атрибути

Как се подават параметрите през `data-*`

От плаващ бутон

Как се настройва прозорецът на уеб компонента

`modal`

UTM параметри

Свързване с банера за бисквитки на сайта

Когато страницата за записване е във ваш iframe

Най-честите готови конфигурации

Бутон към каталог с услуги

Плаващ бутон

Различни бутони към различни цели

Бутон с отделни UTM параметри

Кога този вариант е подходящ

Важно

Свързани теми