Sell with usHelpNigeria
Find My Ticket
Find My Ticket

Guide

How to embed your events on your website

Show your AllEvents listings on your own site with one line of HTML. It stays up to date on its own, and people still check out on AllEvents.

What you get

A live list of your published events on your own website, in your own colours. It updates itself — publish an event on AllEvents and it appears on your site, with no second place to keep in step. When somebody picks an event, they open it on AllEvents and buy exactly as they would have anyway, so your tickets, scanning, refunds and payouts all work unchanged.

It is one <script> tag. It sizes itself to your events, so there is no scrollbar inside it and no height for you to guess at.

Step 1 — Open the embed settings

In your studio, go to Branding and choose the Embed on your site tab.

Set your colours and logo on the Branding tab first if you have not already. The embed uses the same branding as your checkout and your ticket emails, so anything you set there shows up here too.

Step 2 — Generate your embed key

Press Generate embed key. Two things are created:

  • Your address, made from your business name — so an organizer called AllEvents gets allevents. This never changes, even if you later rename your business, because changing it would break every embed already live.
  • Your embed key, which is what lets your website ask for your events.

The key is not a password.It sits in your website's HTML where anyone can read it, and that is fine — all it can do is list the events you have already published publicly. It cannot change anything, see your sales, or reach anything else in your account. What it gives you is control: if you ever want a copy of your snippet to stop working, reset the key.

Step 3 — Choose how it looks

Two layouts, both the same ones AllEvents uses on its own pages:

  • Lineup — a scannable column. Each event is a row: small image on the left, then the title with venue, date and price. Best when you have a lot of events, or you are putting this in a narrow column or sidebar.
  • Showcase — full-width posters, with the title over your artwork. Best when the artwork is doing the selling and you have only a few events on at a time.

Then three settings:

  • Order — Happening soonest (the default), Best selling first, or Recently added.
  • Per page — 6, 12 or 24. Anything beyond that page gets a Next link.
  • Show sold-out events — off by default. Turn it on if a sold-out show proves the point rather than wasting the space.

Changes save as you make them, and the preview below updates straight away.

Step 4 — Check the preview

The preview is not a mock-up. It is the real embed, loading your real events through the same address your website will use — so what you see there is what your visitors get.

Step 5 — Paste it into your site

Copy the snippet. It looks like this, with your own address and key in it:

<script src="https://allevents.com/embed.js"
        data-slug="allevents"
        data-key="your-embed-key"></script>

Paste it into your page's HTML wherever you want the list to appear. The events show up in that spot — the tag replaces itself with them.

On WordPress, add a Custom HTML block and paste it in. On Squarespace, use an Embed or Code block. On Wix, add Embed a Widget and choose the HTML option. If your site builder strips <script>tags out of ordinary page content, look for the block named “custom code”, “embed” or “HTML” — that is the one that keeps them.

If your site is built with React, Vue, Angular or Svelte

Pasting the snippet straight into a component will not work. Every one of these frameworks builds the page with JavaScript, and a <script> tag written into a template or into JSX is treated as inert markup — the browser never runs it. That is a rule of the framework, not something particular to us.

There are two ways round it. Pick whichever suits your codebase.

Option A — add the script yourself, after the component mounts

Create the tag in code and put it in the element where you want the events. This keeps everything the snippet does, including the automatic height.

React

import { useEffect, useRef } from "react";

export function AllEvents() {
  const box = useRef(null);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://allevents.com/embed.js";
    script.dataset.slug = "your-slug";
    script.dataset.key = "your-embed-key";
    box.current.appendChild(script);

    // Strict Mode runs effects twice in development, which would give you two
    // copies of the list. Clearing on cleanup keeps it to one.
    return () => { box.current.innerHTML = ""; };
  }, []);

  return <div ref={box} />;
}

Next.js

The same component, with "use client" at the top of the file. It has to be a client component: the script runs in the browser, so there is nothing for the server to render. Do not reach for next/script here — it places the tag for you, and the events appear wherever it decides rather than where you put the component.

Vue

<script setup>
import { onMounted, ref } from "vue";

const box = ref(null);

onMounted(() => {
  const script = document.createElement("script");
  script.src = "https://allevents.com/embed.js";
  script.dataset.slug = "your-slug";
  script.dataset.key = "your-embed-key";
  box.value.appendChild(script);
});
</script>

<template><div ref="box"></div></template>

Angular

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";

@Component({ selector: "all-events", template: "<div #box></div>" })
export class AllEventsComponent implements AfterViewInit {
  @ViewChild("box") box!: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    const script = document.createElement("script");
    script.src = "https://allevents.com/embed.js";
    script.dataset["slug"] = "your-slug";
    script.dataset["key"] = "your-embed-key";
    this.box.nativeElement.appendChild(script);
  }
}

Svelte

<script>
  import { onMount } from "svelte";
  let box;

  onMount(() => {
    const script = document.createElement("script");
    script.src = "https://allevents.com/embed.js";
    script.dataset.slug = "your-slug";
    script.dataset.key = "your-embed-key";
    box.appendChild(script);
  });
</script>

<div bind:this={box}></div>

Option B — write the iframe yourself

If you would rather not inject a script, put the iframe in your own markup. The address is:

https://allevents.com/e/your-slug/events?k=your-embed-key

Add &style=showcase to override the layout for that one placement without changing your saved setting.

You lose the automatic sizing, because only the page inside the frame knows how big it is. It tells you: it posts a message to the parent window whenever its size changes, and you can listen for it. In React:

const [size, setSize] = useState({ height: 600, maxWidth: "none" });

useEffect(() => {
  const onMessage = (event) => {
    if (event.origin !== "https://allevents.com") return;
    if (event.data?.type !== "allevents:embed:height") return;
    setSize({ height: event.data.height, maxWidth: event.data.width });
  };
  window.addEventListener("message", onMessage);
  return () => window.removeEventListener("message", onMessage);
}, []);

return (
  <iframe
    src="https://allevents.com/e/your-slug/events?k=your-embed-key"
    style={{ width: "100%", border: 0, ...size }}
    scrolling="no"
    title="Events"
  />
);

Always check the origin, as above. Any page can post a message to any window, so without that check another script on your page could resize the frame to nothing. The message is always { type: "allevents:embed:height", height: <number>, width: <number> }. The width is how much room the cards are actually using, so a single event does not sit in a page-wide empty box — treat it as a maximum, not a fixed width, or the frame stops being responsive.

What your visitors see

Your events, in your colours, with a Buy tickets button on each. Clicking it opens that event on AllEvents in a new tab, so nobody is trapped inside a small box on your page and your own site stays open behind them. Checkout, confirmation and the ticket email are all exactly as they are for anyone who found you through AllEvents.

Sold-out events show a Sold out marker instead of a buy button — you cannot accidentally sell a ticket that does not exist, whichever setting you chose.

Keeping it up to date

You do not. Publish an event and it appears; when an event finishes it drops off on its own. The list only ever shows published events that have not happened yet, so there is nothing to prune and nothing to remember.

Resetting your key

Reset it if your snippet ended up somewhere you did not intend, or you would rather start again. Be aware of what it does: every copy of your old snippet stops working immediately, including the one on your own site, until you paste the new one in. Your address does not change, so that is the only thing you need to update.

If it does not appear

  • Nothing shows up at all. Your site builder has most likely removed the <script> tag. Use its dedicated embed or custom-HTML block.
  • It says the list is not available. The key in your snippet is not current — usually because it was reset after the snippet was pasted. Copy the snippet again.
  • It is empty. You have no published events still to come. Drafts, events awaiting review and finished events are all left out.
  • The colours are wrong. They come from the Branding tab. Set them there and the embed follows.

Stuck on something not covered here? Get in touch and tell us the address of the page you are embedding on — that is usually enough for us to see what is happening.