Deployment & Integration

Once you've created a Wedding Band Configurator on the iJewel platform, you can deploy it in several ways. This page gives an overview, and each approach has its own detailed guide linked below.

If the project does not exist yet, start with Create a Project.

Make Your Configurator Public

Before embedding or sharing, make your configurator public:

1. Open iJewel3D Dashboard
2. Right-click your Wedding Band Configurator file
3. Select Make Public

Share Link

The simplest option is to share your configurator directly with customers:

1. Open iJewel3D Dashboard
2. Right-click your Wedding Band Configurator
3. Select Share and copy the link

The link opens the configurator in a standalone page with the full built-in UI. No code required.

Integration Options

For embedding on your website, choose the approach that fits your needs:

Approach	What You Get	Effort	Best For
Direct Integration	3D viewer + built-in config panel on your page	Add script tags + a few lines of JS	Your own website with full control
iframe Embedding	Self-contained viewer in an iframe	Drop in an <iframe> tag	CMS, Shopify, cross-origin sites
Custom UI	3D viewer only, you build the controls	Medium JS effort	Brands needing fully custom design
Self-Hosted	Your project JSON, scene, and assets on your infrastructure	Host files + configure CORS	Version pinning and infrastructure control

Tested implementation templates

Use a live page to confirm the behavior, then open the matching source:

Approach	Live page	Source code
Built-in UI	Open live	View source
Published Drive file	Open live	View source
Custom UI	Open live	Browse source
Self-hosted Custom UI	Open live	View page · View loader · View project JSON
iframe host controls	Open live	Browse source

The complete list, file-copy requirements, and selection guidance are in Wedding Band Starter Templates.

Quick Comparison

Direct Integration loads the viewer directly on your page via <script> tags. You get full JavaScript access to the viewer and API. The built-in UI panel appears automatically, or you can hide it and build your own controls. Best when you own the page and want maximum flexibility.

iframe Embedding wraps the viewer in an <iframe>. The viewer runs in its own isolated context. You communicate with it via postMessage. Best for CMS platforms, Shopify stores, or when you can't add custom scripts to the page.

For a published iJewel3D file, use the hosted production route:

<iframe
  src="https://ijewel3d.com/YOUR_INSTANCE/files/YOUR_FILE_ID/embedded?isAutoplay=true&showUiButtons=true"
  allow="camera; xr-spatial-tracking"
></iframe>

Use hideWbbUi=true for a host-page custom UI. The bundle version inside this hosted iframe is controlled by the deployed iJewel3D application. If you need to pin the viewer version yourself, use a self-hosted viewer page instead.

Custom UI (Headless) uses either approach above but hides the built-in panel. You build your own interface using the API's catalog methods and write methods. Best for brands that need pixel-perfect control over the UI design.

Scripts & CDN

Self-hosted integrations currently use the verified WebGI and Mini Viewer release pair:

<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>

Load WebGI first. Mini Viewer 0.6.11 contains the Wedding Band teardown and iframe lifecycle fixes. Upgrade the pinned Viewer release only after validating it against your project.

API Access

Regardless of which integration you choose, you get full API access:

Integration	How to Access the API
Direct (same page)	viewer.getPluginByType('WeddingBandBuilder').controller
iframe (same origin)	iframe.contentWindow.ijewelViewer.getPluginByType('WeddingBandBuilder').controller
iframe (cross origin)	postMessage protocol from the parent page

See the API Reference for the complete method and event documentation.