Skip to main content

How can I customise the events shown in my widget?

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

Written by Rhio

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, head to 'Promote' then 'Website embed code'.

  • Click the button marked 'Edit widget settings'.

  • 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.

  • Click 'Update widget'. This will create a customised widget that correctly filters your events by the keyword you've chosen.

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.

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

  • To do this, copy the following code and replace YYYY-MM-DD with 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.

<!-- 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 -->

How to override the language of your widget

You can control the language of your embedded Ticket Tailor widget by adding a lang parameter. There are two ways to use it:

Option 1: Add lang to the widget URL directly

<div class="tt-widget">
<script src="https://www.tickettailor.com/js/widgets/min/widget.js"    
data-url="https://www.tickettailor.com/all-tickets/acme-events/?lang=LANGUAGE_CODE"    
data-type="inline"></script>  
</div>

  • Replace 'LANGUAGE_CODE' with the two-letter code for your chosen language (e.g. 'fr' for French, 'es' for Spanish, 'de' for German).

Option 2: Use the data-inline-lang attribute

  • This option is cleaner if you're already using other data-inline-* attributes.

<div class="tt-widget">   
<script src="https://www.tickettailor.com/js/widgets/min/widget.js"    
data-url="https://www.tickettailor.com/all-tickets/acme-events/"    
data-inline-lang="LANGUAGE_CODE"    
data-type="inline"></script>  
</div>

  • Replace 'LANGUAGE_CODE' with the two-letter code for your chosen language (e.g. 'fr' for French, 'es' for Spanish, 'de' for German).

  • You can see an example of the full widget code with this adjustment below, showing the widget set to display in French ('fr'):

<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" 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/YOURBOXOFFICENAME/" data-type="inline" data-inline-minimal="true" data-inline-show-logo="false" data-inline-bg-fill="false" data-inline-lang="fr"></script></div>

  • Supported language codes: en, ca, zh, nl, de, el, fr, id, it, ja, pt, ro, es, sv

Related Articles
Did this answer your question?