iJewel3D SDK

Appearance

Tutorial - Embed iJewel3D Drive in your website ​

Connect iJewel Viewer and Drive

A step by step tutorial on how to embed 3D Models hosting in your iJewel Drive instance to your website.

Step 1: Set the Base Path and Container Element ​

Use the following HTML code to embed the 3D viewer:

  • Replace baseName with your actual base name in the code.
  • 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.1.22/bundle.iife.js"></script>
    <script>
      const baseName = "baseName"; // change this to your base name

      const basePath = "https://assets." + baseName + ".ijewel3d.com";

      ijewelViewer.setupIjewelDriveViewer(
        {
          basePath: basePath,
          ijewelViewerOptions: {
            showCard: true,
            showLogo: true,
          },
        },
        document.getElementById("root") // container element (change this to your container element)
      );

      window.addEventListener("ijewel-viewer-ready", async (ev) => {
        console.log("ready");
        const viewer = ev.detail.viewer;
      });
    </script>
    <style>
      #root {
        width: 100vw;
        height: 100dvh;
      }
    </style>
  </body>
</html>

Step 2: Select and Load a 3D Model ​

  • Access your iJewel drive with the 3D models.

  • Right-click a model and select "Open in 3D Viewer."

    Connect iJewel Viewer and Drive

  • Copy the entire query parameter starting with path=.

    Connect iJewel Viewer and Drive

  • Paste this query parameter into the URL on your website where you've embedded the viewer code. This tells the viewer which 3D model to display.

    Your website url should look something like this:

https://www.yourwebsite.com/?path=base64_path

INFO

The path is the base64 representation of the actual path to your 3D file in the drive. It starts from the root, followed by folder names, and ends with the 3D file name.

Step 3: Host and Domain Setup ​

  • Host the viewer code on your website.
  • Inform us of the domain where the viewer is hosted for authorization.