Wedding Band Starter 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.

Release baseline

The documentation examples use Mini Viewer 0.6.18, which adds configurator Try-On on top of the material variants, outside and inside material features, and Modern Metals layout from 0.6.17. The linked templates are maintained in a separate repository and may still show an earlier pinned version. Check the script URL in the source you copy and use 0.6.18 or later when the project offers Try-On.

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. If it does not exist yet, start with Create a Project.
• 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, material, variant, 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. Compare the template's pinned SDK URL with the version required by this documentation. Configurator Try-On requires Mini Viewer 0.6.18 or later.
3. For iframe integrations, restrict postMessage to the exact viewer origin.
4. Serve the page over HTTPS and retain allow="camera" if Try-On runs inside an iframe.
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.