Интеграция чрез 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, когато липсва друга стойност.

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

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

<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 вариант.

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

• Интеграция с WordPress
• Настройка на собствен домейн