Custom Buttons

This page shows how to build a button on your own website to open a Tryon scene.

Customize a button to open Tryon

Add a custom “Try it on” button to your website. Clicking it creates and displays an iframe that loads the Tryon scene. Clicking the close button removes the iframe and shows the original page again.

Before using it, replace <sceneId> with the actual 32-character scene ID.

<button class="tryon-button" id="openTryon" type="button">Try it on</button>

<div class="tryon-overlay" id="tryonOverlay" hidden>
  <button class="tryon-close" id="closeTryon" type="button" aria-label="Close Tryon">×</button>
  <div id="tryonContainer"></div>
</div>

<style>
  .tryon-button {
    padding: 12px 24px;
    border: 0;
    border-radius: 8px;
    background: #222;
    color: #fff;
    cursor: pointer;
  }

  .tryon-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    overflow: auto;
    background: #fff;
  }

  .tryon-overlay[hidden] {
    display: none;
  }

  .tryon-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .tryon-overlay iframe {
    display: block;
    width: 100%;
    height: max(540px, 100dvh);
    border: 0;
  }
</style>

<script>
  const overlay = document.querySelector("#tryonOverlay");
  const container = document.querySelector("#tryonContainer");
  const openButton = document.querySelector("#openTryon");
  const closeButton = document.querySelector("#closeTryon");

  openButton.addEventListener("click", () => {
    const iframe = document.createElement("iframe");
    iframe.title = "Tryon experience";
    iframe.src = "https://www.kivicube.com/tryon-scenes/<sceneId>";
    iframe.allow = "camera; autoplay; microphone; clipboard-write; web-share";
    container.replaceChildren(iframe);
    overlay.hidden = false;
    closeButton.focus();
  });

  closeButton.addEventListener("click", () => {
    overlay.hidden = true;
    container.replaceChildren();
    openButton.focus();
  });
</script>

Open a Tryon scene with an iframe

Set the iframe src to https://www.kivicube.com/tryon-scenes/<sceneId>. Copy the scene link from the Tryon Platform.

To specify a language, add a query parameter to the URL. See the Advanced API.

Serve the host page over HTTPS and add allow to the iframe with the following values:

Attribute	Purpose
camera	Lets the scene use the camera for try-on.
autoplay	Lets the scene play videos automatically.
microphone	Reserves microphone access; the current recording flow does not capture microphone audio.
clipboard-write	Lets the scene copy a share link to the clipboard.
web-share	Lets the scene invoke the system share feature.

Initialize and show

Load on click: In the example above, clicking “Try it on” creates the iframe, sets attributes such as src and allow, then shows the overlay. The Tryon scene starts loading at that point, so the user may wait briefly before seeing it.

Load in advance: To show the scene sooner after a click, create the iframe when the host page initializes and let the scene load in the background. The button then only reveals the existing iframe. The scene appears immediately only if loading has finished. This approach uses network and runtime resources earlier, and the iframe should keep its intended dimensions while loading.

Close and destroy

When closing Tryon, remove the entire iframe element from the page. Hiding the iframe alone does not stop the scene code. In particular, if a try-on session is in progress, it may continue running in the background after the iframe is hidden.

After the iframe is removed, opening it again reloads the scene without restoring the previous try-on state. Loading or camera permission may be needed again.

Iframe container best practices

The component inside the Tryon scene page has a minimum height of 540px. If the iframe container is shorter than 540px, some scene content may not fit.

To support viewports shorter than 540px, keep the iframe at least 540px high and allow the outer container to scroll vertically.