Преминете към основното съдържание

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

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

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

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

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

Добавете следния код в страницата, в която искате да инициализирате widget-а:

<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>

Този код зарежда widget runtime-а и подава основната конфигурация. След това трябва да решите как потребителят ще го отвори.

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

type​

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

  • location_profile
  • location_services
  • location_service_category
  • location_classes
  • business_profile

slug​

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

language​

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

  • bg
  • en
  • de

Пример:

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

Как потребителят отваря widget-а​

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

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

<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 и да подадете override-и през data-* атрибути на самия елемент.

Потвърдените override-и в текущия JavaScript widget са:

  • 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>

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

Как се подават параметрите през 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 се приемат само стойности, които widget-ът разпознава;
  • в текущия потвърден код per-element override-ите са за slug, type, language и utm, не за произволни вложени параметри от стари интеграции.

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

Ако искате widget-ът да се отваря от плаващ бутон, подайте 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 widget-ът​

Можете да ограничите максималния размер на модалния прозорец с:

  • max_width
  • max_height

Пример:

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

Тези настройки важат само за modal widget. Те не се използват при iframe embed.

UTM параметри​

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

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

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

  • source
  • medium
  • campaign
  • content
  • term

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

  • UTM параметрите от текущия URL;
  • предварително запазени UTM стойности;
  • fallback 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>

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

  • когато имате custom сайт;
  • когато искате да управлявате интеграцията директно от кода на страницата;
  • когато искате modal widget, отварян от собствен бутон, линк или плаващ бутон;
  • когато не искате да зависите от WordPress shortcode generator.

Важно​

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

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

💡Все още нямаш бизнес профил?

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