iJewel3D SDK

Appearance

Embed iJewel3D Drive Models on Your Website ​

Connect iJewel Viewer and Drive

NOTE

iJewel Drive Embedding and SDK are currently in Open Beta.

Please let us know on our Discord or by email at [email protected] if you face any issues or would like to request any features.

Docs for old iJewel Drive

The documentation for iJewel Drive instances created before March 2025 is available here.

Option 1: Simple iFrame Embedding ​

You can quickly embed a model using an HTML iframe element. This is the simplest method for displaying a model with default settings.

html
<iframe 
  title="example"
  frameborder="0" 
  allowfullscreen 
  mozallowfullscreen="true" 
  webkitallowfullscreen="true" 
  xr-spatial-tracking 
  execution-while-out-of-viewport 
  execution-while-not-rendered web-share
  allow="autoplay; fullscreen; xr-spatial-tracking; web-share" 
  width="1280px" height="720px"
  src="https://drive.ijewel3d.com/drive/files/{MODEL_ID}/embedded"
/>

Replace {MODEL_ID} with the actual ID of the model file from your iJewel Drive. The base URL (https://drive.ijewel3d.com/drive/ in this example) should correspond to your specific iJewel Drive instance, if different.

TIP

For more advanced customization of the embedded viewer, you can generate the iframe code directly from the iJewel Drive editor. Simply open your model in the editor, navigate to the Embedding tab, adjust the available viewer settings (like UI visibility, logo, enabled controls, etc.) to your preference, and then copy the fully generated iframe code provided there.

Option 2: Manual JavaScript Embedding ​

For more control over viewer options and integration, you can use the iJewel Viewer JavaScript library:

  • for enterprise clients contact us to get your basename, otherwise keep it unchanged
  • Identify where to specify the container HTML element. Set this element to embed the viewer correctly.

for more information about the code refer Connect to iJewel Drive

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>iJewel3D Viewer</title>
</head>

<body>
  <div id="root"></div>
  <script src='https://releases.ijewel3d.com/libs/mini-viewer/0.3.20/bundle.iife.js'></script>
  <script>
    const baseName = "drive" // or your enterprise 
    const modelId = urlParams.get('id');

    ijewelViewer.loadModelById(
      modelId,                        // the model ID 
      baseName,
      document.getElementById('root'), // the container element
      { /* Optional: Add ViewerOptions here if needed */
        showCard: true,
        showLogo: true,
        // Add other options from ViewerOptions documentation as required
      }
    );

  </script>
  <style>
    #root {
      width: 100vw;
      height: 100dvh;
    }
  </style>
</body>

</html>

​

Domain Restrictions

Using the iframe embedding method (Option 1) generally allows you to embed the model viewer across multiple domains without specific whitelisting for each domain.

Using the Manual JavaScript Embedding (Option 2) with the viewer library requires your hosting domain(s) to be explicitly whitelisted by iJewel3D for security purposes. Please refer to the "Host and Domain Setup" section below.

Finding the Model ID ​

To use either the iframe or the manual embedding method, you need the unique Model ID (also called File ID) for your 3D model file:

  1. Access your iJewel Drive instance in your web browser.
  2. Navigate to the folder containing the 3D model you want to embed.
  3. Right-click a model and select "Share"
  4. Examine the viewer link provided in the share dialog. It will have a format similar to https://.../files/MODEL_ID/view.
  5. The Model ID is the segment between /files/ and /view. Copy this ID.

Host and Domain Setup ​

When using the Manual JavaScript Embedding method (Option 2):

  • Host the HTML/JavaScript code on your website server.
  • Inform us (iJewel3D support) of the exact domain where the viewer will be hosted (e.g., www.yourwebsite.com). We need to authorize these domains to allow the viewer library to load models from your Drive instance.