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://cdn.glamar.io/sdk/wrapper" type="text/javascript"></script>

Image 3

Initialization​

To get started, The first step is to initialize GlamAR by calling the init 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.

Basic Functions​

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":
      // Triggered when the SDK has successfully loaded
      // Use this to handle any setup tasks that depend on the SDK being ready
      break;
    case "sku-applied":
      // Triggered when a SKU has been successfully applied
      // Useful for updating UI or confirming to the user that the SKU is active
      break;
  }
});

After calling init, best practise is to wait to receive the event "loaded" before calling any other function

applyBySku​

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

GlamAR.applyBySku("YOUR SKU ID"); // Replace with a valid SKU ID from your Console

applyByCategory​

Allows the client to pass a subcategory (e.g., sunglasses,necklace,earrings), which the SDK will use to fetch all corresponding SKUs from the Console’s product inventory.

GlamAR.applyByCategory("sunglasses"); // Replace with the desired category

open​

Open the live camera to see the SKU that you applied. If no sku data has been pass to SDK, it will show an error

GlamAR.open();