— Docs · Embed

Drop EZ Event Registration into your existing site.

Two lines of HTML and you have the full registration experience — branded to your tenant theme, COPPA-safe, wired to your Stripe. Works on Wix, Squarespace, WordPress, Webflow, or anywhere you can paste an HTML embed.

— Section 01 · Quick start

Two lines and you're embedded.

Copy this into any HTML block on your existing site. Replace your-club with your tenant subdomain (or your custom domain if you have one connected).

<div id="ezevent-embed">
  <iframe
    src="https://your-club.ezeventregistration.com/training?embed=true"
    data-ezevent-embed
    style="width: 100%; min-height: 600px; border: none;"
    loading="lazy"
    title="Your Club Events"
  ></iframe>
  <script src="https://your-club.ezeventregistration.com/embed.js" async></script>
</div>

Heads up.Embeds are blocked until you allowlist the host page's domain in Settings → Embed. See Allowed domains below.

— Section 02 · The flow

Three steps, end to end.

01
Allowlist your domain.
In the admin app, open Settings → Embedand add the exact hostname of the site you'll paste the snippet into — for example club.example.org. One host per line, lowercase, no scheme, no path.
02
Generate your snippet.
On the same page, the snippet builder lets you pick all events or a single event, set width and minimum height, and copy a ready-to-paste block. Values are pre-filled with your subdomain.
03
Paste & publish.
Drop the snippet into an HTML widget on your CMS. The iframe loads the registration UI in embed mode (no global header or footer); the loader script sizes it to fit content.

Open Embed Settings Don't have an account?

— Section 03 · Anatomy

What each piece does.

Two pieces: an iframe that loads your registration site in embed mode, and a small loader script that listens for resize messages from inside the iframe. Both must be present — the iframe alone will render at a fixed height with internal scrollbars.

The iframe

src: Points at /training (all events) or /training/{eventId} (single event) on your tenant origin, with ?embed=true.
data-ezevent-embed: Required marker. The loader script only resizes iframes that carry this attribute.
loading: Use "lazy" to defer off-screen iframes — recommended.
title: Accessibility label. Use a description that names the org and what's inside.
style: Width and min-height live here. Height is taken over by the resize protocol once the iframe loads.

The loader script

src: Always loaded from /embed.js on the same tenant origin. The loader is small (~1KB) and ships with no dependencies.
async: Non-blocking. The script self-initializes on DOMContentLoaded.
What it does: Tracks each iframe with the data-ezevent-embed marker, listens for ezevent:* postMessage events from inside, and updates the host iframe's height to match the inner content.
Origin check: Messages are only honored when event.origin matches the iframe's src origin. Cross-origin spoofing is rejected.

— Section 04 · Variants

Pick the shape that fits the page.

All events

Embed your full public catalog. Use this on a generic /events or /register page.

<iframe
  src="https://your-club.ezeventregistration.com/training?embed=true"
  data-ezevent-embed
  style="width: 100%; min-height: 600px; border: none;"
  loading="lazy"
  title="Your Club Events"
></iframe>
<script src="https://your-club.ezeventregistration.com/embed.js" async></script>

Single event

Embed one event's listing + registration flow. Use this when each event has its own marketing page.

<iframe
  src="https://your-club.ezeventregistration.com/training/EVENT_ID?embed=true"
  data-ezevent-embed
  style="width: 100%; min-height: 800px; border: none;"
  loading="lazy"
  title="Summer Elite Clinic — Registration"
></iframe>
<script src="https://your-club.ezeventregistration.com/embed.js" async></script>

— Section 05 · Sizing & theming

It resizes itself, and inherits your accent.

Auto-resize protocol

The embedded page measures its own content and posts a message to the parent window whenever the height changes — typically when navigating between the catalog, an event detail, the registration form, and the success screen.

// Sent automatically by the embedded iframe whenever its content
// height changes. embed.js listens for these and updates the host
// iframe's height to match.
window.parent.postMessage(
  { type: "ezevent:resize", height: 924 },
  "*"
);

The loader clamps height to the range 320px – 12000px. Set min-heighton the iframe to whatever the registration form needs at its tallest, so the first paint doesn't collapse before the first resize message arrives.

Theming

The embedded UI uses your tenant's configured theme — colors, logo, and accent — set in Settings → Branding. There are no embed-specific overrides; what your registrants see on your hosted registration site is what's rendered inside the iframe.

Embed mode hides the public site header and footer, so the widget visually inherits whatever surrounding chrome your host site provides. Wrap the embed in your own container if you want padding, backgrounds, or borders.

postMessage events. The iframe emits three message types you can also listen for from your own host page: ezevent:ready when the embed boots, ezevent:resize with a numeric height on every content change, and ezevent:navigate when the flow advances to a new screen.

— Section 06 · Security

Embeds are allowlisted, server-side.

Embeds are blocked by default. To enable a host, add its exact hostname to the allowlist in Settings → Embed. The iframe will refuse to render from a parent whose origin isn't on the list.

The allowlist is enforced via the response Content-Security-Policy frame-ancestors directive — it cannot be bypassed by changing client code.

Hostname rules

One host per line, exact match (no wildcards).
Lowercase, no scheme — club.example.org, not https://club.example.org.
No paths, query strings, or fragments.
No ports.
No trailing dots.

Examples

✓ Allowed: club.example.org; programs.partner.org; www.example.org
✗ Rejected: https://club.example.org; *.example.org; club.example.org/events; club.example.org:8080

— Section 07 · Troubleshooting

When things look off.

The iframe is blank or shows a blocked-frame error.: Your host domain isn't on the allowlist. Open Settings → Embed, add the exact hostname of the page you're testing from, and reload. The browser console will log a CSP frame-ancestors violation when this is the cause.
The iframe renders but never resizes — I see internal scrollbars.: The loader script isn't running on the host page. Make sure the <script src="…/embed.js"> is on the same page as the iframe and that data-ezevent-embed is present on the iframe element. Some CMS HTML widgets strip data attributes — paste into a raw HTML block instead.
The first paint is too short and shifts when the form loads.: Increase min-height on the iframe. A reasonable default for the registration flow is 800px; 600px is fine for a catalog-only embed.
Can I embed only certain events?: Yes — use the single-event variant with the event's ID in the path. Hide the event from your public catalog (in the event's settings) if you only want it reachable through the embed.
Does it work on Wix / Squarespace / WordPress / Webflow?: Yes. Use each platform's native HTML embed block (often called “Embed Code”, “Custom HTML”, or “Code Injection”) and paste the snippet unchanged.

— Get your snippet

Generate the embed code for your tenant.

Open Embed Settings Start free trial