Embed Treasure checkout and venue maps on your site

Treasure provides embeddable iframes that let you bring your event’s checkout, vendor application form, venue map, or host profile directly onto your own website. Visitors can purchase tickets, apply as vendors, or explore the venue layout without ever leaving your site.

Embedded checkout supports payments natively. No additional payment setup is required — Stripe processes payments directly within the iframe.

How embeds work

Each embed is a self-contained <iframe> that loads a Treasure page. A small JavaScript snippet listens for postMessage events from the iframe and automatically adjusts the frame’s height to match its content, so you never end up with a fixed-height box or unwanted scrollbars.

The sandbox attribute on the iframe is required for payments to work correctly. Do not remove or modify the sandbox value — removing allow-popups or allow-same-origin will break the Stripe payment flow.

Getting an embed code

All four embeds are generated from one place. From your event dashboard, open Social Media → Embed, then pick from Embed Type:

Embed Type	What it embeds
Ticket Sales	The ticket checkout flow
Table Application	The vendor application form
Venue Map	Your interactive venue map
Profile	Your host profile and upcoming events

Treasure generates a snippet with your event’s slug (or your username for a Profile embed) and a unique iframe ID pre-filled. Copy it and paste it into your website’s HTML wherever you want the embed to appear. Two options adjust the generated snippet:

Tracking link — attach one of your tracking links so visits and purchases through this embed are attributed to it. Leave it as None for no attribution.
For the Venue Map embed, a toggle controls whether vendors are shown on the embedded map. It is unavailable when your event’s vendor section is hidden.

The Venue Map embed only has something to show once your map is published. See Venue maps.

Ticket sales embed

Embed the full end-to-end checkout flow for a specific event. Visitors can browse ticket types, enter their details, and complete payment without leaving your site.

<div class="iframe-section">
  <iframe
    style="width: 100%; border: none; border-radius: 10px; padding: 0px"
    id="treasure-embed-tickets-my-event-2024"
    sandbox="allow-same-origin allow-forms allow-scripts allow-popups allow-popups-to-escape-sandbox"
    src="https://www.ontreasure.com/events/my-event-2024/embed-checkout?embed=true&iframeId=treasure-embed-tickets-my-event-2024"
    title="Ticket Booking"
    loading="lazy"
    allow="fullscreen; payment"
  ></iframe>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    window.addEventListener("message", function (event) {
      if (
        event.origin === "https://www.ontreasure.com" &&
        event.data &&
        typeof event.data === "object" &&
        event.data.height &&
        event.data.iframeId
      ) {
        const iframe = document.getElementById(event.data.iframeId);
        if (iframe) {
          iframe.style.height = event.data.height + "px";
        }
      }
    });
  });
</script>

Replace my-event-2024 with your event’s slug and update the id and iframeId values accordingly.

Vendor application embed

Embed the vendor intake form so vendors can apply directly from your website. Applications submitted through the embed appear in your vendor dashboard just like applications submitted on Treasure.

<div class="iframe-section">
  <iframe
    style="width: 100%; border: none; border-radius: 10px; padding: 0px"
    id="treasure-embed-application-my-event-2024"
    sandbox="allow-same-origin allow-forms allow-scripts allow-popups allow-popups-to-escape-sandbox"
    src="https://www.ontreasure.com/events/my-event-2024/embed-application?iframeId=treasure-embed-application-my-event-2024"
    title="Vendor Application"
    loading="lazy"
    allow="fullscreen; payment"
  ></iframe>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    window.addEventListener("message", function (event) {
      if (
        event.origin === "https://www.ontreasure.com" &&
        event.data &&
        typeof event.data === "object" &&
        event.data.height &&
        event.data.iframeId
      ) {
        const iframe = document.getElementById(event.data.iframeId);
        if (iframe) {
          iframe.style.height = event.data.height + "px";
        }
      }
    });
  });
</script>

Venue map embed

Embed the interactive venue map so attendees and vendors can explore table layouts and booth locations on your website. Publishing a venue map requires a Starter or Pro plan.

<div class="iframe-section">
  <iframe
    style="width: 100%; border: none; border-radius: 10px; padding: 0px"
    id="treasure-embed-map-my-event-2024"
    sandbox="allow-same-origin allow-forms allow-scripts allow-popups allow-popups-to-escape-sandbox"
    src="https://www.ontreasure.com/events/my-event-2024/venue-map?iframeId=treasure-embed-map-my-event-2024"
    title="Vendor Map"
    loading="lazy"
    allow="fullscreen; payment"
  ></iframe>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    window.addEventListener("message", function (event) {
      if (
        event.origin === "https://www.ontreasure.com" &&
        event.data &&
        typeof event.data === "object" &&
        event.data.height &&
        event.data.iframeId
      ) {
        const iframe = document.getElementById(event.data.iframeId);
        if (iframe) {
          iframe.style.height = event.data.height + "px";
        }
      }
    });
  });
</script>

Host profile embed

Embed your Treasure host profile with a list of your upcoming events. This is useful for personal websites, creator pages, or anywhere you promote multiple events at once.

<div class="iframe-section">
  <iframe
    style="width: 100%; border: none; border-radius: 10px; padding: 0px"
    id="treasure-embed-profile-your-username"
    sandbox="allow-same-origin allow-forms allow-scripts allow-popups allow-popups-to-escape-sandbox"
    src="https://www.ontreasure.com/u/your-username/embed?iframeId=treasure-embed-profile-your-username"
    title="Host Profile"
    loading="lazy"
    allow="fullscreen; payment"
  ></iframe>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    window.addEventListener("message", function (event) {
      if (
        event.origin === "https://www.ontreasure.com" &&
        event.data &&
        typeof event.data === "object" &&
        event.data.height &&
        event.data.iframeId
      ) {
        const iframe = document.getElementById(event.data.iframeId);
        if (iframe) {
          iframe.style.height = event.data.height + "px";
        }
      }
    });
  });
</script>

Replace your-username with your Treasure username and update the id and iframeId values to match.

Auto-resize behavior

The JavaScript snippet included with each embed listens for message events posted by the iframe. When the Treasure page inside the iframe changes height (for example, as a multi-step checkout progresses), it sends a message containing the new height in pixels and the iframe’s ID. The script finds the matching iframe by ID and updates its style.height accordingly. This means the iframe always fits its content exactly — no fixed heights, no internal scrollbars.

If you place multiple Treasure embeds on the same page, each iframe must have a unique id value. The auto-resize script routes height updates by ID, so duplicate IDs will cause one iframe to override another’s height.

Need help with integration?

The Pro plan includes a dedicated Embedded Checkout Support Team to help you integrate Treasure embeds into your website. See Pricing for plan details.

Get Started

For Hosts

For Vendors

Tools & Features

Account

Embed Treasure checkout and venue maps on your site

How embeds work

Getting an embed code

Ticket sales embed

Vendor application embed

Venue map embed

Host profile embed

Auto-resize behavior

Need help with integration?

​How embeds work

​Getting an embed code

​Ticket sales embed

​Vendor application embed

​Venue map embed

​Host profile embed

​Auto-resize behavior

​Need help with integration?

How embeds work

Getting an embed code

Ticket sales embed

Vendor application embed

Venue map embed

Host profile embed

Auto-resize behavior

Need help with integration?