React API References

Initialization Method

To get started, call the GlamAR.init method. This adds the GlamAR SDK into the target container and configures it with the provided API key and optional configuration.

GlamAR.init(containerId, apiKey, options);

Initialization Payload

Name	Type	Description
apiKey	string	Your Access Key
platform	string	Platform you're targeting (e.g. web)
category	string	Supports lots of categories
configuration	ConfigurationOptions	Initialization configuration object

Following are all the configuration options that can passed under theoptions object.
Subcategories defined in overview section can be passed in the category parameter.

ConfigurationOptions

Name	Type	Description
global	GlobalOptions	Global options that customize sdk ui and camera options
ui	UIOptions	Loader and watermark configuration object
ar	AROptions	3D Modelviewer options

GlobalOptions

Name	Type	Description
openLiveOnInit	boolean	Skip landing and go directly to camera
disableClose	boolean	Hide the close button
disableBack	boolean	Hide the back button

Example

GlamAR.init("containerId", "apiKey", {
  // other options
  configuration: {
    global: {
  "openLiveOnInit": true,
  "disableClose": false,
  "disableBack": false
}
    // other options
  }
});

UIOptions

Name	Type	Description
loader	LoaderOptions	Loader configuration options
watermark	WatermarkOptions	Watermark configuration options

LoaderOptions

Name	Type	Description
disable	boolean	Disable loader screen
jsonData	string	Custom Lottie animation JSON URL
backgroundColor	string	Loader screen background color (HEX or RGB)

Example

GlamAR.init("containerId", "apiKey", {
  // other options
  configuration: {
    loader: {
  "disable": false,
  "jsonData": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/loaders/loader_default.json",
  "backgroundColor": "#000000"
}
    // other options
  }
});

WatermarkOptions

Name	Type	Description
text	string	Text shown next to watermark
fontColor	string	Color of watermark text
logo	string	URL for the watermark logo image

Example

GlamAR.init("containerId", "apiKey", {
  // other options
  configuration: {
    watermark: {
  "text": "Water Mark Text",
  "fontColor": "#00ff00",
  "logo": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/icons/cxr_logo_w-yDFY_5Mio.svg"
}
    // other options
  }
});

AROptions

Name	Type	Description
disable3DUI	boolean	Hide 3D model viewer UI

Example

GlamAR.init("containerId", "apiKey", {
  // other options
  configuration: {
    ar: {
  "disable3DUI": false
}
    // other options
  }
});

Basic Example

GlamAR.init("containerId", "apiKey", {
  "apiKey": "YOUR_API_KEY",
  "platform": "web"
});

Advanced Example (with Configuration)

GlamAR.init("containerId", "apiKey", {
  "apiKey": "YOUR_API_KEY",
  "platform": "web",
  "category": "sunglasses",
  "configuration": {
    "global": {
      "openLiveOnInit": true,
      "disableClose": false,
      "disableBack": false
    },
    "ui": {
      "loader": {
        "disable": false,
        "jsonData": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/loaders/loader_default.json",
        "backgroundColor": "#000000"
      },
      "watermark": {
        "text": "Water Mark Text",
        "fontColor": "#00ff00",
        "logo": "https://cdn.pixelbin.io/v2/glamar-fynd-835885/original/glamar_assets/icons/cxr_logo_w-yDFY_5Mio.svg"
      }
    },
    "ar": {
      "disable3DUI": false
    }
  }
});

Post-Initialization Methods

GlamAR.applyBySku(skuId, callback);

Load a virtual try-on using applyBySku method and passing the relevant SKU Id.
Return Value: None

Parameters	Type	Description
SKU Id	string	A SKU ID.
callback	function	function, fires after the Sku is applied

GlamAR.addEventListener(eventName, handlerFunction);

Adds the listener to the given event name.
Return Value: None

Parameters	Type	Description
eventName	string	A Name of specific event or "*" To listen to the all the events.
handlerFunction	function	Your handler function that will listen to callback.

GlamAR.removeEventListener(eventName, handlerFunction);

Removes the given listener for the event name.
Return Value: None

Parameters	Type	Description
eventName	string	A Name of specific event or "*" To remove all the events.
handlerFunction	function	Your handler function that will listen to callback.

GlamAR.isLoaded();

Returns the status of module loading.
Return Value: true if loaded, otherwise false

Parameters	Description
None	No parameters required.

GlamAR.open();

Opens the AR widget.
Return Value: None

Parameters	Description
None	No parameters required.

GlamAR.reset();

Removes all the current effects from the canvas.
Return Value: None

Parameters	Description
None	No parameters required.

GlamAR.close();

Closes canvas and returns to the main widget page.
Return Value: None

Parameters	Description
None	No parameters required.

GlamAR.snapshot();

Takes a snapshot of the current result window. Result of the screen can be get from photo-loaded event in base64 formate.
Return Value: none

Parameters	Description
None	No parameters required.

GlamAR.openUploadMode(link);

Opens the AR widget in upload mode with a specified image.
Return Value: None

Parameters	Type	Description
link	string	URL of the image on which AR effects will be applied.

GlamAR.comparison(options, value);

Toggles comparison mode in AR widget.
Return Value: None

Parameters	Type	Description	Options
options	string	Options for the comparison mode.	sliderUI, touch
value	string	Show or hide the comparison.	show,hide

GlamAR.applyPatternById(patternId);

Applies a specific pattern in the same SKU for the makeup categories.
Return Value: None

Parameters	Type	Description
patternId	string	pattern Id listed inside SKU.

Events

Event	Payload	Description	Example Usage
loading	None	Fired when the GlamAR module is initiated and the SDK proceeds with the loading process.	GlamAR.addEventListener("loading", () => { console.log("GlamAR is loading..."); });
loaded	None	Fired when the GlamAR module is loaded.	GlamAR.addEventListener("loaded", () => { console.log("GlamAR is loaded."); });
opened	None	Fired when the GlamAR module is opened.	GlamAR.addEventListener("opened", () => { console.log("GlamAR opened."); });
closed	None	Fired when the canvas is closed and the user returns to the main widget page.	GlamAR.addEventListener("closed", () => { console.log("GlamAR closed."); });
camera-opened	None	Fired when the camera is opened.	GlamAR.addEventListener("camera-opened", () => { console.log("Camera opened."); });
camera-closed	None	Fired when the camera is closed.	GlamAR.addEventListener("camera-closed", () => { console.log("Camera closed."); });
camera-failed	None	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.	GlamAR.addEventListener("camera-failed", () => { console.log("Camera failed to open."); });
photo-loaded	Image (base64), Status (success/failed)	Fired when a screenshot of the AR effect is successful or fails.	GlamAR.addEventListener("photo-loaded", (payload) => { console.log("Photo status:", payload.Status); console.log("Base64 image:", payload.Image); });
sku-applied	None	Fired when a given SKU effect is applied.	GlamAR.addEventListener("sku-applied", () => { console.log("SKU applied successfully."); });
sku-failed	None	Fired when a given SKU is not applied successfully.	GlamAR.addEventListener("sku-failed", () => { console.log("Failed to apply SKU."); });
reset	None	Fired when all the effects are reset.	GlamAR.addEventListener("reset", () => { console.log("Effects reset."); });
error	Error: Error information	Fired anytime an error occurs.	GlamAR.addEventListener("error", (payload) => { console.error("Error:", payload.Error); });
upload-started	None	Fired when the upload mode dialogue is shown.	GlamAR.addEventListener("upload-started", () => { console.log("Upload started."); });
upload-cancelled	None	Fired when the upload mode dialogue is canceled.	GlamAR.addEventListener("upload-cancelled", () => { console.log("Upload cancelled."); });
subscription-invalid	string: Reason	Fired when the subscription is found to be invalid or expired.	GlamAR.addEventListener("subscription-invalid", (payload) => { console.warn("Subscription invalid:", payload); });