> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ontreasure.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed Treasure checkout and venue maps on your site

> Add a ticket checkout, vendor application form, interactive venue map, or host profile to any website using Treasure's iframe embed snippets.

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.

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

## 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.

<Warning>
  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.
</Warning>

## 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.

<CodeGroup>
  ```html ticket-sales-embed.html theme={null}
  <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>
  ```
</CodeGroup>

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.

<CodeGroup>
  ```html vendor-application-embed.html theme={null}
  <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>
  ```
</CodeGroup>

***

## 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.

<CodeGroup>
  ```html venue-map-embed.html theme={null}
  <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>
  ```
</CodeGroup>

***

## 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.

<CodeGroup>
  ```html host-profile-embed.html theme={null}
  <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>
  ```
</CodeGroup>

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.

<Note>
  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.
</Note>

## 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](/account/pricing) for plan details.