iJewel3D Docs

Appearance

iframe Host Page: Complete Example ​

A host page with controls that communicate with the iframe viewer via postMessage.

Back to Embedding guide

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Our Wedding Bands</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; background: #f5f5f5; }

    .page { max-width: 1200px; margin: 0 auto; padding: 24px; }
    h1 { font-size: 24px; margin-bottom: 16px; }

    .viewer-container {
      width: 100%;
      height: 70vh;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .viewer-container iframe { width: 100%; height: 100%; border: none; }

    .controls { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
    .controls button {
      padding: 8px 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
      font-size: 14px;
    }
    .controls button:hover { background: #f0f0f0; }

    .price-display {
      margin-top: 24px;
      font-size: 28px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="page">
    <h1>Design Your Wedding Band</h1>

    <div class="viewer-container">
      <iframe
        id="wbb"
        src="https://your-site.com/wbb-viewer.html"
        allow="camera; xr-spatial-tracking"
      ></iframe>
    </div>

    <div class="controls">
      <button onclick="send('setProfile', [0])">D-Shape</button>
      <button onclick="send('setProfile', [1])">Flat</button>
      <button onclick="send('setProfile', [2])">Court</button>
      <button onclick="send('setMaterial', [1, 'White', 'Polished'])">White Gold</button>
      <button onclick="send('setMaterial', [1, 'Yellow', 'Polished'])">Yellow Gold</button>
      <button onclick="send('setMaterial', [1, 'Rose', 'Polished'])">Rose Gold</button>
      <button onclick="send('switchBand', ['her'])">Her Ring</button>
      <button onclick="send('switchBand', ['his'])">His Ring</button>
    </div>

    <div class="price-display" id="price">Loading...</div>
  </div>

  <script>
    const iframe = document.getElementById('wbb');
    let reqId = 0;

    function send(method, args = []) {
      iframe.contentWindow.postMessage({
        id: `req-${++reqId}`, method, args,
      }, '*');
    }

    window.addEventListener('message', (e) => {
      const data = e.data;
      if (!data) return;

      // Update price display on price events
      if (data.event === 'price:updated' && data.data?.pricing) {
        document.getElementById('price').textContent =
          `$${data.data.pricing.totalUsd.toFixed(2)}`;
      }
    });
  </script>
</body>
</html>