自定义试穿按钮

本页介绍如何在自己的网页中制作试穿按钮，并用它打开 Tryon 场景。

自定义试穿按钮，打开 Tryon

在您的网站自定义添加“立即试穿”按钮。点击按钮后，创建加载 Tryon 场景的 iframe 并显示；点击关闭按钮后，移除 iframe 并显示原页面。

使用前将 <sceneId> 替换为实际的 32 位场景 ID。

html

<button class="tryon-button" id="openTryon" type="button">立即试穿</button>

<div class="tryon-overlay" id="tryonOverlay" hidden>
  <button class="tryon-close" id="closeTryon" type="button" aria-label="关闭试衣体验">×</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 试衣体验";
    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>

使用 iframe 打开 Tryon 场景

将 iframe 的 src 设为 https://www.kivicube.com/tryon-scenes/<sceneId>。场景链接可从 Tryon 平台复制。

需要指定语言时，可在链接中添加查询参数，详见高级API。

宿主页面应使用 HTTPS，并在 iframe 上添加 allow，允许以下属性：

属性	用途
`camera`	允许场景调用摄像头进行试衣。
`autoplay`	允许场景自动播放视频。
`microphone`	预留麦克风权限；当前录制流程不采集麦克风。
`clipboard-write`	允许复制分享链接到剪贴板。
`web-share`	允许调用系统分享功能。

初始化显示

点击后加载： 上方示例在用户点击“立即试穿”后，才动态创建 iframe、设置 src 和 allow 等属性，并显示覆盖层。Tryon 场景此时才开始加载，用户可能需要等待片刻才能看到场景。

提前加载： 如果希望用户点击按钮后尽快看到场景，可在宿主页面初始化时提前创建 iframe，让场景在后台加载；点击按钮时只显示已创建的 iframe。只有场景已加载完成，才能做到点击后立即呈现。这种方式会提前占用网络和运行资源，加载期间也应保持 iframe 所需的实际尺寸。

关闭与销毁

关闭 Tryon 时，建议从页面中移除整个 iframe 标签。如果只隐藏 iframe，场景代码不会因此停止。尤其在试衣体验进行中，隐藏后体验仍可能在后台继续运行。

移除 iframe 后再次打开会重新加载场景，不会保留上一次的试衣状态，可能需要重新等待加载或授权。

iframe 容器的最佳实践

Tryon 场景页内部组件的最小高度为 540px。如果 iframe 容器高度小于 540px，场景内容可能无法完整显示。

如需兼容高度低于 540px 的视口，建议让 iframe 保持至少 540px 高，并允许外层容器纵向滚动。

自定义试穿按钮 ​