Skip to main content

Web Setup

GlamAR SDK enables real-time AR try-ons directly on web pages while enhancing the AR experience through live camera feed and image rendering. Use the following steps to install and configure the SDK to unlock immersive AR features.

Installation​

The GlamAR SDK can be loaded as a script tag. Follow the steps below to integrate the GlamAR SDK.

Load SDK via script tags

<script src="https://www.glamar.io/sdk/wrapper"></script>

Init​

To get started, The first step is to initialize GlamAR by calling the initialize function:

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
});

Replace 'YOUR CONTAINER ID' with your CSS container ID and 'YOUR ACCESS KEY' with your organization AccessKey.

applyBySku​

Load a virtual try-on using applyBySku method and passing the relevant SKU Id.

GlamAR.applyBySku("YOUR SKU ID");

addEventListener​

Event listeners are essential soon after initialization is called to start listening to GlamAR SDK callback events.

GlamAR.addEventListener("*", (e) => {
  switch (e) {
    case "loaded":
      //will be triggered when sdk is loaded and subsequent processes can be handled here.
      //i.e GlamAR.applyBySku("c3dd1bac-a060-4bc2-bfae-05092049d1fa");
      break;
  }
});

removeEventListener​

To be used for removing the registered events.

window.GlamAR.removeEventListener("*", (e) => {});

Initialization options​

Open the SDK with Live mode (web camera) straightaway. This bypasses the SDK home screen.

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  configuration: {
    global: {
      openLiveOnInit: true,
    },
  },
});

Opens the SDK Home screen with relevant category module setup.

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  category:”required category”, //sunglasses/watches/makeup/skinanalysis etc
});
//sets up the sdk home screen with desired category type and pre-loads the model without SKU.

Open the SDK later in Live mode (web camera) .

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
});

//When you want to open the live camera without user interaction
GlamAR.open();

Open SDK with disabled previous button and cross button.

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  configuration: {
    global: {
      openLiveOnInit: true,
      disableCrossIcon: true,
      disablePrevIcon: true,
    },
  },
});
//When you want to disable the previous button and/or cross button of the sdk.

Example​

Here's an example demonstrating the usage of GlamAR SDK

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Temp Sciprt for GlamAR SDK" />
    <title>GlamAR React Demo</title>
    <script src="https://www.glamar.io/sdk/wrapper"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f7f7f7;
      }
      .container {
        max-width: 1000px;
        margin: 0 auto;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: center;
      }
      h1 {
        color: #333;
      }
      #container__frame_wrapper {
        width: 100%;
        height: 600px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #eaeaea;
        background: black;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>GlamAR Virtual Try-On</h1>
      <!-- SDK Container -->
      <div id="container__frame_wrapper"></div>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        try {
          window.GlamAR.init(
            "container__frame_wrapper",
            "YOUR ACCESS KEY", // <<--- Replace this with your GlamAR Access Key
            {
              platform: "web",
              category: "sunglasses",
            }
          );

          window.GlamAR.addEventListener("*", (event) => {
            switch (event) {
              case "loaded":
                console.log("SDK Loaded");
                break;
              case "opened":
                console.log("SDK Opened");
                break;
              case "closed":
                console.log("SDK Closed");
                break;
              case "camera-failed":
                console.log("SDK Camera Failed");
                break;
              case "sku-applied":
                console.log("SDK Sku applied");
                break;
              case "sku-failed":
                console.log("SDK Sku Failed");
                break;
              case "error":
                console.log("SDK Error", event);
                break;
            }
          });
        } catch (error) {
          console.log("SDK Init Failed: " + error.message);
        }
      });
    </script>
  </body>
</html>