Skip to main content
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

For event-specific embeds (ticket sales, vendor application, venue map), open your event dashboard and navigate to the relevant section. Look for the Get Embed Code button. Treasure generates a snippet with your event’s slug and a unique iframe ID pre-filled. For the host profile embed, go to your profile settings and select Get Embed Code. Copy the snippet and paste it into your website’s HTML wherever you want the embed to appear.

​
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. Venue maps are available on Starter and Pro plans. 
<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.