Add a button or link to your website that opens your event's ticket checkout as a pop-out over the page, rather than showing the full widget. Copy the code below, replace the placeholders, then paste it into your website's HTML where you want the button or link to appear.

How to add your event checkout as a pop-out from your website

For use with custom domains in Ticket Tailor

If your box office uses a custom domain, use the code below.
- This keeps buyers on your own domain through checkout, which helps with tracking. If a buyer's browser blocks the cookies checkout needs, checkout opens in a new tab or window instead.

💡 Custom domains are a paid add-on. To set one up, read How can I add my custom domain to my box office?

<script src="https://cdn.tickettailor.com/js/TTWidget.js"></script> <a href="javascript://" onclick="TTWidget.loadEvent('YOURBOXOFFICENAME',EVENTID, 'widget', 'tickets.mycustomdomain.com');"> <img src="https://app.tickettailor.com/images/btns/bt_wh.gif" alt="Buy tickets" /> </a>

Replace YOURBOXOFFICENAME with the name of your box office. This is the last part of your box office link.
- To find it, click your box office name in the top right corner of your dashboard and look under Box office link.
- For example, if your link ends in /mytickets, enter mytickets.
Replace EVENTID with your numeric event ID.
- To find your event ID, open your event and select Edit event and tickets in the left-hand menu.
- Look at the web address in your browser. The number after es_ is your event ID. For example, if the address ends in es_12345/edit, your event ID is 12345
- Don't use a number that starts with ev_. That is the ID for a single date, not for the whole event.

A screenshot of an example event URL, with the event ID underlined.

Replace tickets.mycustomdomain.com with your custom domain.
<img src=“https://app.tickettailor.com/images/btns/bt_wh.gif” alt=“Buy tickets” /> with whatever link you'd like to show on your website. This could be an image or text link.
- Using the example code above will add the white 'buy tickets' button.

A screenshot of a white Buy Tickets button.

For use without a custom domain in Ticket Tailor

If you're not using a custom domain in your box office, use the code below.
- Note: You may have to scroll left in the code box to see the complete code.

<script src="https://cdn.tickettailor.com/js/TTWidget.js"></script> <a href="javascript://" onclick="TTWidget.loadEvent('YOURBOXOFFICENAME',EVENTID,'widget');"> <img src="https://app.tickettailor.com/images/btns/bt_wh.gif" alt="Buy tickets" /> </a>

Replace YOURBOXOFFICENAME with the name of your box office. This is the last part of your box office link.
- To find it, click your box office name in the top right corner of your dashboard and look under Box office link.
- For example, if your link ends in /mytickets, enter mytickets.
Replace EVENTID with your numeric event ID.
- To find your event ID, open your event and select Edit event and tickets in the left-hand menu.
- Look at the web address in your browser. The number after es_ is your event ID. For example, if the address ends in es_12345/edit, your event ID is 12345
- Don't use a number that starts with ev_. That is the ID for a single date, not for the whole event.

Replace <img src=“https://app.tickettailor.com/images/btns/bt_wh.gif” alt=“Buy tickets” /> with whatever link you'd like to show on your website. This could be an image or text link.
- Using the example code above will add the white 'buy tickets' button.

What your ticket buyers will see

When a buyer clicks your button or link, your ticket selection page opens over your website and fills the screen, on phones too.
With a custom domain, the rest of checkout stays in the pop-out. If the buyer's browser blocks the cookies checkout needs, it opens in a new tab or window instead.
Without a custom domain, buyers choose their tickets in the pop-out and checkout then continues in a new tab or window. The pop-out shows "Checkout has opened in a new tab or window" with an option to start over.
If your event has no upcoming dates, buyers see a page-not-found message instead of tickets.

💡 Things to note

If your event has more than one date, the pop-out opens a list of dates for buyers to choose from. To send buyers straight to one date, use the code in Can I direct my ticket buyers to one occurrence from my website?
The word 'widget' in the code, after the event ID, is a referral tag. Change it if you want to tell this button apart from other sources. Orders from this button show the tag on the order page under Referral tag. Use letters, numbers, hyphens or underscores only.
The code in this article is not created for you on the Website embed code page of your dashboard, so you need to fill it in yourself. If you would like a widget that shows your events on the page, read How to embed a box office widget on your website.
You can add more than one button to a page, each with its own event ID. You only need to include the first line of the code once per page.
The pop-out uses the colours saved for your box office. To change them, head to Promote → Website embed code, then select Edit widget colors. Changes apply to all your widgets and your checkout.

Can I add my event checkout as a pop-out from my website?