Widgets

Widgets are the easiest way to link your TryBooking event to your website. They are a snippet of HTML you can paste into your own website code to display your events directly on your website.

Widgets can boost your event’s visibility, as well as encourage customers to make ticket purchases and bookings whenever they visit your website.  You can use widgets to display different kinds of information about your event.

This article covers:

1. Types of widgets
2. Customise widget styling
3. How to embed a widget on your website

Types of widgets

There are six types of widgets:

1. Event listing
2. Purchase button
3. Event life cycle
4. Landing page
5. Booking page
6. Embedded booking

Event listing

Events marked as Private will not display on the Event Listing Widget.

Purchase button

Inserts a button into your site that takes users to your TryBooking event page. You have the choice of the following texts for this button:

• Book
• Order
• Purchase
• Register
• Get Tickets.

Event life cycle

Displays a status of your event's availability, alongside dates and times. As your event opens, closes or sells out, this widget will automatically update.

Landing page

Inserts your event homepage, allowing the customer to click Book Now directly on your website.

Booking page

Bypasses the Homepage of the event, and embeds the first selection point of the event directly on to your website. Once the ticket buyer clicks Select/Next, it moves them to TryBooking to complete their transaction.

Embedded booking

Similar to the Booking Page Widget, this widget bypasses the Homepage of the event and embeds the first selection point of the event directly on to your website. The key difference is it keeps ticket buyer on your website whilst they complete their transaction.

Customise widget colours

Your widgets are styled by default with TryBooking colours. For a more seamless integration with your website, you will have the option of selecting your own colours for each widget.

To set custom colours to the widget directly:

1. From the left menu, click Dashboard
2. From the Manage events overview, click on your event name
3. From the left menu, click on Booking widgets under Event Promotion
4. Select the widget you wish to use; Purchase Button or Event Life Cycle
5. Change the colours of each element by either:
   • Clicking on the colour square and picking a colour
   • Entering the hex code of the colour into the text box

If you are using the Landing Page, Booking Page or Embedded Booking widget, you will need to set up a Template for the branding first. Please see below.

Creating a Branding Template

A Branding Template for widgets saves you time and ensures you have consistent branding across all widgets being used.

To create a widget branding template:

1. From the left menu, click Dashboard
2. From the left menu, click Marketing tools and then Widgets
3. Under the Template branding tab, click the button Create new
4. Give the template a name
5. Change the colours of each element by either:
   • Clicking on the colour square and picking a colour
   • Entering the hex code of the colour into the text box
     
6. Once you're happy with the previews, click Save template

Apply Branding template to a widget

Once you have completed the setup of your branding template you will be able to apply it to the widget you wish to use.

To apply a template to the widget:

1. Navigate to the widget you wish to use
   
   • For the Event Listing Widget; on the Dashboard, go to Marketing Tools on the side menu. Click Widgets and select Event Listing
   • For specific event widgets; on the Dashboard, click into your event name under the Manage Event Overview. Click Booking widgets under Event Promotion, and select the widget you wish to use
2. Using the Apply Template Branding drop-down, select the template you wish to use

How to embed a widget on your website

To add the widget to your website:

1. Navigate to the widget you wish to use
   
   • For the Event Listing Widget; on the Dashboard, go to Marketing Tools on the side menu. Click Widgets and select Event Listing
   • For specific event widgets; on the Dashboard, click into your event name under the Manage Event Overview. Click Booking widgets under Event Promotion, and select the widget you wish to use
2. Click Copy to Clipboard in the bottom right to copy out the HTML code
3. Navigate to the HTML/Source code of your website
4. Paste in the copied code where you wish for the widget to be displayed

If using a Wordpress site, you may need to add a Raw HTML plugin to give you access to the HTML/Source code of your site.