iJewel3D Docs

Appearance

Direct Integration: Complete Example ​

A single HTML file with the built-in UI panel. Copy this as a starting point.

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 Builder</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; }
    #viewer-root { width: 100vw; height: 100vh; }
  </style>
</head>
<body>
  <div id="viewer-root"></div>

  <!-- Load the mini-viewer (includes 3D engine) -->
  <script src="https://releases.ijewel3d.com/libs/mini-viewer/latest/bundle.iife.js"></script>

  <script>
    const root = document.getElementById('viewer-root');

    const project = {
      name: 'Wedding Band Builder',
      version: 'v5',
      basePath: 'https://your-cdn.com/wbb-assets/',
      plugins: {
        WeddingBandBuilder: {
          manifestUrl: 'wedding-band-project.json',
          showUI: true,
        },
      },
    };

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

    // Wait for the viewer and plugin to initialize
    window.addEventListener('ijewel-viewer-ready', (e) => {
      const viewer = e.detail.viewer;
      const api = viewer.getPluginByType('WeddingBandBuilder').controller;

      // Example: log every price update
      api.events.on('price:updated', (data) => {
        document.title = `Ring - $${data.pricing.totalUsd.toFixed(2)}`;
      });
    });
  </script>
</body>
</html>