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

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

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

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' (английски)

Пример:

RSConfig = {
  language: 'en',
};

---

sticky_button (Object)

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

Свойства:

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

Пример:

RSConfig = {
  sticky_button: {
    text: 'Click me!',
    text_color: '#FFFFFF',
    background_color: '#0000FF',
    tooltip_text: 'Имате въпроси?',
    tooltip_time: 3000,
    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>

---

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>

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

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

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

---

Обобщение

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