Skip to main content
Equaticket
Guide· 5 min read

How to Embed Tickets on Your Website

Sending your audience to a third-party ticketing page means losing them to distractions, slow load times, and checkout flows that don't look like you. The Equaticket embed widget solves this by bringing the full checkout experience onto your own site — your brand, your URL, their tickets.

This guide walks you through every embed option and shows you how to get up and running in under ten minutes.

Why Embed Tickets Instead of Linking Out?

When buyers stay on your site:

  • Conversion rates improve. Every redirect is an opportunity to lose someone. Keeping checkout on your domain eliminates that step.
  • Your brand stays front and center. No Equaticket header, no unfamiliar navigation — just your site, with tickets.
  • Analytics stay clean. Conversions happen on your domain, so your Google Analytics or pixel tracking sees the complete funnel.

Embed Modes

Equaticket supports two embed modes. Choose based on how your site is structured.

Inline Embed

The inline embed renders ticket types, quantities, and the checkout flow directly in the flow of your page — no overlay, no button required. It's ideal when you have a dedicated event page on your site.

<div data-eq-event-id="YOUR_EVENT_ID"></div>
<script src="https://widget.equaticket.com/v1/embed.js" async></script>

Replace YOUR_EVENT_ID with the event ID from your Equaticket dashboard. The widget auto-sizes to its container, so it works whether you're embedding in a single column or a full-width section.

The modal mode attaches to any button or link on your page. On desktop, clicking opens a centered overlay; on mobile, it slides up as a bottom sheet. Use this when you want a "Buy Tickets" button to trigger checkout without navigating away.

<button data-eq-event-id="YOUR_EVENT_ID" data-eq-mode="modal">
  Buy Tickets
</button>
<script src="https://widget.equaticket.com/v1/embed.js" async></script>

You can style the button however you like — the data-eq-mode="modal" attribute is all the widget needs to wire it up.

Where to Find Your Event ID

  1. Log in to your Equaticket dashboard.
  2. Open the event you want to embed.
  3. Go to Distribute → Embed.
  4. Copy the event ID shown there. It looks like evt_01abcdef1234.

The Distribute tab also shows a pre-built snippet for both inline and modal modes, with your event ID already filled in.

Platform-Specific Instructions

WordPress

Install the Equaticket plugin from the WordPress plugin directory. Once activated, use the [equaticket id="YOUR_EVENT_ID"] shortcode anywhere in your content, or use the Gutenberg block in the block editor — search for "Equaticket" in the block inserter. Both support inline and modal modes through the block settings panel.

Squarespace

Equaticket has a native Squarespace extension. Install it from the Squarespace Extensions marketplace and follow the setup flow. The extension supports all three embed modes (inline, modal, and button link) with a visual config panel that previews your event title and date automatically.

If you'd prefer to use the script snippet directly, add a Code Block to your Squarespace page and paste the inline embed snippet there.

Wix

Install the Equaticket Wix app from the Wix App Market. It adds an iframe embed component to your page editor. The app relays eq:ticket_added, eq:checkout_started, and eq:purchase_complete postMessage events through the Wix iframe boundary so your Wix analytics and pixels can still track the full funnel.

Webflow, Framer, and other site builders

For any site builder that allows custom code or HTML embeds, paste the inline embed snippet into an HTML embed component. Most builders have one. If yours requires script tags to be added to the page <head>, add the <script> tag there and place the <div data-eq-event-id="..."> element wherever you want the widget to appear.

Conversion Tracking

The widget fires three postMessage events you can intercept for analytics:

  • eq:ticket_added — a buyer added a ticket to their cart
  • eq:checkout_started — the buyer proceeded to payment
  • eq:purchase_complete — the order was confirmed

Map these to your Google Analytics 4 events, Meta Pixel custom events, or GTM triggers by listening on the parent window:

window.addEventListener("message", (event) => {
  if (event.origin !== "https://widget.equaticket.com") return;
  if (event.data?.type === "eq:purchase_complete") {
    gtag("event", "purchase", { value: event.data.total, currency: "USD" });
  }
});

Availability Is Always Live

The widget always fetches live ticket availability — it never reads from a cached snapshot. If your event is sold out, buyers see the waitlist option immediately. If you have a countdown-style ticket release, the widget will reflect the new availability the moment tickets go live.

Troubleshooting

The widget doesn't appear. Make sure the script tag is present and that you've replaced YOUR_EVENT_ID with your actual event ID. Check the browser console for errors — a 404 on the widget script usually means a typo in the script URL.

Checkout opens a new tab instead of staying inline. This happens when your page's Content Security Policy blocks the widget iframe. Add https://widget.equaticket.com to your frame-src directive.

The widget looks unstyled on my site. The widget ships with its own styles scoped inside the embed container. If you see unstyled HTML, your site's global CSS may be leaking into the embed. Check for aggressive CSS resets that target iframe or * selectors.

---

Once you have the widget running, head to Distribute → Embed in your dashboard to grab a shareable event link and find platform-specific setup guides. If you run into anything not covered here, reach out via the in-app chat.

Written byEquaticketGuideembedwidgetwebsite
← Back to Blog

More from the blog