How can I customise the events shown in my widget?

Customise the widget code to choose which events that appear in your widget.

Rhio avatar
Written by Rhio
Updated over a week ago

You can use the Ticket Tailor widget to sell events directly from your website.

By default, the options for displaying events on the Ticket Tailor widget are::

1) All of your upcoming events

2) Your next event

3) One specific event

However, you may want to change which events display with custom code.

The custom code in this article allows you to:


Display a selection of events in your widget

You might want to display only a selection of events in your widget, to better fit with your website design and promotion.

  1. To do this, click the button marked 'Edit widget options'.

  2. Add a common name for your products into the box labelled 'Keyword filter'.

For example, imagine you have 3 events:

1) Beach party

2) Beach clean up

3) Cleaning party.

If you only want to show the ‘Beach clean up’ and ‘Beach party’ in your widget, you would write ‘beach’ as your keyword.

A screenshot showing a booking widget with the word 'Beach' as a keyword. The word 'Beach' is underlined in orange for emphasis.

This will create a customised widget.

Display events or occurrences on one date

If you are running a recurring event, or a lot of events on one day, you might want your widget to show a group of events or timeslots on a specific date.

To do this, copy the following code and replace YYYY-MM-DD with the date you want to show.

You will also need to replace ‘YOUR BOX OFFICE NAME’ with the name of your box office.

<div class="tt-widget"><div class="tt-widget-fallback"><p><a href="https://www.tickettailor.com/all-tickets/YOUR BOX OFFICE NAME/ref/website_widget/?date=YYYY-MM-DD" target="_blank">Click here to buy tickets</a><br /><small><a href="https://www.tickettailor.com?rf=wdg" class="tt-widget-powered">Sell tickets online with Ticket Tailor</a></small></p></div><script src="https://www.tickettailor.com/js/widgets/min/widget.js" data-url="https://www.tickettailor.com/all-tickets/YOUR BOX OFFICE NAME/ref/website_widget/?date=YYYY-MM-DD" data-type="inline" data-inline-minimal="true" data-inline-show-logo="false" data-inline-bg-fill="false"></script></div>

A widget filtered to show events happening on the 18th Dec

Alphabetise your event list

If you want your events to show in alphabetical order, copy the below code and replace ‘YOUR BOX OFFICE NAME’ with the name of your box office.

<div class="tt-widget"><div class="tt-widget-fallback"><p><a href="https://www.tickettailor.com/all-tickets/YOURBOXOFFICENAME/?ref=website_widget" target="_blank">Click here to buy tickets</a><br /><small><a href="https://www.tickettailor.com?rf=wdg_87372" class="tt-widget-powered">Sell tickets online with Ticket Tailor</a></small></p></div><script src="https://cdn.tickettailor.com/js/widgets/min/widget.js" data-url="https://www.tickettailor.com/all-tickets/YOURBOXOFFICENAME/?sort=az" data-type="inline" data-inline-minimal="true" data-inline-show-logo="false" data-inline-bg-fill="false" data-inline-inherit-ref-from-url-param="" data-inline-ref="website_widget"></script></div>
<!-- End of Ticket Tailor Widget -->

A screenshot of a widget with alphabetised listings

If you need any help, please do reach out to our support at hi@tickettailor.com

Did this answer your question?