How to Create a Widget

Overview

The TicketingHub Booking widget is a JavaScript tool that integrates into websites, allowing customers to book products directly. You create it in the dashboard, configure it section by section, and paste a small code snippet on your site.

Supported browsers

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

On your dashboard, navigate to Widgets
Click New Widget
Give the widget a name, pick the products it should sell, and click Create Widget

You land on the widget’s settings page, where everything else is configured. The left side holds the settings, grouped into sections; the right side shows a live preview of the widget that refreshes as you make changes.

What you sell

Choose the products, packages and gift cards the widget offers, include extras (all of them, or a hand-picked selection), and decide whether customers can buy the products as gift vouchers or redeem gift vouchers in the widget.

Booking flow

Pick how customers move through the widget: Tickets first (choose tickets, then a date and time), Event first (browse a calendar, then choose what to book), or Voucher redemption only. You can also set the default calendar view and ask customers to type their e-mail twice to avoid typos.

Sales rules

Control when and what the widget sells: the date and time the sale starts, the date the calendar opens on, when to show the remaining capacity of a time slot, and the currencies customers can pay in. When the first week or month the calendar shows has nothing to book, the calendar looks ahead and opens on the first date that does.

Appearance

Add custom CSS to fine-tune the widget’s look so it matches your brand.

Analytics

Connect Google Analytics or Google Tag Manager to track how visitors use your widget.

Advanced

Send customers to a page of your choice after purchase, and set the URL parameter your resellers use so their bookings are attributed to them.

Preview, Publish and Deploy

Changes you make are drafted against a live preview — click Update Preview to see them on the right without affecting your live widget. When you are happy, click Publish to make them live, or Cancel to discard the draft.

To put the widget on your website, open Installation Instructions: copy the script tag into your page, then choose between the Embedded widget (appears directly in your page content) and the Modal/Popup widget (opens in an overlay from a button), and paste the matching snippet.

When a customer moves to the next step, the widget scrolls back to the top of the booking form, so a customer who scrolled down a long list of tickets doesn’t land halfway down the next step. If you have placed the widget inside a panel of your own that scrolls, that panel is what moves, and your page only moves as well when the panel itself has been scrolled out of view. It does this when the top of the form has scrolled out of view, and when the form runs off the bottom of the screen with room to spare above it. A form that already fits on screen is left where it is, and the widget leaves room for a header fixed to the top of your page.

If that doesn’t suit your layout, stop your page from moving by adding "scrollOnStepChange": false to the widget code you pasted:

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

If your header hides as visitors scroll down and reappears as they scroll up, the widget cannot measure it, and the top of the form can end up behind it. Rather than turning the scrolling off, give the widget your header’s height in pixels:

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

If you use the classic widget editor, you can duplicate a widget instead of building it again:

Navigate to Widgets
Select an existing widget
Click Clone
Choose the target channel and confirm selection

Customize the cloned widget, then publish and copy the code to your site.