iJewel3D Docs

Appearance

Direct Integration ​

Start with an iframe for most product pages. The iframe loads the configured project and the standard Try-On controls.

Use Mini Viewer when your page must load the project with JavaScript or respond to viewer events.

Before you start ​

Complete Prepare a Try-On Project before you add the project to your website. Make sure that the project has a saved Try-On configuration with enabled: true. Get the model or configurator project ID from your Drive in iJewel3D Platform. See Find the model ID for the same iJewel3D Platform steps.

Option 1: Add an iframe ​

Copy this example and replace MODEL_ID with the model or configurator project ID.

html
<iframe
  src="https://drive.ijewel3d.com/drive/files/MODEL_ID/embedded"
  title="Ring Try-On"
  loading="lazy"
  allow="camera; autoplay; fullscreen; web-share"
  allowfullscreen
  style="width: 100%; min-height: 420px; aspect-ratio: 16 / 9; border: 0;"
></iframe>

The camera permission lets Try-On request camera access from inside the iframe. The parent page must use HTTPS.

For an enterprise iJewel3D Platform instance, replace drive.ijewel3d.com with the supplied domain.

You can also copy the iframe from the editor Embed (</>) tool. See Create an iJewel viewer embed for the complete editor steps. If you copy the generated iframe, make sure that its allow attribute includes camera.

Option 2: Load the model with Mini Viewer ​

Use Mini Viewer when the website needs direct JavaScript access to the viewer. Register the hosting domain with iJewel3D before you publish the page. See Host and domain setup for the domain requirements.

Public file access

The file must be Public in its share settings. loadModelById cannot load a private file from your Drive.

Add the complete Mini Viewer page ​

Copy this example into an HTML file.

html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ring Try-On</title>

  <style>
    html,
    body,
    #viewer {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    body {
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="viewer"></div>

  <script src="https://releases.ijewel3d.com/libs/webgi-v0/bundle-0.22.0.js"></script>

  <script>
    window.webgi = window;
  </script>

  <script src="https://releases.ijewel3d.com/libs/mini-viewer/0.6.18/bundle.nowebgi.iife.js"></script>

  <script>
    const MODEL_ID = "MODEL_ID";
    const DRIVE_BASENAME = "drive";

    async function loadViewer() {
      const miniViewer = await window.ijewelViewer.loadModelById(
        MODEL_ID,
        DRIVE_BASENAME,
        document.getElementById("viewer"),
        {
          showUiButtons: true,
          hideTryOn: false
        }
      );

      if (!miniViewer) {
        throw new Error("The model did not load.");
      }
    }

    loadViewer().catch((error) => {
      console.error("Viewer setup failed:", error);
    });
  </script>
</body>
</html>

Edit the Mini Viewer example ​

Change only the values that apply to your page.

ValueAction
MODEL_IDReplace MODEL_ID with the model file ID.
DRIVE_BASENAMEKeep drive unless iJewel3D gives you an enterprise basename.
#viewer sizeIf the viewer fills only part of the page, change the CSS.

The viewer container must have a width and height. A container without a height can make the viewer appear blank.

Understand the Mini Viewer code ​

The first script loads WebGi 0.22.0. The window.webgi assignment gives Web VTO access to the same WebGi instance. The second script loads Mini Viewer 0.6.18. loadModelById gets the model or configurator project and its saved configuration from iJewel3D Platform. Mini Viewer 0.6.18 sends configurator-owned ring geometry to Try-On without a separate model file. The standard integration does not need a Web VTO script tag. Mini Viewer loads Web VTO after the customer selects the Try-On button.

loadModelById parameters ​

ParameterDescription
MODEL_IDThe unique file ID of the model or configurator project.
DRIVE_BASENAMEThe iJewel3D Platform instance. Standard accounts use drive.
document.getElementById("viewer")The element that contains Mini Viewer.
showUiButtons: trueShows the Mini Viewer control bar.
hideTryOn: falseKeeps the Try-On button visible for a project that enables Try-On.

If tryonConfig.enabled is not true, Mini Viewer does not show the Try-On button.

Do the first browser test ​

  1. Serve the page through HTTPS.
  2. Open the product page.
  3. Make sure that the 3D ring appears.
  4. Select the Try-On button in the viewer controls.
  5. When the browser asks for permission, allow camera access.
  6. Move a hand into the camera view.

The ring must follow the selected finger and keep the saved project placement.

Solve common problems ​

ProblemCauseAction
The viewer area is blank.The container has no height, or the project did not load.Give the container a height. Then inspect the browser console for a loading error.
Mini Viewer shows a CORS or 403 error.The hosting domain is not registered.Send the exact production domain to iJewel3D support.
The Try-On button is missing.The project does not enable Try-On, or the viewer hides the controls.Make sure that tryonConfig.enabled is true. Use showUiButtons: true and hideTryOn: false.
The camera does not start.The page is insecure, or the browser blocks camera access.Use HTTPS. Then allow camera access in the browser.
Try-On works outside an iframe only.The iframe does not have camera permission.Add camera to the iframe allow attribute.
The camera view shows an iJewel3D attribution watermark.Try-On is not purchased and enabled for the domain.Purchase Try-On for the domain. Then turn on Enable TryOn under Settings → Domains.

If you need branded controls or product switching, continue to the advanced integration.

For a project JSON hosted on your own server, continue in the matching configurator guide: