Embed your events on your own site

Ithas Fire widgets let you sell tickets directly from your own website. Buyers never have to leave your page — the entire flow, from browsing to payment confirmation, lives in an embedded iframe.

Widgets available

Widget	What it shows
Event grid	Upcoming events for your org or venue, as cards
Event detail	One event with ticket picker, quantities, and prices
Calendar	Month view of your events
Checkout	Two-step guest checkout (details → payment) + confirmation

The grid and detail widgets transition into checkout automatically — one iframe, full flow.

Getting your embed code

1. Go to /admin/{your-slug}/embeds.
2. Click New embed and enter the domain that will host the widget (e.g. example.com).
3. Pick a widget type (grid, detail, or calendar) and any filters (e.g. a single event ID).
4. Use the Preview to check how it'll look.
5. Click Copy snippet to grab the iframe code.

Paste into your site where you want the widget to appear.

Embed snippet

Standard paste:

<iframe
  src="https://ithasfire.com/embed/{embedId}"
  width="100%"
  height="600"
  style="border:none; overflow:hidden;"
  loading="lazy"
  referrerpolicy="strict-origin"
  allow="payment"
  title="Events"
></iframe>
<script src="https://ithasfire.com/embed/hf-resize.js" async></script>

The resize script is optional but recommended — it listens for the iframe's postMessage events and resizes the frame to fit its content so you don't see scroll bars or empty space.

Already embedded with an older copy of this snippet? Add referrerpolicy="strict-origin" to your existing <iframe> — the widget uses it to verify your site against the domain you registered, and without it some browsers (notably Firefox on sites with a restrictive site-wide Referrer-Policy) can't identify your domain and the widget won't load.

Theming with query params

Override the default colours by appending hex codes (no #):

?brandColor=FF5721&bg=F0F3F9&fontColor=181818&accentColor=35589A

Param	What it styles	Default
brandColor	Primary buttons (Pay, Add to cart)	FF5721
bg	Widget background	F0F3F9
fontColor	Primary text	181818
accentColor	Headings, dividers, structural accents	35589A

Advanced: the JavaScript SDK

If you need runtime control (opening in a modal, passing a promo code, subscribing to events), use the SDK instead of a raw iframe:

<div id="events"></div>
<script src="https://ithasfire.com/embed/hf-embed.js"></script>
<script>
  HF.createWidget({
    target: "#events",
    embedId: "your-embed-id",
    mode: "inline", // or "modal"
    height: "auto", // or a number in pixels
    theme: { brandColor: "FF5721", bg: "F0F3F9" },
    promoCode: "EARLY10", // auto-applies at checkout
    onReady: () => console.log("widget loaded"),
    onNavigate: (route) => console.log("moved to", route),
    onOrderComplete: (order) => console.log("ticket sold", order.id),
  });
</script>

onOrderComplete is the hook most sites want — fire a thank-you modal, bump an analytics counter, or redirect to a custom success page.

Setup requirements

• Domain added in admin — widgets only load on domains you've registered under /admin/{your-slug}/embeds
• Content-Security-Policy — if your site uses a strict CSP, allow frame-src https://ithasfire.com
• allow="payment" on the iframe — required for Apple Pay / Google Pay via the Payment Request API; the default snippet includes this

What buyers see: security checks

Two protections run on the live widget. Neither needs any setup from you, but it helps to know what your buyers might encounter:

• Automatic security check before payment. When bot protection is switched on for the platform, guest checkout in your widget includes a Cloudflare security check just above the Continue to payment button. It usually verifies the buyer in the background with no interaction; occasionally it shows a short interactive challenge instead. Until it passes, the form shows Complete the verification to continue and the order won't submit.
• Domain enforcement. The widget only works on the domain you registered for the embed (plus ithasfire.com itself, so the admin Preview keeps working). www. doesn't matter — registering example.com also covers www.example.com, and vice versa. On any other domain the widget refuses to load or take payment, and buyers see: "This widget isn't available on this domain. If you're the organizer, check your embed settings."

Together these are why your embed can't be lifted onto someone else's site: the domain allowlist blocks unauthorised pages outright, and the security check stops automated checkout on the pages that remain.

If a legitimate page of yours is being blocked, check that the domain saved on the embed (under /admin/{your-slug}/embeds) matches the site hosting the iframe, and that your <iframe> carries the referrerpolicy="strict-origin" attribute from the snippet above — without it some browsers can't prove your domain to the widget.

Gotchas

• Height is clamped at 2000 px by the resize script — very long event lists become scrollable inside the iframe rather than growing indefinitely.
• Stripe 3-D Secure and Amazon Pay may redirect the top window during payment; the widget handles the return automatically and cleans up query params.
• Single-event embeds skip the grid entirely and drop buyers straight into the detail view with a ticket picker.
• Calendar widget lives at a separate path: /embed/calendar/{embedId}.

Testing before you launch

Use the Preview pane in the admin UI to iterate on theming and filters without touching your site. When you're happy, copy the snippet. Because the embedId is stable, you can change widget settings in the admin later without updating your site's code — the same iframe reflects your new settings on the next page load.