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 3

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",
});

Replace 'YOUR CONTAINER ID' with your container ID, in our case it is sdk-div, 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.