iJewel3D Docs

Appearance

View the maintained iframe demo and its source.

iframe Viewer Page: Complete Example ​

This is the page that runs inside the iframe. Host it on your server or CDN.

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>Wedding Band Viewer</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body, #root { width: 100%; height: 100%; overflow: hidden; }
  </style>
</head>
<body>
  <div id="root"></div>

  <script src="https://releases.ijewel3d.com/libs/webgi-v0/bundle-0.22.0.js"></script>
  <script src="https://releases.ijewel3d.com/libs/mini-viewer/0.6.11/bundle.nowebgi.iife.js"></script>

  <script>
    const root = document.getElementById('root');
    const params = new URLSearchParams(window.location.search);
    const showBuiltInWbbUi = params.get('ui') !== 'false';

    const project = {
      name: 'Wedding Band Builder',
      version: 'v5',
      basePath: params.get('basePath') || 'https://your-cdn.com/wbb-assets/',
      plugins: {
        WeddingBandBuilder: {
          manifestUrl: params.get('manifest') || 'wedding-band-project.json',
        },
      },
    };

    new ijewelViewer.Viewer(root, project, {
      showCard: false,
      showSwitchNode: false,
      showUiButtons: showBuiltInWbbUi,
      showConfigurator: false,
      showZoomButtons: showBuiltInWbbUi,
      enableZoom: true,
      hideWbbUi: !showBuiltInWbbUi,
    });

    // WeddingBandBuilder installs its postMessage command/event exposure when
    // the plugin initializes. Do not add a second message listener or event
    // forwarder here: duplicate bridges produce duplicate replies and events.
    // The host should wait for the documented "ready" event before sending
    // commands or queries.
  </script>
</body>
</html>