Опции за конфигурация на компонент

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

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

• Кои параметри са задължителни и как да ги попълните.
• Как да използвате sticky_button, modal и buttons_selector.
• Как да прилагате допълнителни параметри и UTM маркери според кампанията.

Задължителни параметри

type (string)

Типът на компонента. По подразбиране е location_profile. Поддържаните стойности са:

• location_profile: Зарежда профил на обект.
• location_services: Показва списък с услугите, които се предлагат на даден обект.
• location_service_category: Показва категориите услуги в даден обект.
• location_classes: Използва се за показване на графици или класове на даден обект.
• business_profile: Зарежда всички обекти за даден бизнес профил.

Пример:

RSConfig = {
  type: 'location_services',
};

---

slug (string)

Уникален идентификатор за данни или услуга. Използва се за настройка на данните, които компонентът ще зареди.

Пример:

RSConfig = {
  slug: 'my-unique-location',
};

---

Незадължителни параметри

language (string)

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

• 'bg' (български)
• 'en' (английски)
• 'de' (немски)
• 'es' (испански)
• 'it' (италиански)
• 'fr' (френски)
• 'tr' (турски)
• 'ro' (румънски)
• 'el' (гръцки)
• 'mk' (македонски)
• 'ru' (руски)

Пример:

RSConfig = {
  language: 'en',
};

---

sticky_button (Object)

Настройки на плаващ бутон, който се показва на страницата.

Свойства:

• text (string): Текстът, който ще се показва на бутона.
• text_color (string): Цвят на текста. Напр.: #FFFFFF или red.
• background_color (string): Цвят на фона. Напр.: #000000 или blue.
• tooltip_text (string): Текст за подсказка при задържане върху бутона.
• tooltip_expire_time (number): Време за изтичане на подсказката в секунди.
• tooltip_show_delay (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

Пример:

RSConfig = {
  sticky_button: {
    text: 'Click me!',
    text_color: '#FFFFFF',
    background_color: '#0000FF',
    tooltip_text: 'Имате въпроси?',
    tooltip_expire_time: 3600,
    tooltip_show_delay: 2,
    position: 'bottom-right',
  },
};

---

modal (Object)

Настройки за модален изглед (изскачащ прозорец).

Свойства:

• max_width (string): Максимална широчина на модала. Например: 500px или 90%. По подразбиране: '1320px'.
• max_height (string): Максимална височина на модала. Например: 500px или 90%. По подразбиране: '95%'.

Пример:

RSConfig = {
  modal: {
    max_width: '800px',
    max_height: '600px',
  },
};

---

buttons_selector (string)

Позволява персонализиране на HTML елементи, които отварят компонента при кликване. Трябва да зададете CSS селектор за бутоните, например .my-custom-button.

Пример:

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

<!-- Конфигурационен код -->
<script>
  RSConfig = {
    buttons_selector: '.open-booking-widget',
  };
</script>

---

parameters (Object)

Допълнителни параметри, които да се подадат към widget.

Свойства:

• category (string): ID на категория, която да се покаже.
• services (string): Списък с ID на услуги, разделени със запетая, които да се показват като избрани.

Пример:

RSConfig = {
  parameters: {
    category: '123',
    services: '123,124',
  },
};

---

utm (Object)

Настройки за UTM параметри, използвани в маркетинга.

Свойства:

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

Пример:

RSConfig = {
  utm: {
    source: 'google',
    medium: 'cpc',
    campaign: 'autumn_sale',
    content: 'banner_ad',
    term: 'booking',
  },
};

---

Допълнителни примери

Множество бутони със специфични конфигурации

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

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

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

<!-- Бутон с UTM параметри -->
<button
  class="open-booking-widget"
  data-utm='{"source":"email","medium":"newsletter"}'
>
  Специална промоция!
</button>

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

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

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

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

Когато тези бутони бъдат кликнати, техните data- атрибути ще презапишат основната конфигурация.

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

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

---

Обобщение

С помощта на тези конфигурационни опции можете да настроите компонента за различни нужди – от промяна на дизайна на модала до персонализация на бутоните чрез CSS селектори и дата атрибути. Това предоставя голяма гъвкавост както за разработчиците, така и за маркетинговите екипи.