You can create a widget that lets customers purchase tickets on your website without having to visit your box office page. This help article will show you how to embed a Ticket Tailor box office widget on your website.

You can choose from a variety of design options, allowing you to display your events in a list or calendar format arranged by event or date.

How to set up a Ticket Tailor box office widget

From the Promote section of your dashboard, choose Website embed code from the side menu.
Click the button titled Edit widget settings to change how the widget looks.
1. If you only want to embed specific events, you can add a common name in the title of your events into the box labelled Filter items by a keyword.
2. If you're choosing to display all of your events, you have a variety of design options to choose from under the Event or store dropdown. You can take a look at the options here.
3. If you want to embed a widget with Products from your Store, or a single event, use the dropdown Event or store.
Use the other settings to choose whether the background should be filled or transparent, whether to show the header and event info, and to add a unique Referral tag.
When you’re done editing, click the Update widget button to see a preview of how your widget will look.
Use the Edit widget colors button to add further customisation to your widget. You can choose from existing presets, or select your own.
1. Click Save when you're done.
Under the Copy embed code heading, use the dropdown menu to choose whether you’ll be embedding your widget in an HTML or WordPress website.
Copy and paste the generated code into your website on the page you want the box office to appear.

Selling tickets to more than one event?

If you're selling tickets for lots of events, our recommended set-up is to add multi-checkout to your box office, so your customers can buy tickets to multiple events in one go.

You can keep their basket visible on all of your website pages with an optional cart widget, which you can embed into your website header.

Screenshot showing an example of the cart widget within a website header.

Event listing widget display options

All events list

All events list with image (by event)

You can choose three listing layouts for this option - List, 2 column grid, or 3 column grid.

List:

2 column grid:

3 column grid:

Screenshot showing a preview of the 'All events list with image (by event)' option, with a '2 column grid' view.

All events list with image (by date)

You can choose two listing layouts for this option - List or 3 column grid.

List:

2 column grid:

3 column grid:

Screenshot showing a preview of the 'All events list with image (by date)' option, with a '2 column grid' view.

All events calendar with list

All events full calendar

When using the All events full calendar option, your ticket buyers will see a preview of the event when they click on it:

GIF demonstrating what happens when you hover over an event on the 'All events full calendar' display option for your Ticket Tailor widget.

💡 Things to note

The Ticket Tailor widget is responsive, meaning that it will fill the width of whatever space you put it into (up to about 800px wide).
If you find the borders of the widget go out of range, return to Edit widget options and change the background to transparent.
If you're comfortable with HTML, you can customise the size and events shown in your widget by manipulating the code.
Due to cookie restrictions on some browsers, the widget may open in a new tab to successfully complete an order. Any promo codes, membership codes of referral tags will be preserved when the checkout opens. Ticket buyers will see a Continue shopping button to return to your website.
- To avoid this, add a custom domain to your box office (paid feature).
If you have more than 48 events, your ticket buyers will see page navigation controls to browse through all your events.