Working Wedding Band Templates

Use these maintained examples as implementation starting points. Every row includes a live GitHub Pages build and the exact source currently published from the main branch of iJewelTemplates.

Template	Use it when	Live	Code
Built-in Wedding Band UI	You want to load a complete Wedding Band project and use the standard iJewel3D interface.	Open live	View HTML
Published Drive project	You have a public Drive file ID and want the smallest loadModelById example.	Open live	View HTML
Custom UI	You want same-page controller access and a fully custom storefront interface.	Open live	Browse source
iframe host integration	You want custom host-page controls around a published Drive embed using postMessage.	Open live	Browse source

The folder-based examples depend on their adjacent JavaScript, CSS, JSON, and image assets, so copy the whole folder rather than only index.html.

Tested release baseline

The maintained direct and Custom UI templates pin Mini Viewer 0.6.11. This release fixes Wedding Band teardown, iframe command exposure, and one ready event per successful initialization. The hosted iframe uses the Viewer version deployed by ijewel3d.com.

Hosted iframe version requirement

The iframe host controls require the ijewel3d.com embedded application to be deployed with Mini Viewer 0.6.11 or newer. If the rings render inside the iframe but the host remains on Loading iframe…, the hosted application is still serving an older Viewer. Update that deployment or use the self-hosted iframe viewer from the iframe guide.

Choose the right starting point

• Start with Published Drive project when your Wedding Band configurator already exists in iJewel Drive. Replace its fileId and instance.
• Start with Built-in Wedding Band UI when you are loading a complete project JSON and want the standard controls.
• Start with Custom UI when your controls and viewer run on the same page. The implementation reads catalogs from the controller instead of hard-coding profile, metal, finish, and diamond choices.
• Start with iframe host integration when the viewer and host page have different origins or when a CMS owns the outer page.

Before production

1. Replace demo project URLs, Drive file IDs, instance names, prices, and cart behavior with your own values.
2. Keep the SDK URLs recommended by the SDK documentation. The maintained templates and guides pin the release pair they were tested with.
3. For iframe integrations, restrict postMessage to the exact viewer origin.
4. Serve the page over HTTPS and retain allow="camera; xr-spatial-tracking" if virtual try-on is enabled.
5. Test desktop and mobile layouts with the actual catalog and project size.

Continue with Assets Setup to prepare your own profiles, materials, icons, and models, or go directly to the integration guides.