Quick Start

Three ways to add the Wedding Band Builder to your site, from fastest to most flexible.

Prerequisites

• iJewel3D Platform access with the Wedding Band Builder feature enabled.
• A published project with your configured profiles, metals, finishes, and scene settings. → Assets Setup

Requirements

Requirement	Minimum
Rendering	WebGL 2.0
Chrome / Edge	90+
Firefox	90+
Safari	15+
iOS	15+ (Safari)
Android	10+ (Chrome)
Bundle size	~2-3 MB gzipped (initial load)

Option A: Share Link (30 seconds)

The fastest path. Get a direct link to your configurator from the iJewel3D dashboard, no code required.

1. Open your project in the iJewel3D dashboard
2. Click Share → Copy Link
3. Share the URL with customers, embed it in an email, or link from your website

Best for: testing, sharing with stakeholders, quick prototyping.

Option B: iframe Embed (1 minute)

Drop the configurator into any website or CMS with a single HTML tag.

<iframe
  src="https://your-viewer-page.com/?manifest=YOUR_MANIFEST_URL&ui=true"
  width="100%"
  height="700"
  frameborder="0"
  allow="camera; xr-spatial-tracking"
  style="border-radius: 12px;"
></iframe>

Best for: Shopify, WordPress, Wix, or any CMS where you can add HTML.

WARNING

The iframe needs a parent container with explicit dimensions. On CMS platforms like Shopify, the parent container may have zero height by default, which causes the iframe to collapse. Set the height on the iframe element directly or on its parent.

→ Full iframe guide · Shopify · WooCommerce

Option C: Script Tag (5 minutes)

Full control with direct JavaScript access.

<!-- 1. Container -->
<div id="wedding-band-builder" style="width: 100%; height: 700px;"></div>

<!-- 2. Load the viewer -->
<script src="https://cdn.ijewel3d.com/mini-viewer/latest/bundle.iife.js"></script>

<!-- 3. Initialize -->
<script>
  window.addEventListener('ijewel-viewer-ready', async (e) => {
    const viewer = e.detail.viewer;
    const wbb = viewer.getPluginByType('WeddingBandBuilder');

    await wbb.loadProject('YOUR_MANIFEST_URL', {
      showUI: true,
      theme: { preset: 'midnight' },
    });

    const api = wbb.controller;

    // Listen for price changes
    api.events.on('price:updated', ({ bandName, pricing }) => {
      console.log(`${bandName}: $${pricing.totalUsd}`);
    });
  });
</script>

Best for: custom websites, React/Vue/Angular apps, full API access.

→ Full script tag guide · Framework examples

What's Next?

Choose your path based on what you need:

I want to...	Go to
Customize the look and feel	Theming & Branding
Build my own UI from scratch	Custom UI (Headless)
Set up pricing	Pricing Engine
Add to Shopify / WooCommerce / etc.	E-Commerce Platforms
See the full API	API Reference
Understand the measurement system	Ring Measurements Guide