Buy ticket buttons

Embed a Buy tickets button on your own website. When someone clicks it, the BooTickets checkout opens in a modal right there — they never leave your page.

Quick start

Paste this where you want the button to appear, using your event's ID:

<!-- BooTickets CTA -->
<bootickets-cta event="<event-id>"></bootickets-cta>

<script async src="https://bootickets.com/embed/v1/loader.js"></script>

The button label reflects the event's status automatically — Buy tickets, Sold out, Coming soon, and so on. You only need to include the <script> tag once per page, even if you show several buttons.

Attributes

Attribute	Required	Description
`event`	Yes	The event ID to sell.
`color`	No	Accent colour for the button (any CSS colour).
`lang`	No	Language code for button text (default `en`).

<bootickets-cta event="<event-id>" color="#e11d48" lang="en"></bootickets-cta>

Events you can listen for

The widget dispatches DOM events you can hook into for analytics:

Event	Fires when
`bt:view`	The button is added to the page.
`bt:status`	The event's status has loaded (detail includes the event).
`bt:click`	The buyer clicks the button.
`bt:purchase`	A purchase completes.

<script>
  document.addEventListener('bt:purchase', (e) => {
    console.log('Ticket purchased', e.detail);
    // e.g. fire a conversion event to your analytics here
  });
</script>

Opening checkout from your own code

If you'd rather trigger checkout from a custom button, the loader exposes a small global API:

// Open the ticket checkout for an event
await window.BooTickets.openCheckoutModal({ event });

// Open a donation checkout
await window.BooTickets.openDonationModal({
  customerId: '<organiser-id>',
  organiserName: 'Your name',
  currency: 'GBP',
});

// Override defaults (accent colour, API/asset bases)
window.BooTickets.configure({ accentColor: '#e11d48' });

openCheckoutModal and openDonationModal resolve with { confirmed, orderId, checkoutId } when the modal closes.