Опции

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

• type: string. по подразбиране: location_profile
  • location_profile
  • location_services
  • location_service_category
  • location_classes
  • business_profile
• slug: string

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

• language: string = 'bg'|'en'. по подразбиране: език на браузъра

• sticky_button: Object

  • text: string
  • text_color: string
  • background_color: string
  • tooltip_text: string
  • tooltip_time: number
  • position: string
    • 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: Object

  • max_width: string (напр.: 500px | 90%). по подразбиране: '1320px'
  • max_height: string (напр.: 500px | 90%). по подразбиране: '95%'

• buttons_selector: string

• utm: Object

  • source: string. Източникът на трафика.
  • medium: string. Средството, през което е пристигнал трафикът.
  • campaign: string. Специфичната кампания, довела до трафика.
  • content: string. Специфичното съдържание, допринесло за трафика.
  • term: string. Специфичният термин, асоцииран с трафика.

Избор на бутон

Свойството buttons_selector е незадължително и позволява да персонализирате кои HTML елементи ще отварят уеб компонента при кликване. Във вашия проект можете да присвоите уникален CSS клас на всеки HTML елемент, който трябва да отваря уеб компонента при кликване. Ето пример как да го използвате във вашия проект.

<!--бутон-->
<button class="open-booking-widget">Резервирай сега</button>
<!--ИЛИ анкор-->
<a class="open-booking-widget">Резервирай сега</a>

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

RSConfig = {
  // останалата конфигурация
  buttons_selector: '.open-booking-widget',
};

Стойността на buttons_selector е стринг, съдържащ CSS селектор. В примера е класово име, но може да се използват id на елемент (#button-id), име на таг (button) или дори сложни селектори. Този стринг се използва, за да се направи заявка за всички такива елементи в документа, и към всеки от тези елементи се добавя слушател на събитие 'click'. Когато някой от тези елементи бъде кликнат, уеб компонента ще се отвори. Накратко, с използването на buttons_selector, можете да направите който и да е елемент(и) на страницата да отварят уеб компонента при кликване. Моля, имайте предвид: Слушателите на събитие 'click' се добавят, когато уеб компонента се инициира. Затова уверете се, че елементите, представени от buttons_selector, съществуват в HTML структурата, когато уеб компонента се инициира. Ако елементите се добавят динамично по-късно, уеб компонента може да не работи според очакванията.

Използване на дата атрибути с Избор на бутон

Освен, че отваря уеб компонента, buttons_selector в комбинация с HTML data-_ атрибути може също така да персонализира конфигурацията на уеб компонента за специфични бутони. Когато бутонът отвори уеб компонента, всички data-_ атрибути на бутона ще презапишат съответстващите първоначални конфигурации на уеб компонента. Например, ако имате следната конфигурация:

RSConfig = {
  type: 'location_services',
  slug: 'location1',
  buttons_selector: '.open-booking-widget',
};

И имате бутон с дата атрибут като този:

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

Когато този конкретен бутон бъде кликнат, уеб компонента ще се отвори с актуализирания slug от неговия data-slug атрибут. Това е изключително полезно, когато желаете да имате множество бутони на една и съща страница, всеки потенциално с различна конфигурация на уеб компонента при отваряне. Ето още няколко примера как можете да използвате дата атрибути:

<!-- Бутон за отваряне на widget за location2 -->
<button class="open-booking-widget" data-slug="location2">
  Резервирай сега за location 2
</button>

<!-- Бутон за отваряне на widget на немски език -->
<button class="open-booking-widget" data-language="de">Buche Jetzt</button>

<!-- Бутон за отваряне на widget със специфични UTM параметри -->
<button class="open-booking-widget" data-utm='{"source":"test","medium":"cpc"}'>
  Резервирай с промоционален код!
</button>

Накратко, ако желаете бутон да презапише което и да е конфигурационно свойство за уеб компонента, просто добавете дата атрибут със същото име като конфигурационното свойство, което искате да презапишете. Уверете се, че стойността, която дадете на този атрибут, е валидна за това конфигурационно свойство! Моля, имайте предвид: Този метод поддържа само презаписване на свойствата slug, language и utm. Други свойства в конфигурация ви не могат да бъдат презаписвани чрез дата атрибути.