Skip to main content

Webflow 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​

Open edit mode of your webflow. Create a new page or in an existing page create a new <div> element.

Image 1

Update the <div> id to anything you want. In our example we are using "sdk-div".

Image 2

Now the GlamAR SDK can be loaded as a script tag. Add the following code in your <head> tag

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

Image 2

Init​

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

// For our example case, container-id will be `sdk-div`
GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
  category: "skinanalysis",
  configuration: {
    global: {
      openLiveOnInit: true,
      disableClose: false,
      disableBack: false,
    },
    skinAnalysis: {
      version: "GlamGen",
      defaultFilter: true,
      startScreen: true,
    },
  },
});

Replace 'YOUR CONTAINER ID' with your container ID, in our case it is sdk-div, and 'YOUR ACCESS KEY' with your organization access key.

addEventListener​

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

GlamAR.addEventListener("*", (e) => {
  switch (e) {
    case "skin-analysis":
      if (payload?.options === "result") {
        console.log(payload.value);
      }
      break;
  }
});

removeEventListener​

To be used for removing the registered events.

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