Website code

Your whole shop

One element lists every upcoming event you organise (and, for a venue, everything on at your venue), and the buyer goes from the list to the event to checkout without leaving your site. It all happens inside one frame that sizes itself to its content.

<div data-venued-shop="YOUR_BUSINESS_ID"></div>
<script src="https://venued.eu/embed.js" async></script>

Copy it ready-made from Studio: Business Settings → Web shop, which fills in your business id and previews the result. The shop takes data-theme, data-accent and data-corners from the table below. Without data-themeit reads your page’s background and picks light or dark to match, because the shop has no background of its own.

An inquiry form for venues and professionals

A form on your own site that sends an inquiry straight to your Studio inbox, the same inbox every other inquiry lands in. A visitor gives a name, an email address or a phone number, and a message; they can add a preferred date, a guest count, the occasion, their company and a budget in euros. There is no account and nothing for them to install. Copy the snippet ready-made from Business Settings → Web shop in Studio, which fills in the id for you.

<div data-venued-inquiry="YOUR_VENUE_OR_PROFESSIONAL_ID"></div>
<script src="https://venued.eu/embed.js" async></script>

Use your venue’s id, or your professional profile’s id. A professional can point the form at one published service with data-service. A venue with several rooms shows a room picker, so a request reaches the right one. The form reads its language from data-lang (en, de or tr) and otherwise from your page’s lang attribute, and takes data-theme, data-accent and data-corners like the shop.

When one is sent your page gets a venued:inquiry event, for your own conversion tracking:

window.addEventListener('venued:inquiry', function () {
  // One inquiry was sent. Nothing about it is passed on.
});

It also counts as a lead on your own ad pixels, if your page has loaded them: Lead on Meta, generate_lead on Google and SubmitForm on TikTok, with nothing about the visitor attached. data-track="off" switches that off too.

An availability calendar for venues

Shows which days are already taken, one calendar per room, so a visitor sees before asking.

<div data-venued-availability="YOUR_VENUE_ID"></div>
<script src="https://venued.eu/embed.js" async></script>

It is for a venue that is taking requests. A venue that has switched “not for hire” off does not get a calendar, rather than a hire calendar for a room that is not for hire.

Links to one event

Wherever the shop is, your page’s address follows it: opening an event adds #venued/event/EVENT_ID, and its checkout #venued/event/EVENT_ID/checkout. Those are real links. Put https://your-site.com/tickets#venued/event/EVENT_ID in an ad, a story or a newsletter and it opens that event straight away, inside your site. The back button steps back through the shop.

The same link works with the single-event embeds below: if your page has a button or card for that event, the link opens its overlay. Only events that are yours open this way; any other id shows your list.

Your own ad pixels

If your page has a Meta Pixel, a Google tag (or Google Tag Manager) or a TikTok pixel, the embed sends it the standard ecommerce events as buyers move through: viewing an event, adding tickets, starting checkout, adding payment details and the purchase, with the ticket value and currency. That is what lets you build retargeting audiences and measure what your campaigns sold, on your own domain.

A purchase is sent once per order, with the order id as the transaction id. The events carry event ids and names, ticket tiers, quantities and amounts, and never the buyer’s name or email. Your pixels only fire if your page has loaded them, so your own cookie consent still decides. To switch it off:

<script src="https://venued.eu/embed.js" data-track="off" async></script>

Every step is also a venued:track event on window (e.detail.name, e.detail.params), for any other tool.

Apple Pay and Google Pay

Card payment always works inside the embed. Apple Pay and Google Pay appear there once your website is registered for them on your payment account: add your domain in Studio under Business Settings → Web shop. Google Pay works as soon as it is added. For Apple Pay, also upload Apple’s verification file to https://your-site.com/.well-known/apple-developer-merchantid-domain-association and press Check again. Add www. separately if your site answers on both.

Until then, buyers see a “Pay with Apple Pay / Google Pay on venued.eu” button that finishes the same order on venued.eu with their selection and details carried over.

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.

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.