Checkout Embed
Sell tickets from your own page with a single iframe, themed to your brand.
The checkout embed puts Jetron's full buying flow inside your page: ticket selection, quantities, promo codes, contact details, and payment. You supply one iframe and Jetron handles the rest, so there is no API key, no backend, and no checkout code on your side.
Add the embed
Point an iframe at the checkout host followed by your event's slug:
<iframe
width="100%"
height="760"
src="https://checkout.jetronticket.com/my-event"
title="My Event checkout"
referrerpolicy="no-referrer"
allowfullscreen
></iframe>That is the entire integration. The slug is the same slug the API returns for
the event, so a page that already lists events can build the URL from data it
has.
Copy it from the dashboard
Your Jetron Ticket dashboard generates this snippet for you, already filled in with the event slug and your configured theme, under the event's Integrations → Website Embed tab.
Theming
Two query parameters control the look:
| Parameter | Values | Description |
|---|---|---|
theme | light or dark | Colour mode for the checkout. |
colorScheme | 6-digit hex | Accent colour, applied as the checkout's primary colour. |
<iframe
src="https://checkout.jetronticket.com/my-event?theme=light&colorScheme=e0995a"
width="100%"
height="760"
title="My Event checkout"
referrerpolicy="no-referrer"
allowfullscreen
></iframe>colorScheme accepts the hex with or without a leading #. If you include the
#, URL-encode it as %23, since a raw # would start a URL fragment:
const accent = '#e0995a'
const src = `https://checkout.jetronticket.com/${slug}?theme=light&colorScheme=${encodeURIComponent(accent)}`Dashboard settings win
If you have set an embed mode or colour on the event in your dashboard, that configuration is applied after the URL parameters and overrides them. Use the dashboard when you want one consistent look, and the query parameters when the embedding page picks the colour per event.
Sizing
The embed does not resize itself and does not post messages to the parent page,
so give the iframe a height that fits the tallest step of the flow. Around
760px works for most events. If your layout allows it, a viewport-relative
height such as min(760px, 90vh) handles small screens more gracefully.
Because there is no message channel, the parent page is not notified when a purchase completes. To react to purchases on your own systems, use webhooks.
When to use the embed
The embed is the right choice when you want to start selling quickly, when you do not want to handle payment redirects yourself, or when you are selling a Seat Map event. Seat Map events cannot be sold through the API, but the embed supports them fully, including the seat picker.
Choose the API instead when you need control over every screen, want to collect custom fields, or are building the buying experience into an existing product flow.
Live example
boba.jtr.rsvp embeds the checkout on several of its
events and passes each event's accent colour through colorScheme, so the
checkout matches the page it sits in. Its source is on GitHub at
jetronmall/boba-event, and
Example site explains the setup.