Як створити віджет

Огляд

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

Підтримувані браузери

Safari 16.4+, Chrome 111+, Firefox 128+.

Створення нового віджета

1. У панелі керування перейдіть до розділу Віджети
2. Натисніть Новий віджет
3. Введіть назву віджета, виберіть товари, які він має продавати, і натисніть Створити віджет

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

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

Що ви продаєте

Виберіть товари, пакети й подарункові картки, які пропонує віджет, додайте додаткові товари (усі або вибрані вручну), а також визначте, чи можуть клієнти купувати товари як подарункові ваучери або використовувати подарункові ваучери у віджеті.

Процес бронювання

Виберіть, як клієнти переміщуються віджетом: Спочатку квитки (вибір квитків, потім дати й часу), Спочатку подія (перегляд календаря, потім вибір того, що забронювати) або Лише використання ваучера. Ви також можете встановити стандартний вигляд календаря та попросити клієнтів двічі ввести адресу електронної пошти, щоб уникнути помилок.

Правила продажу

Керуйте тим, коли і що продає віджет: датою й часом початку продажу, датою, на якій відкривається календар, моментом відображення залишкової місткості часового інтервалу та валютами, у яких клієнти можуть здійснювати оплату. Якщо в першому тижні або місяці, який показує календар, немає нічого доступного для бронювання, календар переглядає наступні періоди й відкривається на першій даті, де щось доступне.

Вигляд

Додайте власний CSS, щоб точно налаштувати вигляд віджета відповідно до вашого бренду.

Аналітика

Підключіть Google Analytics або Google Tag Manager, щоб відстежувати, як відвідувачі користуються вашим віджетом.

Розширені налаштування

Перенаправляйте клієнтів на вибрану вами сторінку після покупки та встановіть параметр URL, який використовують реселери, щоб їхні бронювання можна було пов’язати з ними.

Попередній перегляд, публікація та розгортання

Зміни, які ви вносите, застосовуються до попереднього перегляду в реальному часі — натисніть Оновити попередній перегляд, щоб побачити їх праворуч, не змінюючи опублікований віджет. Коли все буде готово, натисніть Опублікувати, щоб оприлюднити зміни, або Скасувати, щоб відхилити чернетку.

Щоб розмістити віджет на своєму вебсайті, відкрийте розділ Інструкції зі встановлення: скопіюйте тег script на свою сторінку, потім виберіть віджет Вбудований (відображається безпосередньо вмісті сторінки) або Модальне вікно/спливаюче вікно (відкривається поверх сторінки після натискання кнопки) та вставте відповідний фрагмент коду.

Як віджет прокручує сторінку

Коли клієнт переходить до наступного кроку, віджет прокручує сторінку до початку форми бронювання. Завдяки цьому клієнт, який прокрутив довгий список квитків, не опиняється посередині наступного кроку. Якщо ви розмістили віджет у власній панелі, яка прокручується, рухатиметься саме ця панель, а сторінка також прокручуватиметься лише тоді, коли панель буде прокручена за межі видимої області. Віджет прокручує вміст, коли верхня частина форми виходить за межі видимої області, а також коли форма виходить за нижній край екрана, але над нею залишається достатньо вільного місця. Якщо форма вже повністю вміщується на екрані, її положення не змінюється; віджет також залишає місце для закріпленого у верхній частині сторінки заголовка.

Якщо така поведінка не відповідає вашій структурі сторінки, забороніть прокручування сторінки, додавши "scrollOnStepChange": false до вставленого коду віджета:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOnStepChange":false}'></div>

Якщо ваш заголовок приховується, коли відвідувачі прокручують сторінку вниз, і знову з’являється під час прокручування вгору, віджет не може визначити його розмір, тому верхня частина форми може опинитися за ним. Замість вимкнення прокручування вкажіть висоту заголовка у пікселях:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOffset":80}'></div>

Клонування наявного віджета (класичні віджети)

Якщо ви користуєтеся класичним редактором віджетів, можна дублювати віджет замість того, щоб створювати його з нуля:

1. Перейдіть до розділу Віджети
2. Виберіть наявний віджет
3. Натисніть Клонувати
4. Виберіть цільовий канал і підтвердьте вибір

Налаштуйте клонований віджет, потім опублікуйте його та скопіюйте код на свій сайт.