Перейти до вмісту
Документація TicketCRM

Конфігуратор віджета

Використайте цей інтерактивний інструмент, щоб:

  • вибрати тип віджета (tbx-widget, tbx-modal, tbx-button);
  • заповнити обов’язкові та опціональні параметри;
  • перевірити реальний попередній перегляд;
  • скопіювати готовий код вбудовування для обраного типу.

Налаштування віджета

* обовʼязкові поля

Унікальний ідентифікатор події. Можна вказати кілька через кому.

Формат вбудовування: спливаюче вікно, повний екран, кнопка переходу або інлайн-iframe.

Напис на кнопці, що відкриває віджет. Це не атрибут, а текст вкладеної кнопки — він потрапляє в код вбудовування.

Мова інтерфейсу віджета.

Валюта відображення цін. За замовчуванням — валюта події.

Візуальна тема оформлення віджета.

Розміри віджета — CSS-значення, напр. 800px, 100% або 100vh.

Ідентифікатор продавця для атрибуції продажів.

Ідентифікатор абонемента / сезону замість окремої події.

Куди перенаправити покупця після оформлення замовлення з оплатою за рахунком (інвойс).

Куди перенаправити після успішної оплати або безкоштовної покупки.

Адреса, на яку веде кнопка «назад» / логотип у віджеті.

URL логотипа, що показується в шапці віджета.

Базовий URL віджета. Зазвичай не змінюють — потрібен для стейджингу чи власного домену.

Відкривати модалку автоматично, якщо в URL сторінки є відповідний хеш.

Завантажувати iframe заздалегідь, ще до відкриття модалки.

Надсилати події віджета в батьківське вікно через postMessage — для зовнішньої аналітики.

Попередній перегляд

Вкажіть валідний хеш події для рендеру preview.

Код для вбудовування

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

<!-- Додайте валідний хеш події, щоб згенерувати код -->

Пряме посилання

Готовий URL сторінки віджета з параметрами — те саме, куди веде «Кнопка переходу». Скопіюйте та вставте як звичайне посилання (кнопка, лист, соцмережі).

<!-- Додайте валідний хеш події, щоб згенерувати код -->

Як це працює?

Заголовок розділу «Як це працює?»

TicketCRM завантажується як вебкомпоненти через модульний скрипт (https://wc.ticketcrm.com/lib/tbx-widget.min.js). Після додавання тега компонента з event-hash віджет рендериться у вибраному режимі. Бандл реєструє три теги, що використовуються тут:

  • tbx-widget — вбудований iframe прямо на сторінці;
  • tbx-modal — спливаюче вікно за кліком по кнопці; додайте full-screen="true" для повноекранного режиму;
  • tbx-button — кнопка, що відкриває сторінку віджета в тій самій вкладці.

Кожен атрибут мапиться на query-параметр, який передається в iframe віджета. Віджет також автоматично прокидує UTM-мітки, рекламні click-id (gclid, fbclid, ttclid, …) та GA4-ідентифікатори зі сторінки-хоста — без додаткового налаштування.

Обов’язкові параметри

Заголовок розділу «Обов’язкові параметри»
  • event-hash — ідентифікатор події (через кому для кількох подій).
  • Тип віджета — компонент / UX-сценарій.
  • Текст кнопки — підпис кнопки-тригера (для modal, fullscreen, button).

Локалізація та розміри

Заголовок розділу «Локалізація та розміри»
  • lang — uk, en, de, lv, sk, el, ru.
  • currency — код валюти (напр. UAH, EUR, USD).
  • theme — ticketsbox, silpo або etko.
  • width / height — розміри для inline та modal.
  • open-by-hash / preload — перемикачі поведінки модалки.

Опціональні параметри

Заголовок розділу «Опціональні параметри»
  • Продавець і подія: seller-hash (атрибуція продажів), abonement-hash (абонемент / сезон замість окремої події).
  • Редіректи та брендинг: thanks-invoice-url (повернення після оформлення замовлення з оплатою за рахунком), thank-success (після успішної або безкоштовної покупки), home-url та home-logo-url (адреса й логотип для кнопки «назад»).
  • Розширене: widget-url (перевизначити базовий URL iframe), analytics-mode (передавати аналітичні події віджета в батьківське вікно через postMessage).

Пряме посилання

Заголовок розділу «Пряме посилання»

Окрім коду вбудовування, конфігуратор формує пряме посилання — готовий URL сторінки віджета з тими самими параметрами (те саме, куди веде tbx-button). Його можна вставити будь-куди як звичайне посилання: у кнопку на сайті, лист або пост у соцмережах.