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 all events, your next event, or one specific event. However, you can use custom code to change which events display.
The custom code in this article allows you to:
How 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.
To do this, click the button marked 'Edit widget options'.
Add a common name for your products into the box labelled 'Keyword filter'.
For example, imagine you have 3 events:
Beach party.
Beach clean up.
Cleaning party.
If you only want to show the ‘Beach clean up’ and ‘Beach party’ in your widget, you'd write ‘beach’ as your keyword.
This will create a customised widget.
How to display events or occurrences on one date in your widget
If you're running a recurring event, or multiple 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-DDwith the date you want to show.You'll 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>
How to display hidden ticket types in your widget
If you sometimes want to display all available ticket types (e.g. in a members area of your site), including ones usually hidden behind a password, you can adjust your widget HTML code to have the password entered by default.
In the widget HTML code where you see a 'data-url' attribute, add '?a=YOURACCESSCODE' to the end of the URL.
Using one of our test event examples, this would look like: 'data-url="https://www.tickettailor.com/checkout/new-session/id/4329508/chk/f889/?show_search_filter=true&show_date_filter=true&show_sort=true&a=abc123"', where 'abc123' is the access code you've created to reveal hidden ticket types for this event.
You can see an example of the full widget code with this adjustment below.
<!-- Ticket Tailor Widget. Paste this into your website where you want the widget to appear. Do not change the code or the widget may not work properly. --> <div class="tt-widget"><div class="tt-widget-fallback"><p><a href="https://www.tickettailor.com/checkout/new-session/id/4329508/chk/f889/?show_search_filter=true&show_date_filter=true&show_sort=true" target="_blank">Click here to buy tickets</a><br /><small><a href="https://www.tickettailor.com?rf=wdg_73548" 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/checkout/new-session/id/4329508/chk/f889/?show_search_filter=true&show_date_filter=true&show_sort=true&a=abc123" data-type="inline" data-inline-minimal="false" data-inline-show-logo="false" data-inline-bg-fill="true" data-inline-inherit-ref-from-url-param="" data-inline-ref=""></script></div><!-- End of Ticket Tailor Widget -->
How to alphabetise your event list in your widget
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 -->