Skin Analysis 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
Flutter
Android
iOS
React Native

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

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

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

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

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
Flutter
Android
iOS
React Native

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

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

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

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

// 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
Flutter
Android
iOS
React Native

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

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

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

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

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

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

// 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
Flutter
Android
iOS
React Native

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

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

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

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

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

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

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

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

// 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
Flutter
Android
iOS
React Native

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

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

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

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

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

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

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

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

// 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
Flutter
Android
iOS
React Native

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

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

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

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

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
Flutter
Android
iOS
React Native

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

// 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');
});

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

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

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

Skin Analysis Events

skin-analysis

Fired for every skin realted data response that has been enabled by user in GlamAR console.

Web / React
Flutter
Android
iOS
React Native

GlamAR.addEventListener("skin-analysis", ({ option, value }) => { 
  console.log("GlamAR: Skin Analysis");
  switch(option) {
      case "capture":
          // Image that was clicked
          console.log("GlamAR: Capture", value);
          break;
      case "result":
          // Skin Analysis data
          console.log("GlamAR: Result", value);
          break;
      case "retouch":
          // Retouch data
          console.log("GlamAR: Retouch", value);
          break;
      case "recommendation":
          // Recommendation data
          console.log("GlamAR: Recommendation", value);
          break;
      case "error":
          // Error
          console.log("GlamAR: Error", value);
          break;
  }
});

GlamAr.addEventListener('skin-analysis', (payload) {
  final option = payload['option'];
  final value = payload['value'];
  debugPrint('GlamAr: Skin Analysis');
  switch (option) {
      case "capture":
          // Image that was clicked
          debugPrint('GlamAr: Capture $value');
          break;
      case "result":
          // Skin Analysis data
          debugPrint('GlamAr: Result $value');
          break;
      case "retouch":
          // Retouch data
          debugPrint('GlamAr: Retouch $value');
          break;
      case "recommendation":
          // Recommendation data
          debugPrint('GlamAr: Recommendation $value');
          break;
      case "error":
          // Error
          debugPrint('GlamAr: Error $value');
          break;
  }
});

GlamAr.addEventListener("skin-analysis") { payload ->
val option = payload["option"]
val value = payload["value"]
GlamArLogger.d("TAG", "GlamAR: Skin Analysis")
when (option) {
      "capture" -> {
          // Image that was clicked
          GlamArLogger.d("TAG", "GlamAR: Capture $value")
      }
      "result" -> {
          // Skin Analysis data
          GlamArLogger.d("TAG", "GlamAR: Result $value")
      }
      "retouch" -> {
          // Retouch data
          GlamArLogger.d("TAG", "GlamAR: Retouch $value")
      }
      "recommendation" -> {
          // Recommendation data
          GlamArLogger.d("TAG", "GlamAR: Recommendation $value")
      }
      "error" -> {
          // Error
          GlamArLogger.d("TAG", "GlamAR: Error $value")
      }
}
};

GlamAr.addEventListener(event: "skin-analysis") { payload in
  if let option = payload["option"], let value = payload["value"] {
      print("GlamAr: Skin Analysis")
      switch option {
          case "capture":
              // Image that was clicked
              print("GlamAr: Capture \(value)")
          case "result":
              // Skin Analysis data
              print("GlamAr: Result \(value)")
          case "retouch":
              // Retouch data
              print("GlamAr: Retouch \(value)")
          case "recommendation":
              // Recommendation data
              print("GlamAr: Recommendation \(value)")
          case "error":
              // Error
              print("GlamAr: Error \(value)")
          default:
              break
      }
  }
}

GlamArEmitter.on("skin-analysis", (payload) => {
const { option, value } = payload;
console.log("GlamAr: Skin Analysis");
switch (option) {
  case "capture":
    // Image that was clicked
    console.log("GlamAr: Capture", value);
    break;
  case "result":
    // Skin Analysis data
    console.log("GlamAr: Result", value);
    break;
  case "retouch":
    // Journey data
    console.log("GlamAr: Retouch", value);
    break;
  case "recommendation":
    // Recommendation data
    console.log("GlamAr: Recommendation", value);
    break;
  case "error":
    // Error
    console.log("GlamAr: Error", value);
    break;
}
});

Fired when user clicks on share button or calls snapshot() function.

Web / React
Flutter
Android
iOS
React Native

GlamAR.snapshot();
// Listen for share event to get PDF generated
GlamAR.addEventListener("share", (pdf) => { 
  console.log("GlamAR: Skin Analysis PDF", pdf);
});

GlamAr.snapshot();
// Listen for share event to get PDF generated
GlamAr.addEventListener('share', (payload) {
  final pdf = payload['pdf'];
  debugPrint('GlamAr: Skin Analysis PDF $pdf');
});

GlamAr.snapshot();
// Listen for share event to get PDF generated
GlamAr.addEventListener("share") { payload ->
  val pdf = payload["pdf"]
  GlamArLogger.d("TAG", "GlamAR: Skin Analysis PDF $pdf")
};

GlamAr.snapshot();
// Listen for share event to get PDF generated
GlamAr.addEventListener(event: "share") { payload in
  if let pdf = payload["pdf"] {
      print("GlamAr: Skin Analysis PDF \(pdf)")
  }
}

GlamAr.snapshot();
// Listen for share event to get PDF generated
GlamArEmitter.on("share", (payload) => {
  const { pdf } = payload;
  console.log("GlamAr: Skin Analysis PDF", pdf);
});

UI Events

ui-interactions

Fired when 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 behaviours:

clicked
toggleOn| toggleOff

Note: Exception for ,modelscreen, is that it sends index of the selected model.

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
Flutter
Android
iOS
React Native

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 */ }
}
});

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 */ }
}
});

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 */ }
  }
}};

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 */ }
}
}}

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 */ }
}
});

saHeroScreen

This is the landing screen for Skin Analysis. It has one button event:

Clicked on Start Scan button

Web / React
Flutter
Android
iOS
React Native

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

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

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 == "saHeroScreen") {
      if (buttonType == "startNow") { /* Start Scan button clicked */ }
  }
}};

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 == "saHeroScreen" {
  if buttonType == "startNow" { /* Start Scan button clicked */ }
}
}}

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

saResultScreen

This is the result screen of Skin Analysis, where all scores, journeys, and recommendations are displayed. It has one button event:

Clicked on Add to Cart button

Web / React
Flutter
Android
iOS
React Native

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

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

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 == "saResultScreen") {
      if (buttonType == "addToCart") { /* Add to Cart button clicked */ }
  }
}};

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 == "saResultScreen" {
  if buttonType == "addToCart" { /* Add to Cart button clicked */ }
}
}}

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

saBottomNavigationPanel

In the result screen of Skin Analysis, there is a bottom navigation panel with multiple buttons:

Clicked on Summary button
Clicked on Score button
Clicked on Product button
Clicked on Ask Me button

Web / React
Flutter
Android
iOS
React Native

GlamAR.addEventListener("ui-interactions", ({ screenType, buttonType }) => {
console.log("GlamAR: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "saBottomNavigationPanel") {
  if (buttonType === "summary") { /* Summary button clicked */ }
  if (buttonType === "score") { /* Score button clicked */ }
  if (buttonType === "product") { /* Product button clicked */ }
  if (buttonType === "askMe") { /* Ask Me button clicked */ }
}
});

GlamAr.addEventListener('ui-interactions', (payload) {
final screenType = payload['screenType'];
final buttonType = payload['buttonType'];
debugPrint('GlamAr: UI event: $screenType interacted with: $buttonType');
if (screenType == 'saBottomNavigationPanel') {
  if (buttonType == 'summary') { /* Summary button clicked */ }
  if (buttonType == 'score') { /* Score button clicked */ }
  if (buttonType == 'product') { /* Product button clicked */ }
  if (buttonType == 'askMe') { /* Ask Me button clicked */ }
}
});

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 == "saBottomNavigationPanel") {
      if (buttonType == "summary") { /* Summary button clicked */ }
      if (buttonType == "score") { /* Score button clicked */ }
      if (buttonType == "product") { /* Product button clicked */ }
      if (buttonType == "askMe") { /* Ask Me button clicked */ }
  }
}};

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 == "saBottomNavigationPanel" {
  if buttonType == "summary" { /* Summary button clicked */ }
  if buttonType == "score" { /* Score button clicked */ }
  if buttonType == "product" { /* Product button clicked */ }
  if buttonType == "askMe" { /* Ask Me button clicked */ }
}
}}

GlamArEmitter.on("ui-interactions", (payload) => {
const {{ screenType, buttonType }} = payload;
console.log("GlamAr: UI event:", screenType, "interacted with:", buttonType);
if (screenType === "saBottomNavigationPanel") {
  if (buttonType === "summary") { /* Summary button clicked */ }
  if (buttonType === "score") { /* Score button clicked */ }
  if (buttonType === "product") { /* Product button clicked */ }
  if (buttonType === "askMe") { /* Ask Me 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
Flutter
Android
iOS
React Native

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 */ }
}
});

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 */ }
}
});

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 */ }
  }
}};

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 */ }
}
}}

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
Flutter
Android
iOS
React Native

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 */ }
}
});

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 */ }
}
});

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 */ }
  }
}};

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 */ }
}
}}

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
Flutter
Android
iOS
React Native

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 */ }
}
});

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 */ }
}
});

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 */ }
  }
}};

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 */ }
}
}}

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
Flutter
Android
iOS
React Native

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 */ }
}
});

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 */ }
}
});

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 */ }
  }
}};

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 */ }
}
}}

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
Flutter
Android
iOS
React Native

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

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 */ }
}
});

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 */ }
  }
}};

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 */ }
}
}}

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
Flutter
Android
iOS
React Native

// 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
});

// 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
});

// 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
};

// 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
  }
}

// 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-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
Flutter
Android
iOS
React Native

// 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();
});

// 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();
});

// 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()
};

// 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()
}

// 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
Flutter
Android
iOS
React Native

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

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

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

// 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")
}

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

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
Flutter
Android
iOS
React Native

// 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()
  }
});

// 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()
  }
});

// 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()
  }
};

// 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()
      }
  }
}

// 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()
  }
});

Life Cycle Events​

loading​

loaded​

opened​

closed​

reset​

error​

Camera Events​

camera-opened​

camera-closed​

camera-access-issue​

Skin Analysis Events​

skin-analysis​

share​

UI Events​

ui-interactions​

topNavigationPanel​

saHeroScreen​

saResultScreen​

saBottomNavigationPanel​

somethingWentWrongScreen​

cameraFailed and cameraAccessDenied​

restartPopUp​

quitPopUp​

toast​

add-to-cart​

add-to-cart-global​

Advanced Events​

subscription-invalid​

overriden-ui-action​

Life Cycle Events

loading

loaded

opened

closed

reset

error

Camera Events

camera-opened

camera-closed

camera-access-issue

Skin Analysis Events

skin-analysis

share

UI Events

ui-interactions

topNavigationPanel

saHeroScreen

saResultScreen

saBottomNavigationPanel

somethingWentWrongScreen

cameraFailed and cameraAccessDenied

restartPopUp

quitPopUp

toast

add-to-cart

add-to-cart-global

Advanced Events

subscription-invalid

overriden-ui-action