Как создать виджет

Обзор

Виджет бронирования 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. Выберите целевой канал и подтвердите выбор

Настройте клонированный виджет, затем опубликуйте его и скопируйте код на свой сайт.