Вбудовування віджета бронювання на ваш сайт

Віджет Slotsy дозволяє додати форму бронювання безпосередньо на ваш сайт. Відвідувачі зможуть записатися на послугу, не покидаючи вашу сторінку. Віджет підтримує три режими відображення.

Режими відображення

Швидкий старт — Data-атрибути

Найпростіший спосіб додати віджет — один тег <script>:

<script src="https://your-domain.com/widget/widget.js"
        data-company="your-company-slug"
        data-mode="floating"
        data-color="#6366f1"
        data-locale="uk">
</script>

Додатковий JavaScript не потрібен — віджет ініціалізується автоматично.

Inline режим

Вбудуйте форму бронювання в контейнер на сторінці:

<div id="slotsy-booking"></div>
<script src="https://your-domain.com/widget/widget.js"></script>
<script>
  Slotsy.init({
    company: 'your-company-slug',
    mode: 'inline',
    container: '#slotsy-booking',
    locale: 'uk',
  });
</script>

Popup режим

Показує віджет у модальному вікні при натисканні кнопки:

<button id="book-btn">Записатися</button>
<script src="https://your-domain.com/widget/widget.js"></script>
<script>
  Slotsy.init({
    company: 'your-company-slug',
    mode: 'popup',
    triggerSelector: '#book-btn',
  });
</script>

Натисніть Escape або клікніть за межами вікна, щоб закрити.

Floating режим

Кругла кнопка з'являється в куті сторінки. Натискання відкриває панель:

<script src="https://your-domain.com/widget/widget.js"></script>
<script>
  Slotsy.init({
    company: 'your-company-slug',
    mode: 'floating',
    position: 'bottom-right',
    buttonColor: '#6366f1',
  });
</script>

Параметри конфігурації

Відстеження подій

Слухайте події віджета для трекінгу конверсій:

Slotsy.on('booking:created', function(data) {
  console.log('Бронювання створено:', data.bookingId);
});

Порада: Використовуйте Slotsy.on('booking:created', ...) для відправки конверсій у Google Analytics або Facebook Pixel.

Що далі?

• Процес бронювання — Як працює бронювання