Embed your events on your website

The events widget puts your venue's upcoming events on your own website. You paste one snippet where the events should appear, and visitors see the same list your events page at app.captifi.io/events/your-venue shows, with each event's tickets. Get tickets opens the event on app.captifi.io in a new tab, where the buyer pays as usual. Tickets, orders and the door work exactly as they do for a sale from your events page; the widget is one more way onto it.

The widget is set up under Events then Events settings on either dashboard, in the Embed on your website section. On the classic dashboard at app.captifi.io the section sits in the settings form with a card beside it; on my.captifi.io it is the last card on the page. Where a label differs, this guide gives the classic label first and the my.captifi.io label in brackets.

What the widget shows

The list is headed Upcoming events. It shows your events page introduction when you have written one, then each upcoming public event: its image, name, date and time, a From price or Free or Sold out badge, and a View event button. It lists up to 12 events; when there are more, a See all events button opens your events page on app.captifi.io in a new tab. When nothing is on sale it reads "No events are on sale right now. Check back soon." A Powered by CaptiFi line sits at the foot.

Clicking an event opens it inside the widget: the image, when and where (your venue name and address), the description, and under Tickets each ticket type with its price, the booking fee line when you pass the fee on, how many are left when 20 or fewer remain, and Sold out, On sale from or Ticket sales have closed where they apply. A Get tickets button opens the event's page on app.captifi.io in a new tab. All events at [venue] at the bottom returns to the list, and the event's terms are under Event terms. A cancelled event shows its cancelled notice, a draft never appears, and the list holds public events only.

The widget never shows an order form and never takes a payment on your website. Payment happens on app.captifi.io because Apple Pay and Google Pay need the page they run on to be registered with Stripe, and because browsers block the cookies a checkout needs inside a frame on another website. The widget follows the languages you have enabled for the venue (see Guest languages), sets no cookies, and asks search engines not to index it.

Requirements

• Events is included on the Growth plan and above.
• Events is switched on: Integrations, then the Events and tickets card. See Events and tickets.
• The venue's events page is live. Page is live (Events page is live on my.captifi.io) on Events settings turns on when you publish your first event. Until then the Embed on your website card holds the snippet back and says so: "Turn on Page is live and save to get your embed snippet" on the classic dashboard, "Set the events page live to get your snippet" on my.captifi.io, where you can still choose the look and the allowed websites in the meantime. A venue that has never saved its events settings is told the snippet appears once the page has been saved and set live.

The account holder, and a team member with Manage events and tickets, can change the look and the allowed websites. Everyone with access to Events can see the snippet and the key. Only the account holder can issue a new embed key.

Getting the snippet

1. Go to Events then Events settings. With more than one venue, pick the venue at the top of the page first.
2. Find the Embed on your website card: to the right of the form on the classic dashboard, at the bottom of the page on my.captifi.io. It holds the snippet ready to paste.
3. Click Copy snippet (Copy, inside the snippet field, on my.captifi.io). The button reads Copied (Copied!) for a moment.
4. To check how it will look, open Preview at the bottom of the card. On my.captifi.io click Preview the widget at the top of the card; it opens in a new tab. Loads in the preview are not counted.

The snippet is two lines. Your own venue's key replaces the example:

<div data-captifi-embed="events" data-venue="3f9a1c2e4b5d6f708192a3b4" data-theme="light"></div>
<script src="https://app.captifi.io/embed/v1.js" async></script>

The first line marks where the events go; the script draws them there in a frame that grows and shrinks with its content, so there is no height to set. The 24-character value in data-venue is your venue's embed key. It is shown in the card as Embed key, with the date it was issued if you have ever issued a new one (my.captifi.io says Your first key until then). The key identifies the venue's events page and nothing more; it cannot be used to see orders, buyers or settings.

Under If your website strips scripts (If your website strips scripts, use the iframe instead on my.captifi.io) is a second snippet, a plain frame:

<iframe src="https://app.captifi.io/embed/e/3f9a1c2e4b5d6f708192a3b4" title="Events" style="width:100%;min-height:640px;border:0" loading="lazy"></iframe>

Use it where a page builder does not allow scripts. It shows the same events and keeps the height you set: 640 pixels unless you change min-height. Make it tall enough for your list, or keep the list short with the limit option below.

Pasting it into your website

Paste the snippet where the events should appear on the page, in an HTML or code block. A normal text box turns the tags into visible text. If your page builder does not allow scripts, the frame snippet works instead. The snippet can go on more than one page, and two copies on one page each draw the widget; the script notices it is already loaded.

WordPress

1. Edit the page and add a Custom HTML block where the events should appear.
2. Paste the snippet into the block and update the page.

Squarespace

1. Edit the page and add a Code block where the events should appear.
2. Paste the snippet and save.

Wix

1. Add the Embed HTML element where the events should appear.
2. Paste the snippet into the element's code box and apply it.

Webflow

1. Add an Embed element where the events should appear.
2. Paste the snippet, save, and publish the site.

Plain HTML

Paste the snippet into the page's HTML where the events should appear, anywhere inside <body>. The script tag can stay next to the <div> or move to the end of the page.

Options

The widget has four settings. Look and Accent colour are in the Embed on your website section and are written into the snippet when you copy it: change them, click Save settings (Save embed settings on my.captifi.io, the card's own button), and copy the snippet again, or edit the attribute in the snippet already on your site. The other two are set only in the snippet.

Setting	In the snippet	Values
Look	data-theme	light (the default), dark, or auto (Match the visitor's device in the form), which follows the visitor's light or dark setting
Accent colour	data-accent	A six-digit hex colour such as #e11d48, used on buttons and links. Leave it empty in the form for the standard colours. On my.captifi.io a colour swatch sits beside the field
How many events	data-limit	1 to 50; 12 when left out
Language	data-lang	en, fr or es, and only a language enabled for the venue. Without it the widget follows the visitor's browser within your enabled languages, then the venue's default

A value the widget does not recognise is ignored and the saved setting, or the default, is used instead, so the widget still renders. To set an option on the frame snippet, add it to the address after a ?, joining more than one with &, for example https://app.captifi.io/embed/e/3f9a1c2e4b5d6f708192a3b4?theme=dark&limit=6. For the accent write %23 in place of #, as in accent=%23e11d48.

Allowed websites

By default any website may show your widget, because it shows only what your public events page shows. The Embed on your website card says so: "Any website may show it. List your own websites in the form to limit it." ("Any website may show the widget." on my.captifi.io).

To limit it, type each of your website addresses into Websites allowed to show it and press Enter after each (on my.captifi.io, type the address and click Add website or press Enter; each one becomes a chip with a cross to remove it), then click Save settings (Save embed settings on my.captifi.io):

• Use https:// and the host only, such as https://www.example.com. No path, and no http://.
• https://*.example.com covers every subdomain of example.com. It does not cover https://example.com itself; list that too if your site answers on both.
• Up to 10 entries. Case and a trailing slash do not matter; the list is tidied when you save.

An entry the widget cannot be limited to is refused with "is not a website address the widget can be limited to" and nothing is saved until you fix it. Once saved, the classic card reads Shown only on: followed by the list; my.captifi.io shows the list as chips.

On a website that is not on the list the browser refuses to draw the frame and the space stays blank; the page's developer console records a frame-ancestors error. The preview on Events settings keeps working whatever the list says, and your public events page is not affected. To allow any website again, remove every entry and save.

What buyers see

Everything a buyer does happens on app.captifi.io. Get tickets opens the event's public page in a new tab, where the buyer picks quantities, gives their details and pays by card, Apple Pay or Google Pay as described in Events and tickets. Payment never happens inside your website. Their tickets arrive by email in the same way, they appear in your guest list, and the door scans them as any other ticket.

An order that started from the widget carries embed as its Source under Events then Ticket orders, so you can see which sales your website brought in.

Loads and clicks

The Embed on your website card reads, for example, "Last 7 days: 412 loads, 37 clicks on Get tickets." On my.captifi.io the same figures are two tiles under Last 7 days, Loads and Clicks. A load is counted each time the list or an event opens inside the widget on a visitor's page; a click each time a visitor presses Get tickets. The figures cover today and the six days before it, for the venue you have picked. The preview counts nothing.

Issuing a new embed key

Issue a new key when the snippet has ended up somewhere it should not be, such as a website you no longer work with or a page that copied yours. Only the account holder can do it, and the button appears once the events page is live.

1. Open Events then Events settings and pick the venue.
2. Click Issue a new embed key: at the top of the page on the classic dashboard, beside the embed key in the card on my.captifi.io.
3. Read the confirmation. On the classic dashboard it says "Every website still carrying the current snippet stops showing your events until it is updated with the new one. Load and click counts start again from zero."; click Issue a new key. On my.captifi.io it says "Every website carrying the current snippet stops showing your events until you paste the new one, and the loads and clicks counts start again from zero. The old key cannot be brought back."; press and hold Hold to issue new key until it completes, as a short click does nothing.
4. Copy the new snippet and replace the old one on every page of yours that carries it.

The old key stops working at once: every copy of the old snippet shows an empty frame from then on. The loads and clicks for the venue start again from zero, and the card shows the new key with the date it was issued. A team member sees "Only the account holder can issue a new embed key" ("Only the account owner can issue a new embed key" on my.captifi.io) in place of the button, and the shared demo account cannot issue one.

Troubleshooting

What you see	Likely cause	What to do
Nothing where the widget should be, no frame at all	The page builder does not allow scripts	Paste the frame snippet from If your website strips scripts instead
An empty frame	The events page is not live	Turn on Page is live (Events page is live on my.captifi.io) on Events settings and save, or publish an event
An empty frame	A new key has been issued since the snippet was pasted	Copy the current snippet from Events settings and replace the old one
An empty frame	The website is not on Websites allowed to show it	Add the site's address, https:// and host only, and save. www. and the bare domain are different entries
An empty frame	The key in the snippet was changed while pasting	It must be exactly the 24 characters shown as Embed key on Events settings; copy the snippet again
"No events are on sale right now. Check back soon."	No public event is on sale or sold out with its time still ahead	Publish an event, or check its visibility is Public
The bottom of the widget is not visible	The frame snippet is in use at a height too small for the list, or the page builder gave the widget a fixed height	Raise min-height in the frame snippet, or make the element taller in the builder
The colours or the look did not change	The value is not one the widget accepts	Use light, dark or auto for the look and a six-digit hex colour such as #e11d48 for the accent
The widget is in the wrong language	The language asked for is not enabled for the venue	Enable it under the venue's guest languages, or remove data-lang

When the widget still shows nothing after these checks, open the page's developer console: the loader writes a line beginning "CaptiFi embed:" that says what it found wrong with the snippet.