Embedding
Put an event card, or the whole checkout, on your own site with one script tag.
The two shapes
There is one script, and it does two things depending on what you put it beside. An element marked data-venued-embed-inline becomes an iframe in the flow of your page. An element marked data-venued-embed — usually a button — opens the embed in an overlay when clicked, leaving your own markup and styling alone.
Inline, in the page:
<div data-venued-embed-inline data-event="EVENT_ID"></div>
<script src="https://venued.eu/embed.js" async></script>A button that opens checkout over your page:
<button data-venued-embed data-event="EVENT_ID" data-mode="checkout">
Get tickets
</button>
<script src="https://venued.eu/embed.js" async></script>The script is dependency-free and safe to include once per page. It is also idempotent: including it twice re-scans for new elements rather than initialising a second copy.
Preview or checkout
data-mode decides which one you get. preview (the default) is the event card: cover, date, venue, a short description and a link through to the event. checkout is the real purchase flow, so the buyer picks a tier and pays without leaving your site.
Options
All optional except data-event, and all set on the element rather than in a configuration object.
| Attribute | Values | What it does |
|---|---|---|
data-event | required | The Venued event id. It is the last segment of the event’s URL on venued.eu. |
data-mode | preview | checkout | The card, or the purchase flow. Defaults to preview. |
data-theme | auto | light | dark | Defaults to auto, which follows the viewer’s system setting. |
data-size | standard | compact | wide | fluid | fluid fills its container and reflows as that container resizes. |
data-accent | #RRGGBB | Override the event’s own colour to match your site. |
data-corners | rounded | square | Defaults to rounded. |
data-shadow | on | off | Defaults to on. |
data-image | show | hide | hide drops the cover image, for a text-only embed. |
data-height | px | Starting height of an inline embed before it reports its real one. Defaults to 640. |
An inline embed measures itself and reports its height to the loader, so it grows and shrinks with its own content rather than scrolling inside a fixed box.
Knowing when someone buys
A completed purchase fires a venued:purchase event on window, carrying the order id. That is where to put your own conversion tracking.
window.addEventListener('venued:purchase', function (e) {
console.log('order', e.detail.orderId);
});If you would rather have a callback, set window.Venued.onPurchase to a function instead; it receives the same { orderId }. The overlay deliberately stays open on success, because the embed shows its own confirmation with a link to the buyer’s tickets.
Adding embeds after the page loads
The loader scans the DOM once when it runs. If your page injects embed elements later — a single-page app, a tab that renders on demand — call window.Venued.refresh() afterwards and it will pick up anything new. window.Venued.open(eventId, mode) and window.Venued.close() drive the overlay directly, for cases where the trigger is not a button you can mark up.