AR Try-on Events

GlamAR SDK sends triggers all essential events for the user on every ui interaction, data change and api resolution. We will dive deep into these events and when and how to use them. First we will go over basic events.

Life Cycle Events

loading

Fired when the GlamAR module is initiated and the SDK proceeds with the loading process.

Don't call any other function before you recieve the loaded event as it may cause misbehaviour due to incomplete initialization

Web / React

GlamAR.addEventListener("loading", () => { console.log("GlamAR: Is Loading..."); })

Flutter

GlamAr.addEventListener('loading', (payload) { debugPrint('GlamAR: Is Loading...'); });

Android

GlamAr.addEventListener("loading"){ GlamArLogger.d("TAG", "GlamAR: Is Loading...") }

iOS

GlamAr.addEventListener(event: "loading") { (payload) in print("GlamAR: Is Loading...") }

React Native

GlamArEmitter.on("loading", (payload)=> { console.log("GlamAR: Is Loading..."); })

loaded

Fired when the GlamAR module initialization is completed

Use this event as a starting point to call any other fuction, as shown below

Web / React

// Initilization Function
GlamAR.init("Your Contianer Id", "Your Access Key", { platform: "web" });

// Listen for loaded event
GlamAR.addEventListener("loaded", () => {
console.log("GlamAR: Loaded successfully");
// Continue with desired flow

// Example: apply a specific SKU
// GlamAR.applyBySku("valid-skuId");

// Example: apply a category by name
// GlamAR.applyByCategory("valid-subcategory");

// Example: start EyePD tracking
// GlamAR.eyePD("start");
});

Flutter

// Initilization Function
GlamAr.init("Your Access Key");

// Listen for loaded event
GlamAr.addEventListener('loaded', (payload) {
debugPrint('GlamAR: Loaded successfully');

// Example: apply a specific SKU
// GlamAr.applyBySku("valid-skuId");

// Example: apply a category by name
// GlamAr.applyByCategory("valid-subcategory");

// Example: start EyePD tracking
// GlamAr.eyePD("start");
});

Android

// Initilization Function
GlamAr.init(context = this, "Your Access Key", { platform: "web" });

// Listen for loaded event
GlamAr.addEventListener("loaded") {
GlamArLogger.d("TAG", "GlamAR: Loaded successfully");

// Example: apply a specific SKU
// GlamAr.applyBySku("valid-skuId");

// Example: apply a category by name
// GlamAr.applyByCategory("valid-subcategory");

// Example: start EyePD tracking
// GlamAr.eyePD("start");
};

iOS

// Initilization Function
GlamAr.initialize(
  accessKey: "YOUR_ACCESS_KEY",
  debug: false,
  bundleIdentifier: String = Bundle.main.bundleIdentifier,
)

// Listen for loaded event
GlamAr.addEventListener(event: "loaded") { payload in
print("GlamAR: Loaded successfully");

// Example: apply a specific SKU
// GlamAr.applyBySku("valid-skuId");

// Example: apply a category by name
// GlamAr.applyByCategory("valid-subcategory");

// Example: start EyePD tracking
// GlamAr.eyePD("start");
};

React Native

// Initilization Function
GlamAr.init("Your Contianer Id", "Your Access Key", { platform: "web" });

// Listen for loaded event
GlamArEmitter.on("loaded", (payload) => {
console.log("GlamAR: Loaded successfully");

// Example: apply a specific SKU
// GlamAr.applyBySku("valid-skuId");

// Example: apply a category by name
// GlamAr.applyByCategory("valid-subcategory");

// Example: start EyePD tracking
// GlamAr.eyePD("start");
});

opened

Fired when GlamAR module starts showing any type of viewer ,i.e, Live Try-on, Model Try-on or Model Viewer

Web / React

// Opens the GlamAR SDK or activates the AR session
GlamAR.open();

// Listen for the 'opened' event
GlamAR.addEventListener("opened", () => {
  console.log("GlamAR: Opened successfully");
});

Flutter

// Opens the GlamAr SDK or activates the AR session
GlamAr.open();

// Listen for the 'opened' event
GlamAr.addEventListener('opened', (payload) {
  debugPrint('GlamAr: Opened successfully');
});

Android

// Opens the GlamAR SDK or activates the AR session
GlamAr.open();

// Listen for the 'opened' event
GlamAr.addEventListener("opened") {
  GlamArLogger.d("TAG", "GlamAR: Opened successfully");
};

iOS

// Opens the GlamAr SDK or activates the AR session
GlamAr.open();

// Listen for the 'opened' event
GlamAr.addEventListener(event: "opened") { payload in
  print("GlamAr: Opened successfully");
};

React Native

// Opens the GlamAr SDK or activates the AR session
GlamAr.open();

// Listen for the 'opened' event
GlamArEmitter.on("opened", (payload) => {
  console.log("GlamAr: Opened successfully");
});

closed

Fired when GlamAR module is told to stop working

Web / React

// Closes the GlamAR SDK
GlamAR.close();

// Listen for the 'closed' event
GlamAR.addEventListener("closed", () => {
  console.log("GlamAR: Closed successfully");
});

Flutter

// Closes the GlamAr SDK
GlamAr.close();

// Listen for the 'closed' event
GlamAr.addEventListener('closed', (payload) {
  debugPrint('GlamAr: Closed successfully');
});

Android

// Closes the GlamAR SDK
GlamAr.close();

// Listen for the 'closed' event
GlamAr.addEventListener("closed") {
  GlamArLogger.d("TAG", "GlamAR: Closed successfully");
};

iOS

// Closes the GlamAr SDK
GlamAr.close();

// Listen for the 'closed' event
GlamAr.addEventListener(event: "closed") { payload in
  print("GlamAr: Closed successfully");
};

React Native

// Closes the GlamAr SDK
GlamAr.close();

// Listen for the 'closed' event
GlamArEmitter.on("closed", (payload) => {
  console.log("GlamAr: Closed successfully");
});

reset

Fired when GlamAR module removes all the applied effects are reset.

Web / React

// Resets the GlamAR SDK applied effects
GlamAR.reset();

// Listen for the 'reset' event
GlamAR.addEventListener("reset", () => {
  console.log("GlamAR: Reset successfully");
});

Flutter

// Resets the GlamAr SDK applied effects
GlamAr.reset();

// Listen for the 'reset' event
GlamAr.addEventListener('reset', (payload) {
  debugPrint('GlamAr: Reset successfully');
});

Android

// Resets the GlamAR SDK applied effects
GlamAr.reset();

// Listen for the 'reset' event
GlamAr.addEventListener("reset") {
  GlamArLogger.d("TAG", "GlamAR: Reset successfully");
};

iOS

// Resets the GlamAr SDK applied effects
GlamAr.reset();

// Listen for the 'reset' event
GlamAr.addEventListener(event: "reset") { payload in
  print("GlamAr: Reset successfully");
};

React Native

// Resets the GlamAr SDK applied effects
GlamAr.reset();

// Listen for the 'reset' event
GlamArEmitter.on("reset", (payload) => {
  console.log("GlamAr: Reset successfully");
});

error

Fired anytime an error occurs. This event returns Error object with a description of the error that has been encountered. If your toasts are active you will see the same message on screen. If you want to use your own error handling UI just listen to this event and show errors using the Error we send.

Web / React

GlamAR.addEventListener("error", (error) => {
  console.log("GlamAR: Error encountered", error);
});

Flutter

GlamAr.addEventListener('error', (payload) {
  debugPrint('GlamAr: Error encountered $payload');
});

Android

GlamAr.addEventListener("error") { payload ->
  GlamArLogger.d("TAG", "GlamAR: Error encountered $payload")
};

iOS

GlamAr.addEventListener(event: "error") { payload in
  print("GlamAr: Error encountered \(payload)")
}

React Native

GlamArEmitter.on("error", (payload) => {
  console.log("GlamAr: Error encountered", payload);
});

Camera Events

camera-opened

Fired when the camera is opened successfully.

camera-closed

Fired when the camera is closed successfully.

camera-access-issue

Fired when the camera fails. This can occur if the user refuses to grant permission or the app is unable to retrieve the video stream normally.

Web / React

// Fired when the GlamAR camera is opened
GlamAR.addEventListener("camera-opened", () => {
  console.log("GlamAR: Camera opened");
});

// Fired when the GlamAR camera is closed
GlamAR.addEventListener("camera-closed", () => {
  console.log("GlamAR: Camera closed");
});

// Fired when camera permission is not granted
GlamAR.addEventListener("camera-access-issue", () => {
  console.log("GlamAR: Camera permission not granted");
});

Flutter

// Fired when the GlamAr camera is opened
GlamAr.addEventListener('camera-opened', (payload) {
  debugPrint('GlamAR: Camera opened');
});

// Fired when the GlamAr camera is closed
GlamAr.addEventListener('camera-closed', (payload) {
  debugPrint('GlamAR: Camera closed');
});

// Fired when camera permission is not granted
GlamAr.addEventListener('camera-access-issue', (payload) {
  debugPrint('GlamAR: Camera permission not granted');
});

Android

// Fired when the GlamAR camera is opened
GlamAr.addEventListener("camera-opened") {
  GlamArLogger.d("TAG", "GlamAR: Camera opened");
};

// Fired when the GlamAR camera is closed
GlamAr.addEventListener("camera-closed") {
  GlamArLogger.d("TAG", "GlamAR: Camera closed");
};

// Fired when camera permission is not granted
GlamAr.addEventListener("camera-access-issue") {
  GlamArLogger.d("TAG", "GlamAR: Camera permission not granted");
};

iOS

// Fired when the GlamAr camera is opened
GlamAr.addEventListener(event: "camera-opened") { payload in
  print("GlamAR: Camera opened");
}

// Fired when the GlamAr camera is closed
GlamAr.addEventListener(event: "camera-closed") { payload in
  print("GlamAR: Camera closed");
}

// Fired when camera permission is not granted
GlamAr.addEventListener(event: "camera-access-issue") { payload in
  print("GlamAR: Camera permission not granted");
}

React Native

// Fired when the GlamAr camera is opened
GlamArEmitter.on("camera-opened", (payload) => {
  console.log("GlamAR: Camera opened");
});

// Fired when the GlamAr camera is closed
GlamArEmitter.on("camera-closed", (payload) => {
  console.log("GlamAR: Camera closed");
});

// Fired when camera permission is not granted
GlamArEmitter.on("camera-access-issue", (payload) => {
  console.log("GlamAR: Camera permission not granted");
});

Try-on Events

sku-applied

Fired when a given SKU is applied successfully

sku-failed

Fired when a given SKU is not applied successfully. This can occur if there is some issue with SKU data or user's subscription has exprired. Check the Check the Pixelbin > GlamAR > Plans to make sure your plan is active and has enough credits.

Web / React

// Apply a desired SKU by ID
GlamAR.applyBySku("valid-sku-id");

// Listen for the 'sku-applied' event
GlamAR.addEventListener("sku-applied", () => {
  console.log("GlamAR: SKU was correctly applied");
});

// Listen for the 'sku-failed' event
GlamAR.addEventListener("sku-failed", () => {
  console.log("GlamAR: SKU failed to apply. Go to GlamAR Console and check plan details and credits");
});

Flutter

// Apply a desired SKU by ID
GlamAr.applyBySku("valid-sku-id");

// Listen for the 'sku-applied' event
GlamAr.addEventListener('sku-applied', (payload) {
  debugPrint('GlamAr: SKU was correctly applied');
});

// Listen for the 'sku-failed' event
GlamAr.addEventListener('sku-failed', (payload) {
  debugPrint('GlamAr: SKU failed to apply. Go to GlamAR Console and check plan details and credits');
});

Android

// Apply a desired SKU by ID
GlamAr.applyBySku("valid-sku-id");

// Listen for the 'sku-applied' event
GlamAr.addEventListener("sku-applied") {
  GlamArLogger.d("TAG", "GlamAR: SKU was correctly applied");
};

// Listen for the 'sku-failed' event
GlamAr.addEventListener("sku-failed") {
  GlamArLogger.d("TAG", "GlamAR: SKU failed to apply. Go to GlamAR Console and check plan details and credits");
};

iOS

// Apply a desired SKU by ID
GlamAr.applyBySku("valid-sku-id");

// Listen for the 'sku-applied' event
GlamAr.addEventListener(event: "sku-applied") { payload in
  print("GlamAr: SKU was correctly applied");
}

// Listen for the 'sku-failed' event
GlamAr.addEventListener(event: "sku-failed") { payload in
  print("GlamAr: SKU failed to apply. Go to GlamAR Console and check plan details and credits");
}

React Native

// Apply a desired SKU by ID
GlamAr.applyBySku("valid-sku-id");

// Listen for the 'sku-applied' event
GlamArEmitter.on("sku-applied", (payload) => {
  console.log("GlamAr: SKU was correctly applied");
});

// Listen for the 'sku-failed' event
GlamArEmitter.on("sku-failed", (payload) => {
  console.log("GlamAr: SKU failed to apply. Go to GlamAR Console and check plan details and credits");
});

photo-loaded

Fired when SDK is prompted to take a screenshot of the current AR effect. This event handles both success or failed conditions. The payload of this event contains two variables as follows:

• image in base64 format
• status in string format with possible values of succes | failed

Below code example shows the complete cycle of function and event

Web / React

// Prompts the GlamAR SDK to take a screenshot
GlamAR.snapshot();

// Listen for the photo-loaded event
GlamAR.addEventListener("photo-loaded", ({ image, status }) => {
  console.log("GlamAR: Screenshot status:", status, "image data:", image);
});

Flutter

// Prompts the GlamAr SDK to take a screenshot
GlamAr.snapshot();

// Listen for the photo-loaded event
GlamAr.addEventListener('photo-loaded', (payload) {
  final image = payload['image'];
  final status = payload['status'];
  debugPrint('GlamAr: Screenshot status: $status, image data: $image');
});

Android

// Prompts the GlamAR SDK to take a screenshot
GlamAr.snapshot();

// Listen for the photo-loaded event
GlamAR.addEventListener("photo-loaded") { payload ->
  val image = payload["image"]
  val status = payload["status"]
  GlamArLogger.d("TAG", "GlamAR: Screenshot status: $status, image data: $image")
};

iOS

// Prompts the GlamAr SDK to take a screenshot
GlamAr.snapshot()

// Listen for the photo-loaded event
GlamAr.addEventListener(event: "photo-loaded") { payload in
    if let image = payload["image"], let status = payload["status"] {
    print("GlamAr: Screenshot status: \(status), image data: \(image)")
  }
}

React Native

// Prompts the GlamAr SDK to take a screenshot
GlamAr.snapshot();

// Listen for the photo-loaded event
GlamArEmitter.on("photo-loaded", (payload) => {
  const { image, status } = payload;
  console.log("GlamAr: Screenshot status:", status, "image data:", image);
});

UI Events

ui-interactions

Fired when a user interacts with any UI element. You can register these events to trigger specific actions or to track behavior on your side.
GlamAR provides its own analytics as well, but you can also log these for custom analytics.

UI elements have two behaviors:

• clicked
• toggleOn | toggleOff

topNavigationPanel

This is the top navigation panel. It has four buttons, each with an interaction event:

• Clicked on Back button
• Clicked on Global Cart button
• Clicked on Share button
• Clicked on Close button

UI Element	Action
back	clicked
globalCart	clicked
share	clicked
close	clicked

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType, value }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType, "value:", value);
if (screenType === "topNavigationPanel") {
  if (buttonType === "back") { /* Back button clicked */ }
  if (buttonType === "globalCart") { /* Global Cart button clicked */ }
  if (buttonType === "share") { /* Share button clicked */ }
  if (buttonType === "close") { /* Close button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
final value = payload['value'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType value: $value');
if (screenType == 'topNavigationPanel') {
  if (buttonType == 'back') { /* Back button clicked */ }
  if (buttonType == 'globalCart') { /* Global Cart button clicked */ }
  if (buttonType == 'share') { /* Share button clicked */ }
  if (buttonType == 'close') { /* Close button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  val value = payload["value"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType value: $value")
  if (screenType == "topNavigationPanel") {
      if (buttonType == "back") { /* Back button clicked */ }
      if (buttonType == "globalCart") { /* Global Cart button clicked */ }
      if (buttonType == "share") { /* Share button clicked */ }
      if (buttonType == "close") { /* Close button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
let value = payload["value"]
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?") value: \(String(describing: value))")
if screenType == "topNavigationPanel" {
  if buttonType == "back" { /* Back button clicked */ }
  if buttonType == "globalCart" { /* Global Cart button clicked */ }
  if buttonType == "share" { /* Share button clicked */ }
  if buttonType == "close" { /* Close button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType, value }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType, "value:", value);
if (screenType === "topNavigationPanel") {
  if (buttonType === "back") { /* Back button clicked */ }
  if (buttonType === "globalCart") { /* Global Cart button clicked */ }
  if (buttonType === "share") { /* Share button clicked */ }
  if (buttonType === "close") { /* Close button clicked */ }
}
});

---

vtoHeroScreen

This is the first screen displayed when the SDK initializes correctly and the UI is not overridden.

• Clicked on Live Camera button
• Clicked on Choose a Model button

UI Element	Action
LiveCamera	clicked
ChooseAModel	clicked

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "vtoHeroScreen") {
  if (buttonType === "LiveCamera") { /* Live Camera button clicked */ }
  if (buttonType === "ChooseAModel") { /* Choose a Model button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'vtoHeroScreen') {
  if (buttonType == 'LiveCamera') { /* Live Camera button clicked */ }
  if (buttonType == 'ChooseAModel') { /* Choose a Model button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "vtoHeroScreen") {
      if (buttonType == "LiveCamera") { /* Live Camera button clicked */ }
      if (buttonType == "ChooseAModel") { /* Choose a Model button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "vtoHeroScreen" {
  if buttonType == "LiveCamera" { /* Live Camera button clicked */ }
  if buttonType == "ChooseAModel" { /* Choose a Model button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "vtoHeroScreen") {
  if (buttonType === "LiveCamera") { /* Live Camera button clicked */ }
  if (buttonType === "ChooseAModel") { /* Choose a Model button clicked */ }
}
});

---

skuSelectionPanel

Displayed when any category is applied correctly. If there are multiple SKUs, this panel allows selecting one.

• Clicked on Add to Cart button
• Clicked on Add to Wishlist button (the heart icon)

UI Element	Action
addToCart	clicked
addToWishlist	clicked

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "skuSelectionPanel") {
  if (buttonType === "addToCart") { /* Add to Cart clicked */ }
  if (buttonType === "addToWishlist") { /* Add to Wishlist clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'skuSelectionPanel') {
  if (buttonType == 'addToCart') { /* Add to Cart clicked */ }
  if (buttonType == 'addToWishlist') { /* Add to Wishlist clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "skuSelectionPanel") {
      if (buttonType == "addToCart") { /* Add to Cart clicked */ }
      if (buttonType == "addToWishlist") { /* Add to Wishlist clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "skuSelectionPanel" {
  if buttonType == "addToCart" { /* Add to Cart clicked */ }
  if buttonType == "addToWishlist" { /* Add to Wishlist clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "skuSelectionPanel") {
  if (buttonType === "addToCart") { /* Add to Cart clicked */ }
  if (buttonType === "addToWishlist") { /* Add to Wishlist clicked */ }
}
});

---

modelScreen

Shown when any SKU is applied correctly and the user chooses Choose a Model. Users can select a model or upload their own.

• Clicked on Upload button
• Clicked on Confirm button

UI Element	Action
upload	clicked
confirm	clicked

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType, value }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType, "value:", value);
if (screenType === "modelScreen") {
  if (buttonType === "upload") { /* Upload button clicked */ }
  if (buttonType === "confirm") { /* Confirm button clicked */ }
  if (buttonType === "selectModel") { /* Model index selected: value */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
final value = payload['value'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType value: $value');
if (screenType == 'modelScreen') {
  if (buttonType == 'upload') { /* Upload button clicked */ }
  if (buttonType == 'confirm') { /* Confirm button clicked */ }
  if (buttonType == 'selectModel') { /* Model index selected: value */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  val value = payload["value"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType value: $value")
  if (screenType == "modelScreen") {
      if (buttonType == "upload") { /* Upload button clicked */ }
      if (buttonType == "confirm") { /* Confirm button clicked */ }
      if (buttonType == "selectModel") { /* Model index selected: value */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
let value = payload["value"]
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?") value: \(String(describing: value))")
if screenType == "modelScreen" {
  if buttonType == "upload" { /* Upload button clicked */ }
  if buttonType == "confirm" { /* Confirm button clicked */ }
  if buttonType == "selectModel" { /* Model index selected: value */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType, value }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType, "value:", value);
if (screenType === "modelScreen") {
  if (buttonType === "upload") { /* Upload button clicked */ }
  if (buttonType === "confirm") { /* Confirm button clicked */ }
  if (buttonType === "selectModel") { /* Model index selected: value */ }
}
});

---

eyePdToast

EyePD toast showing the default PD value.

• Clicked on Measure Now button

UI Element	Action
measureNow	clicked

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "eyePdToast") {
  if (buttonType === "measureNow") { /* Measure Now button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'eyePdToast') {
  if (buttonType == 'measureNow') { /* Measure Now button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "eyePdToast") {
      if (buttonType == "measureNow") { /* Measure Now button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "eyePdToast" {
  if buttonType == "measureNow" { /* Measure Now button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "eyePdToast") {
  if (buttonType === "measureNow") { /* Measure Now button clicked */ }
}
});

---

eyePdInstructionScreen

UI Element	Action
startNow	clicked

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "eyePdInstructionScreen") {
  if (buttonType === "startNow") { /* Start Now button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'eyePdInstructionScreen') {
  if (buttonType == 'startNow') { /* Start Now button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "eyePdInstructionScreen") {
      if (buttonType == "startNow") { /* Start Now button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "eyePdInstructionScreen" {
  if buttonType == "startNow" { /* Start Now button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "eyePdInstructionScreen") {
  if (buttonType === "startNow") { /* Start Now button clicked */ }
}
});

---

eyePdResultPopup

UI Element	Action
proceed	clicked
retake	clicked

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "eyePdResultPopup") {
  if (buttonType === "proceed") { /* Proceed button clicked */ }
  if (buttonType === "retake") { /* Retake button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'eyePdResultPopup') {
  if (buttonType == 'proceed') { /* Proceed button clicked */ }
  if (buttonType == 'retake') { /* Retake button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "eyePdResultPopup") {
      if (buttonType == "proceed") { /* Proceed button clicked */ }
      if (buttonType == "retake") { /* Retake button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "eyePdResultPopup" {
  if buttonType == "proceed" { /* Proceed button clicked */ }
  if buttonType == "retake" { /* Retake button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "eyePdResultPopup") {
  if (buttonType === "proceed") { /* Proceed button clicked */ }
  if (buttonType === "retake") { /* Retake button clicked */ }
}
});

---

modelViewerScreen

This is the 3D Model Viewer screen. From left to right, each element emits a ui-interactions event on interaction.

UI Element	Action	Description
showDimensions	clicked	Show dimensions panel
AR	clicked	Back to selected try-on
viewInYourSpace	clicked	On compatible mobile devices launches AR view. On desktop shows a QR code to scan
fullScreen	clicked	Toggle full-screen view
qrClose	clicked	Close the QR code popup

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "modelViewerScreen") {
  if (buttonType === "showDimensions") { /* Show dimensions button clicked */ }
  if (buttonType === "AR") { /* Back to selected try-on button clicked */ }
  if (buttonType === "viewInYourSpace") { /* View in your space button clicked */ }
  if (buttonType === "fullScreen") { /* Full screen button clicked */ }
  if (buttonType === "qrClose") { /* QR close button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'modelViewerScreen') {
  if (buttonType == 'showDimensions') { /* Show dimensions button clicked */ }
  if (buttonType == 'AR') { /* Back to selected try-on button clicked */ }
  if (buttonType == 'viewInYourSpace') { /* View in your space button clicked */ }
  if (buttonType == 'fullScreen') { /* Full screen button clicked */ }
  if (buttonType == 'qrClose') { /* QR close button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "modelViewerScreen") {
      if (buttonType == "showDimensions") { /* Show dimensions button clicked */ }
      if (buttonType == "AR") { /* Back to selected try-on button clicked */ }
      if (buttonType == "viewInYourSpace") { /* View in your space button clicked */ }
      if (buttonType == "fullScreen") { /* Full screen button clicked */ }
      if (buttonType == "qrClose") { /* QR close button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "modelViewerScreen" {
  if buttonType == "showDimensions" { /* Show dimensions button clicked */ }
  if buttonType == "AR" { /* Back to selected try-on button clicked */ }
  if buttonType == "viewInYourSpace" { /* View in your space button clicked */ }
  if buttonType == "fullScreen" { /* Full screen button clicked */ }
  if buttonType == "qrClose" { /* QR close button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "modelViewerScreen") {
  if (buttonType === "showDimensions") { /* Show dimensions button clicked */ }
  if (buttonType === "AR") { /* Back to selected try-on button clicked */ }
  if (buttonType === "viewInYourSpace") { /* View in your space button clicked */ }
  if (buttonType === "fullScreen") { /* Full screen button clicked */ }
  if (buttonType === "qrClose") { /* QR close button clicked */ }
}
});

---

comparePanel

Comparison UI emits events for the following interactions:

• Clicked on Set Default button
• Clicked on Close (X) button

UI Element	Action
close	clicked
default	clicked

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "comparePanel") {
  if (buttonType === "close") { /* Close button clicked */ }
  if (buttonType === "default") { /* Set Default button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'comparePanel') {
  if (buttonType == 'close') { /* Close button clicked */ }
  if (buttonType == 'default') { /* Set Default button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "comparePanel") {
      if (buttonType == "close") { /* Close button clicked */ }
      if (buttonType == "default") { /* Set Default button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "comparePanel" {
  if buttonType == "close" { /* Close button clicked */ }
  if buttonType == "default" { /* Set Default button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "comparePanel") {
  if (buttonType === "close") { /* Close button clicked */ }
  if (buttonType === "default") { /* Set Default button clicked */ }
}
});

---

settingsPanel

The settings panel differs for each category. The image above is for the eyewear category. Other buttons and UI elements are shown for different categories. Buttons include:

• Clicked on Close (X) button
• Clicked on Measure button
• Clicked on Redo Measurement button
• Clicked on Position button
• Clicked on Intensity button
• Clicked on Finger button

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "settingsPanel") {
  if (buttonType === "close") { /* Close button clicked */ }
  if (buttonType === "pdMeasurement") { /* Measure button clicked */ }
  if (buttonType === "redoMeasurement") { /* Redo Measurement button clicked */ }
  if (buttonType === "positionAdjustment") { /* Position button clicked */ }
  if (buttonType === "intensity") { /* Intensity button clicked */ }
  if (buttonType === "fingerSelection") { /* Finger button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'settingsPanel') {
  if (buttonType == 'close') { /* Close button clicked */ }
  if (buttonType == 'pdMeasurement') { /* Measure button clicked */ }
  if (buttonType == 'redoMeasurement') { /* Redo Measurement button clicked */ }
  if (buttonType == 'positionAdjustment') { /* Position button clicked */ }
  if (buttonType == 'intensity') { /* Intensity button clicked */ }
  if (buttonType == 'fingerSelection') { /* Finger button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "settingsPanel") {
      if (buttonType == "close") { /* Close button clicked */ }
      if (buttonType == "pdMeasurement") { /* Measure button clicked */ }
      if (buttonType == "redoMeasurement") { /* Redo Measurement button clicked */ }
      if (buttonType == "positionAdjustment") { /* Position button clicked */ }
      if (buttonType == "intensity") { /* Intensity button clicked */ }
      if (buttonType == "fingerSelection") { /* Finger button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "settingsPanel" {
  if buttonType == "close" { /* Close button clicked */ }
  if buttonType == "pdMeasurement" { /* Measure button clicked */ }
  if buttonType == "redoMeasurement" { /* Redo Measurement button clicked */ }
  if buttonType == "positionAdjustment" { /* Position button clicked */ }
  if buttonType == "intensity" { /* Intensity button clicked */ }
  if buttonType == "fingerSelection" { /* Finger button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "settingsPanel") {
  if (buttonType === "close") { /* Close button clicked */ }
  if (buttonType === "pdMeasurement") { /* Measure button clicked */ }
  if (buttonType === "redoMeasurement") { /* Redo Measurement button clicked */ }
  if (buttonType === "positionAdjustment") { /* Position button clicked */ }
  if (buttonType === "intensity") { /* Intensity button clicked */ }
  if (buttonType === "fingerSelection") { /* Finger button clicked */ }
}
});

---

somethingWentWrongScreen

This is the main error screen that appears if the ML model or SKU fails to load.

• Clicked on Choose different method button

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "somethingWentWrongScreen") {
  if (buttonType === "chooseDifferentMethod") { /* Choose different method button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'somethingWentWrongScreen') {
  if (buttonType == 'chooseDifferentMethod') { /* Choose different method button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "somethingWentWrongScreen") {
      if (buttonType == "chooseDifferentMethod") { /* Choose different method button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "somethingWentWrongScreen" {
  if buttonType == "chooseDifferentMethod" { /* Choose different method button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "somethingWentWrongScreen") {
  if (buttonType === "chooseDifferentMethod") { /* Choose different method button clicked */ }
}
});

---

cameraFailed and cameraAccessDenied

These are camera-related error screens that appear if the camera fails to load properly or access is denied.

• Clicked on Choose different method button

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "cameraFailed" || screenType === "cameraAccessDenied") {
  if (buttonType === "chooseDifferentMethod") { /* Choose different method button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'cameraFailed' || screenType == 'cameraAccessDenied') {
  if (buttonType == 'chooseDifferentMethod') { /* Choose different method button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "cameraFailed" || screenType == "cameraAccessDenied") {
      if (buttonType == "chooseDifferentMethod") { /* Choose different method button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "cameraFailed" || screenType == "cameraAccessDenied" {
  if buttonType == "chooseDifferentMethod" { /* Choose different method button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "cameraFailed" || screenType === "cameraAccessDenied") {
  if (buttonType === "chooseDifferentMethod") { /* Choose different method button clicked */ }
}
});

---

restartPopUp

Restart popup used in EyePD flow and Skin Analysis flow.

• Clicked on No button
• Clicked on Yes, restart button

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "restartPopUp") {
  if (buttonType === "no") { /* No button clicked */ }
  if (buttonType === "yes") { /* Yes, restart button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'restartPopUp') {
  if (buttonType == 'no') { /* No button clicked */ }
  if (buttonType == 'yes') { /* Yes, restart button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "restartPopUp") {
      if (buttonType == "no") { /* No button clicked */ }
      if (buttonType == "yes") { /* Yes, restart button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "restartPopUp" {
  if buttonType == "no" { /* No button clicked */ }
  if buttonType == "yes" { /* Yes, restart button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "restartPopUp") {
  if (buttonType === "no") { /* No button clicked */ }
  if (buttonType === "yes") { /* Yes, restart button clicked */ }
}
});

---

quitPopUp

Quit confirmation popup used in EyePD and Skin Analysis flows.

• Clicked on No button
• Clicked on Yes, quit button

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "quitPopUp") {
  if (buttonType === "no") { /* No button clicked */ }
  if (buttonType === "yes") { /* Yes, quit button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'quitPopUp') {
  if (buttonType == 'no') { /* No button clicked */ }
  if (buttonType == 'yes') { /* Yes, quit button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "quitPopUp") {
      if (buttonType == "no") { /* No button clicked */ }
      if (buttonType == "yes") { /* Yes, quit button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "quitPopUp" {
  if buttonType == "no" { /* No button clicked */ }
  if buttonType == "yes" { /* Yes, quit button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "quitPopUp") {
  if (buttonType === "no") { /* No button clicked */ }
  if (buttonType === "yes") { /* Yes, quit button clicked */ }
}
});

---

toast

Default toast shown for errors encountered.

• Clicked on Close (X) button

Web / React

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "toast") {
  if (buttonType === "close") { /* Close button clicked */ }
}
});

Flutter

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'toast') {
  if (buttonType == 'close') { /* Close button clicked */ }
}
});

Android

GlamAr.addEventListener("ui-interactions") {{ payload ->
  val screenType = payload["screenType"]
  val buttonType = payload["buttonType"]
  GlamArLogger.d("TAG", "GlamAr: UI event: $screenType interacted with: $buttonType")
  if (screenType == "toast") {
      if (buttonType == "close") { /* Close button clicked */ }
  }
}};

iOS

GlamAr.addEventListener(event: "ui-interactions") {{ payload in
let screenType = payload["screenType"] as? String
let buttonType = payload["buttonType"] as? String
print("GlamAr: UI event: \(screenType ?? "?") interacted with: \(buttonType ?? "?")")
if screenType == "toast" {
  if buttonType == "close" { /* Close button clicked */ }
}
}}

React Native

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "toast") {
  if (buttonType === "close") { /* Close button clicked */ }
}
});

add-to-cart

Fired when user clicks on add to cart button of any particular SKU. This event returns two variables inside its payload,

• skuId in string format
• productName in string format

This can be used to identify which product was selected to add to cart. On your end, you can add it to the cart or do anything required, and then if you want SDK's UI to reflect this confirmation that required action was completed, you will have to call

Web / React

// Listen for the 'add-to-cart' event
GlamAR.addEventListener('add-to-cart', ({ skuId, productName }) => {
  console.log("GlamAR: Add to cart:", productName, "id:", skuId);

  // Perform your add-to-cart operation in your system
  // ...

  // Notify the SDK that the item was successfully added
  GlamAR.addedToCart(skuId);
  // Note: skuId must match the one received from the event
});

Flutter

// Listen for the 'add-to-cart' event
GlamAr.addEventListener('add-to-cart', (payload) {
  final skuId = payload['skuId'];
  final productName = payload['productName'];
  debugPrint('GlamAr: Add to cart: $productName id: $skuId');

  // Perform your add-to-cart operation in your app
  // ...

  // Notify the SDK that the item was successfully added
  GlamAr.addedToCart(skuId);
  // Note: skuId must match the one received from the event
});

Android

// Listen for the 'add-to-cart' event
GlamAr.addEventListener("add-to-cart") { payload ->
  val skuId = payload["skuId"]
  val productName = payload["productName"]
  GlamArLogger.d("TAG", "GlamAR: Add to cart: $productName id: $skuId")

  // Perform your add-to-cart operation in your app
  // ...

  // Notify the SDK that the item was successfully added
  GlamAr.addedToCart(skuId)
  // Note: skuId must match the one received from the event
};

iOS

// Listen for the 'add-to-cart' event
GlamAr.addEventListener(event: "add-to-cart") { payload in
  if let skuId = payload["skuId"], let productName = payload["productName"] {
      print("GlamAr: Add to cart: \(productName) id: \(skuId)")

      // Perform your add-to-cart operation in your app
      // ...

      // Notify the SDK that the item was successfully added
      GlamAr.addedToCart(skuId)
      // Note: skuId must match the one received from the event
  }
}

React Native

// Listen for the 'add-to-cart' event
GlamArEmitter.on("add-to-cart", (payload) => {
  const { skuId, productName } = payload;
  console.log("GlamAr: Add to cart:", productName, "id:", skuId);

  // Perform your add-to-cart operation in your app
  // ...

  // Notify the SDK that the item was successfully added
  GlamAr.addedToCart(skuId);
  // Note: skuId must match the one received from the event
});

add-to-wishlist

Fired when user clicks on the heart icon of any particular SKU. This event returns two variables inside its payload,

• skuId in string format
• productName in string format

This can be used to identify which product was selected to add to wishlist. On your end, you need can add it to the wislist or do anything required, and then if you want SDK's UI to reflect this confirmation that required action was completed, you will have to call

Web / React

// Listen for the 'add-to-wishlist' event
GlamAR.addEventListener('add-to-wishlist', ({ skuId, productName }) => {
  console.log("GlamAR: Add to wishlist:", productName, "id:", skuId);

  // Perform your add-to-wishlist operation in your system
  // ...

  // Notify the SDK that the item was successfully added
  GlamAR.addedToWishlist(skuId);
  // Note: skuId must match the one received from the event
});

Flutter

// Listen for the 'add-to-wishlist' event
GlamAr.addEventListener('add-to-wishlist', (payload) {
  final skuId = payload['skuId'];
  final productName = payload['productName'];
  debugPrint('GlamAr: Add to wishlist: $productName id: $skuId');

  // Perform your add-to-wishlist operation in your app
  // ...

  // Notify the SDK that the item was successfully added
  GlamAr.addedToWishlist(skuId);
  // Note: skuId must match the one received from the event
});

Android

// Listen for the 'add-to-wishlist' event
GlamAr.addEventListener("add-to-wishlist") { payload ->
  val skuId = payload["skuId"]
  val productName = payload["productName"]
  GlamArLogger.d("TAG", "GlamAR: Add to wishlist: $productName id: $skuId")

  // Perform your add-to-wishlist operation in your app
  // ...

  // Notify the SDK that the item was successfully added
  GlamAr.addedToWishlist(skuId)
  // Note: skuId must match the one received from the event
};

iOS

// Listen for the 'add-to-wishlist' event
GlamAr.addEventListener(event: "add-to-wishlist") { payload in
  if let skuId = payload["skuId"], let productName = payload["productName"] {
      print("GlamAr: Add to wishlist: \(productName) id: \(skuId)")

      // Perform your add-to-wishlist operation in your app
      // ...

      // Notify the SDK that the item was successfully added
      GlamAr.addedToWishlist(skuId)
      // Note: skuId must match the one received from the event
  }
}

React Native

// Listen for the 'add-to-wishlist' event
GlamArEmitter.on("add-to-wishlist", (payload) => {
  const { skuId, productName } = payload;
  console.log("GlamAr: Add to wishlist:", productName, "id:", skuId);

  // Perform your add-to-wishlist operation in your app
  // ...

  // Notify the SDK that the item was successfully added
  GlamAr.addedToWishlist(skuId);
  // Note: skuId must match the one received from the event
});

add-to-cart-global

Fired when user clicks on the cart icon in the top navigation bar. This is can be used to open your own cart section, to show all the items in cart.

Web / React

// Listen for the 'add-to-cart-global' event
GlamAR.addEventListener('add-to-cart-global', () => {
  console.log("GlamAR: Open Global Cart clicked");

  // Open your own global Cart section in your app
  // ...

  // If desired, close the SDK after opening the cart
  // GlamAR.close();
});

Flutter

// Listen for the 'add-to-cart-global' event
GlamAr.addEventListener('add-to-cart-global', (payload) {
  debugPrint('GlamAr: Open Global Cart clicked');

  // Open your own global Cart section in your app
  // ...

  // If desired, close the SDK after opening the cart
  // GlamAr.close();
});

Android

// Listen for the 'add-to-cart-global' event
GlamAr.addEventListener("add-to-cart-global") { payload ->
  GlamArLogger.d("TAG", "GlamAR: Open Global Cart clicked")

  // Open your own global Cart section in your app
  // ...

  // If desired, close the SDK after opening the cart
  // GlamAr.close()
};

iOS

// Listen for the 'add-to-cart-global' event
GlamAr.addEventListener(event: "add-to-cart-global") { payload in
  print("GlamAr: Open Global Cart clicked")

  // Open your own global Cart section in your app
  // ...

  // If desired, close the SDK after opening the cart
  // GlamAr.close()
}

React Native

// Listen for the 'add-to-cart-global' event
GlamArEmitter.on("add-to-cart-global", (payload) => {
  console.log("GlamAr: Open Global Cart clicked");

  // Open your own global Cart section in your app
  // ...

  // If desired, close the SDK after opening the cart
  // GlamAr.close();
});

Advanced Events

subscription-invalid

Fired when the subscription is found to be invalid or expired. Check the Pixelbin > GlamAR > Plans to make sure your plan is active and has enough credits.

Web / React

// Listen for the 'subscription-invalid' event
GlamAR.addEventListener('subscription-invalid', () => {
  console.log("GlamAR: Subscription has expired or credits consumed. Check plan status in console");
});

Flutter

// Listen for the 'subscription-invalid' event
GlamAr.addEventListener('subscription-invalid', (payload) {
  debugPrint('GlamAr: Subscription has expired or credits consumed. Check plan status in console');
});

Android

// Listen for the 'subscription-invalid' event
GlamAr.addEventListener("subscription-invalid") { payload ->
  GlamArLogger.d("TAG", "GlamAR: Subscription has expired or credits consumed. Check plan status in console")
};

iOS

// Listen for the 'subscription-invalid' event
GlamAr.addEventListener(event: "subscription-invalid") { payload in
  print("GlamAr: Subscription has expired or credits consumed. Check plan status in console")
}

React Native

// Listen for the 'subscription-invalid' event
GlamArEmitter.on("subscription-invalid", (payload) => {
  console.log("GlamAr: Subscription has expired or credits consumed. Check plan status in console");
});

upload-started

Fired when the upload mode dialogue is shown. This is during Ar-tryon when user goes to Model try-on and wants to add his own image. When he starts the process we trigger this event

upload-cancelled

Fired when the upload mode dialogue is canceled.

Web / React

GlamAR.addEventListener('upload-started', () => {
console.log("GlamAR: User started uploading their own model image to use");
});

GlamAR.addEventListener('upload-cancelled', () => {
console.log("GlamAR: User cancelled uploading model image");
});

Flutter

GlamAr.addEventListener('upload-started', (payload) {
debugPrint('GlamAr: User started uploading their own model image to use');
});

GlamAr.addEventListener('upload-cancelled', (payload) {
debugPrint('GlamAr: User cancelled uploading model image');
});

Android

GlamAr.addEventListener("upload-started") { payload ->
  GlamArLogger.d("TAG", "GlamAr: User started uploading their own model image to use")
};

GlamAr.addEventListener("upload-cancelled") { payload ->
  GlamArLogger.d("TAG", "GlamAr: User cancelled uploading model image")
};

iOS

GlamAr.addEventListener(event: "upload-started") { payload in
print("GlamAr: User started uploading their own model image to use")
}

GlamAr.addEventListener(event: "upload-cancelled") { payload in
print("GlamAr: User cancelled uploading model image")
}

React Native

GlamArEmitter.on("upload-started", (payload) => {
console.log("GlamAr: User started uploading their own model image to use");
});

GlamArEmitter.on("upload-cancelled", (payload) => {
console.log("GlamAr: User cancelled uploading model image");
});

overriden-ui-action

Fired when any UI that is prompted to be shown but has been deactivated from GlamAR console. User inside custom code can toggle ui as per his need. So when inside SDK that perticular UI is supposed to activate, instead of activating it, it will send this event with two variables

• type in string | with possible values of popup|screen as values
• name in string | with possible value of name of any overriden ui available

Note: Restart popup is dependent on the category choosen, it shows up for EyePD flow and Skin Analysis flow. So if you override this popup it will not show up for both cases

Web / React

// If 'heroScreen' has been overridden, this triggers once the SDK loads successfully after 'init'
GlamAR.addEventListener('overriden-ui-action', ({ type, name }) => {
  console.log("GlamAR: type", type, "name", name);
  if (type === "screen" && name === "heroScreen") {
      // Show your own hero screen
      // Show your own UI for Live TryOn or Model TryOn
      // Call GlamAR.open() and GlamAR.open("imgTryOn") respectively
  }
});

// If 'quit' has been overridden, this triggers when the popup opens after 'X' icon is clicked
GlamAR.addEventListener('overriden-ui-action', ({ type, name }) => {
  console.log("GlamAR: type", type, "name", name);
  if (type === "popup" && name === "quit") {
      // Show your own quit popup
      // 'No' just closes the popup
      // 'Yes' call GlamAR.close()
  }
});

Flutter

// If 'heroScreen' has been overridden, this triggers once the SDK loads successfully after 'init'
GlamAr.addEventListener('overriden-ui-action', (payload) {
  final type = payload['type'];
  final name = payload['name'];
  debugPrint('GlamAr: type $type name $name');
  if (type == "screen" && name == "heroScreen") {
      // Show your own hero screen
      // Show your own UI for Live TryOn or Model TryOn
      // Call GlamAr.open() and GlamAr.open("imgTryOn") respectively
  }
});

// If 'quit' has been overridden, this triggers when the popup opens after 'X' icon is clicked
GlamAr.addEventListener('overriden-ui-action', (payload) {
  final type = payload['type'];
  final name = payload['name'];
  debugPrint('GlamAr: type $type name $name');
  if (type == "popup" && name == "quit") {
      // Show your own quit popup
      // 'No' just closes the popup
      // 'Yes' call GlamAr.close()
  }
});

Android

// If 'heroScreen' has been overridden, this triggers once the SDK loads successfully after 'init'
GlamAr.addEventListener("overriden-ui-action") { payload ->
  val type = payload["type"]
  val name = payload["name"]
  GlamArLogger.d("TAG", "GlamAR: type $type name $name")
  if (type == "screen" && name == "heroScreen") {
      // Show your own hero screen
      // Show your own UI for Live TryOn or Model TryOn
      // Call GlamAR.open() and GlamAR.open("imgTryOn") respectively
  }
};

// If 'quit' has been overridden, this triggers when the popup opens after 'X' icon is clicked
GlamAR.addEventListener("overriden-ui-action") { payload ->
  val type = payload["type"]
  val name = payload["name"]
  GlamArLogger.d("TAG", "GlamAR: type $type name $name")
  if (type == "popup" && name == "quit") {
      // Show your own quit popup
      // 'No' just closes the popup
      // 'Yes' call GlamAR.close()
  }
};

iOS

// If 'heroScreen' has been overridden, this triggers once the SDK loads successfully after 'init'
GlamAr.addEventListener(event: "overriden-ui-action") { payload in
  if let type = payload["type"], let name = payload["name"] {
  print("GlamAr: type \(type) name \(name)")
      if type == "screen" && name == "heroScreen" {
          // Show your own hero screen
          // Show your own UI for Live TryOn or Model TryOn
          // Call GlamAr.open() and GlamAr.open("imgTryOn") respectively
      }
  }
}

// If 'quit' has been overridden, this triggers when the popup opens after 'X' icon is clicked
GlamAr.addEventListener(event: "overriden-ui-action") { payload in
  if let type = payload["type"], let name = payload["name"] {
      print("GlamAr: type \(type) name \(name)")
      if type == "popup" && name == "quit" {
      // Show your own quit popup
      // 'No' just closes the popup
      // 'Yes' call GlamAr.close()
      }
  }
}

React Native

// If 'heroScreen' has been overridden, this triggers once the SDK loads successfully after 'init'
GlamArEmitter.on("overriden-ui-action", (payload) => {
  const { type, name } = payload;
  console.log("GlamAr: type", type, "name", name);
  if (type === "screen" && name === "heroScreen") {
      // Show your own hero screen
      // Show your own UI for Live TryOn or Model TryOn
      // Call GlamAr.open() and GlamAr.open("imgTryOn") respectively
  }
});

// If 'quit' has been overridden, this triggers when the popup opens after 'X' icon is clicked
GlamArEmitter.on("overriden-ui-action", (payload) => {
  const { type, name } = payload;
  console.log("GlamAr: type", type, "name", name);
  if (type === "popup" && name === "quit") {
      // Show your own quit popup
      // 'No' just closes the popup
      // 'Yes' call GlamAr.close()
  }
});