Quick Start

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

Create the project first

Quick Start covers sharing and website integration; it does not create the Wedding Band project. If you do not already have a working published project, start with Create a Project, verify it with View, and return here when the project is ready.

Start from a working template

Integration	Live page	Source code
Built-in Wedding Band UI	Open live	View source
Published Drive project	Open live	View source
Custom UI	Open live	Browse source
iframe host integration	Open live	Browse source

See Wedding Band Starter Templates for guidance on choosing, copying, and adapting each example.

Prerequisites

• iJewel3D Platform access with the Wedding Band Builder feature enabled.
• A published project with your configured profiles, metals, finishes, and scene settings. → Create a Project
• Prepared custom profile and finish assets, when needed. → 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://ijewel3d.com/YOUR_INSTANCE/files/YOUR_FILE_ID/embedded?isAutoplay=true&showUiButtons=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 WebGI, then the verified Mini Viewer release -->
<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>

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

    // Apply a theme (or set it in the project manifest / editor)
    api.setTheme('dark');

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

  new ijewelViewer.Viewer(
    document.getElementById('wedding-band-builder'),
    {
      name: 'Wedding Band Builder',
      version: 'v5',
      basePath: 'https://your-cdn.com/wbb-assets/',
      plugins: {
        WeddingBandBuilder: {
          manifestUrl: 'wedding-band-project.json',
        },
      },
    },
    {
      showCard: false,
      showSwitchNode: false,
      showUiButtons: true,
      showConfigurator: false,
      enableZoom: true,
      hideWbbUi: false,
    },
  );
</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