Embedding Seaty Tickets on Your Own Website

Embed Seaty event listings on your website: show what's on, list dates for a specific event, choose light or dark themes, and update automatically.

Display your Seaty events directly on your own website. Visitors can browse upcoming dates, check availability, and click through to book tickets — all without leaving your site.

Who uses this: Organisers who want to show event listings or ticket availability on their own website.

Key capabilities:

Show all upcoming events for your organisation ("What's On" listing)
Combine several organisations into a single "What's On" if you run more than one
Display dates and times for a specific event ("Book Tickets" listing)
Display dates across a tour
Light and dark theme support to match your website
Responsive design that works on desktop and mobile
Automatic updates when you change events in Seaty

Why Embed?

Many organisers already have a website where their audience looks for event information. Embedding your Seaty events means visitors can see what's on and check availability without leaving your site. It keeps your website up to date automatically — whenever you add a new event, change pricing, or a show sells out, the embed updates on its own.

You can also simply link to your Seaty page instead. Embedding is better if you want event listings to appear as part of your own website rather than sending visitors to a separate site.

Before You Begin

You need a Seaty organisation with at least one upcoming event — Create an organisation
You need the ability to edit your website's HTML (or access to someone who can)
You need to know your organisation, event, or tour tag (see below)

If you are not comfortable editing website code, ask your web designer or website administrator to follow these steps. The setup takes just a few minutes.

Quick setup: You can also generate your embed code from the Embed page in your organisation admin menu. It includes a live preview and lets you customise options before copying the code.

Finding Your Tag

To use the embed, you need your organisation, event, or tour tag. This is the short name that appears in your Seaty URL:

Organisation tag: Look at your organisation URL — www.seaty.co.uk/Organisation/lythamhall means the tag is lythamhall. You can also find it in your organisation settings.
Event tag: Look at your event URL — www.seaty.co.uk/lythamhall/queen means the event tag is queen.
Tour tag: Found in your tour settings or tour URL.

Tags are not case-sensitive, so LythamHall and lythamhall both work.

Getting Started

Step 1: Add a Container

Place this where you want the event listing to appear on your page:

<div id="seaty-events"></div>

Step 2: Add the Embed Code

Place this code after the container above:

<script src="https://www.seaty.co.uk/embed/v1/seaty-embed.js"></script>
<script>
  Seaty.init({
    target: '#seaty-events',
    organisation: 'your-organisation-tag'
  });
</script>

Replace your-organisation-tag with the tag you found in the previous step.

That's it — your events will now appear on your website.

Adding to Common Website Platforms

WordPress

Edit the page where you want events to appear
Add a Custom HTML block (not a Paragraph block)
Paste the code from Step 1 and Step 2 above into the HTML block
Save and preview your page

Squarespace

Edit the page and add a Code Block
Paste the code from Step 1 and Step 2 above
Make sure "Display Source" is unchecked
Save and preview

Wix

Add an Embed HTML element to your page
Paste the code from Step 1 and Step 2 above into the code area
Adjust the element size as needed
Save and preview

Other Platforms

If your website platform supports custom HTML, add the code from the Getting Started steps. If you are unsure how to add custom HTML to your platform, check your platform's documentation or contact your web designer.

View Modes

Organisation View — "What's On"

Shows all upcoming events for your organisation, grouped by month. Best for a general "What's On" page.

<script>
  Seaty.init({
    target: '#seaty-events',
    organisation: 'lythamhall'
  });
</script>

Each event displays its name, venue, dates, times, pricing, and availability.

Event View — "Book Tickets"

Shows dates and times for a single event. Best for embedding on a page about a specific show or performance.

<script>
  Seaty.init({
    target: '#seaty-events',
    event: 'queen'
  });
</script>

Tour View

Shows all dates across a tour, including the venue for each date.

<script>
  Seaty.init({
    target: '#seaty-events',
    tour: 'summer-tour-2026'
  });
</script>

You must provide exactly one of organisation, event, or tour.

Combining Multiple Organisations

If you manage more than one organisation on Seaty — for example a main organisation plus a separate one for an annual festival or outdoor cinema series — you can combine them into a single embed by passing an array of tags. This gives you one unified "What's On" page that shows events from all of them in chronological order.

Tip: The Embed page in your organisation admin menu lists every organisation you administer with a tick-box for each. Selecting more than one automatically switches the generated code to the array form below.

<script>
  Seaty.init({
    target: '#seaty-events',
    organisation: ['lythamhall', 'lowtherhall', 'lythamassembly']
  });
</script>

When multiple sources are provided, all events are combined into a single chronological listing. Each event still shows its venue name, so visitors can see where each event takes place.

This also works with events and tours:

<script>
  Seaty.init({
    target: '#seaty-events',
    event: ['spring-concert', 'summer-gala']
  });
</script>

If only one tag is provided (whether as a string or a single-item array), the embed behaves exactly as before.

Themes

The embed supports light and dark themes. Add theme: 'dark' if your website has a dark background:

<script>
  Seaty.init({
    target: '#seaty-events',
    organisation: 'lythamhall',
    theme: 'dark'
  });
</script>

The default is 'light', which works best on white or light-coloured backgrounds. The embed background is transparent, so it blends with your website's design.

Layouts

The embed supports two layouts to suit different pages on your website.

Compact Layout (Default)

A minimal date-focused layout showing dates, times, pricing, and availability. Best for event-specific pages where your visitors already know what the event is and just need to pick a date.

Full Layout

A richer layout that shows each event as a card with its name, venue, description, dates, and a "Book" button. Best for "What's On" pages where visitors are browsing what's available.

<script>
  Seaty.init({
    target: '#seaty-events',
    organisation: 'lythamhall',
    layout: 'full'
  });
</script>

Each event card shows:

Event name (links to the event page on Seaty)
Venue name (links to the venue page)
A short description
All date/time options with pricing and availability

Event Images

When using the full layout, you can show event banner images at the top of each card. This makes the listing more visually engaging and helps visitors identify events at a glance.

<script>
  Seaty.init({
    target: '#seaty-events',
    organisation: 'lythamhall',
    layout: 'full',
    images: true
  });
</script>

Images are off by default. When enabled, each event card displays a banner image if one has been uploaded in Seaty. Events without an image display normally without a banner. Images only appear in the full layout — the compact layout is unaffected.

What Your Visitors See

Availability Indicators

Date buttons change colour automatically based on ticket availability:

Green — tickets available
Amber — selling well (limited availability remaining)
Red — almost sold out
Grey — sold out

Pricing

Prices shown include all fees, so the price your visitors see is the price they will pay.

Booking

When a visitor clicks a date, Seaty opens in a new browser tab at the booking page for that specific date. They complete their purchase on Seaty directly.

Branding

The embed includes a small "Powered by Seaty" badge at the bottom.

Configuration Reference

Option	Description
`target`	The ID of the container element, with a `#` in front (e.g. `'#seaty-events'`)
`organisation`	Your organisation tag, or an array of tags — shows all upcoming events
`event`	An event tag, or an array of tags — shows dates for one or more events
`tour`	A tour tag, or an array of tags — shows dates across one or more tours
`theme`	`'light'` (default) or `'dark'`
`layout`	`'compact'` (default) or `'full'` — full shows event cards with descriptions
`images`	`true` or `false` (default) — shows event banner images in full layout

Troubleshooting

The embed shows "Unable to load events"

Check that your organisation, event, or tour tag is correct and matches what appears in your Seaty URL. A "Try again" button will appear so visitors can retry.

The embed shows "No upcoming events at the moment"

Your events may not have any future dates. Events are automatically hidden once all their dates have passed. Suspended dates are also hidden.

The embed appears but looks too narrow or wide

The embed fills the width of its container. Adjust the width of the container element on your page, or place it within a narrower column in your website layout.

I changed an event but the embed still shows old information

Event data is cached on our servers and typically updates within a few minutes of changes made in Seaty.

The embed does not appear at all

Make sure the container element (<div id="seaty-events"></div>) appears in your page before the script code. On WordPress, make sure you are using a Custom HTML block, not a Paragraph block.

Need Help?

If you have trouble setting up the embed, contact us at support@seaty.co.uk and we will help you get it working on your website.