Articles on: Install Widget

Creating a Widget

The TicketingHub Booking widget is a small JavaScript tool that you can integrate into your website. This widget enables your customers to book your products directly from your site. This guide will walk you through the process of creating and customizing a Booking widget to match your brand.

If you have an existing widget for your products, you can opt to simply clone a widget. This way, you'll have the same settings for the new widget. What you are left to do is to simply give it a different name and configure new widget details.
But if you are a new TicketingHub user, go on with the steps below to create a new widget from scratch.

How to create widgets
If you have existing widgets: How to clone a widget?
1. Initiate widget creation
2. Configure and customize your widget

Start by navigating to the Widgets section on your dashboard.
Click on Create New Widget.

Dashboard > Widgets > Create New Widget

Name Your Widget - Provide a unique name for the widget you are creating.
Select Your Products - Choose the products that you want to be bookable through the widget. You can select one or more products as per your needs.
Define Extras - If applicable, define any extras or add-ons that customers can select along with their ticket purchase.
Create Packages - Utilize this option to create packages or bundled offerings combining multiple products or extras.
Manage Merchandises - Here, you can manage and configure any merchandises associated with the widget.
Variable Price Gift Card Products - If variable price gift cards are enabled, define the products associated with those gift cards.

As you make changes in your widget the Widget Preview also updates - see how your widget looks on site. When done, simply copy the 'widget code' into your website.

Customize Look and Feel - Alter the appearance and branding of the widget, including color schemes, fonts, and logos.
Configure Settings - Adjust various settings related to the widget, such as minimum and maximum ticket quantities, time slots, availability rules, and more.
Advanced Customization - Explore advanced settings for the widget, including options for custom CSS and JavaScript.
Adjust Admin Settings - These settings determine the visibility and access permissions for the widget in the admin interface.
Select Your Booking Flow - Decide on your preferred booking flow. You have the option to choose between 'Tickets', 'Calendar' or 'List' view.
Customize Brand Colors - Give your widget a cohesive look by selecting colors that align with your brand identity.
Choose Widget Display Mode - Select whether you want the widget to appear as a Button or Embedded within your webpage.
Select Supported Currencies and Languages - Specify the languages and currencies that you want to support. This should align with your target audience's preferences.
Publishing and Testing Your Widget - Once you have configured the widget according to your preferences, click on Publish Changes to make the widget available for use. Specify the channel or platform where the widget will be published using the Channel option.

Use the Test button to view how your widget appears and functions before finalizing.

Cloning a widget in TicketingHub allows you to create a new widget based on the settings and configurations of an existing one. This can save you time and effort, especially when you need multiple widgets with similar settings. Here's a step-by-step guide on how to clone a widget:

1. Navigate to the Widgets Section

Start by clicking on Widgets on your dashboard. This will present you with a list of all the widgets you've previously created.

Find the widget you want to clone and click on Clone.

3. Confirm the Channel

Ensure that the cloned widget is in the correct channel.

4. Select a Product

Choose the product you'd like to associate with the cloned widget. For example, if you're cloning a voucher widget, you would select Vouchers.

5. Publish Changes

After confirming the product selection, click on Publish Changes to save your new widget.

With the new widget created, you can now copy its code. This code will be used to embed the widget on your website.

To verify which widget is being used on the website for a particular product, go to Sales and select an order. In the order details, you will find a link to the widget being used for checkout.

You can test the widget by clicking on the link and confirming that it functions as expected. If everything is as it should be, you can then proceed to copy the widget's code and embed it on your website.

By following these steps, you can efficiently clone and implement widgets in TicketingHub. This can be particularly helpful when you need to create multiple widgets with similar configurations.

Updated on: 03/07/2023

Was this article helpful?

Thank you!

Creating a Widget

How to Create and Customize a Booking Widget with TicketingHub