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.
Make Your Configurator Public
Before embedding or sharing, make your configurator public:
- Open iJewel3D Dashboard
- Right-click your Wedding Band Configurator file
- Select Make Public
Image
Screenshot of the iJewel Dashboard context menu with "Make Public" highlighted.
Share Link
The simplest option is to share your configurator directly with customers:
- Open iJewel3D Dashboard
- Right-click your Wedding Band Configurator
- 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 |
Image
Three side-by-side screenshots: (1) Direct integration with built-in panel, (2) iframe with host page controls, (3) Custom UI with brand-styled controls.
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.
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
All integration approaches use the same script:
<!-- iJewel Mini-Viewer (includes 3D engine + Wedding Band Builder plugin) -->
<script src="https://releases.ijewel3d.com/libs/mini-viewer/latest/bundle.iife.js"></script>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.