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.
To do this, you can copy and modify the following HTML.
Paste the following code, replacing the capitalised sections with your own data:
<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/?srch=YOUR SEARCH TERM" 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/?srch=YOUR SEARCH TERM" data-type="inline" data-inline-minimal="true" data-inline-show-logo="false" data-inline-bg-fill="false"></script></div>
You will need to replace ‘YOUR BOX OFFICE NAME’ with the name of your box office.
You will need to replace ‘YOUR SEARCH TERM’ with a common term, or character, in the events you want to be shown in the widget.
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’ after ?srch= in the above HTML code.
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>
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 -->
If you need any help, please do reach out to our support at hi@tickettailor.com