Flutter 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 Access key and optional configuration.

GlamAr.init(
  accessKey: 'YOUR_ACCESS_KEY', // Replace with your actual key
);

Initialization Config

Parameters	Type	Description	Options
accessKey	`string`	Pass your unique Access Key
category	`string`	Pass any compatible subcategory	`sunglasses`, `necklace`, `earrings` etc. Check supported subcategories

Example

GlamAr.init(
  accessKey: "YOUR_ACCESS_KEY", // Requried - Replace with your actual key
  debug: true,
);

Sku config

Our SDK currently processes sku's in two formats:

Id : This is an unique id we give to every SKU created with GlamAR console < Product Inventory. You can check the sku-id in the inventory under column SKU ID
Config : This is an object that can be created using the exsisting SKU in your inventory.

Any SKU config must contain 4 key item

{
  category: "desired-category", // `eyeware`,`jewellery`,`accessories` etc.
  subCategory: "desired-subCategory", // `sunglasses`, `necklace`, `earring`
  status: "PUBLISHED",
  arEffect:{
    // Copy this entire object as it contains all the necessary rendering data we need to show the desired SKU as custimized in the console
  }
}

You can also add in 'productName' and 'productImage' properties in the object. These will be used in displaying SKU in our SKU selection area at the bottom.

We provide a Model Viewer for viewing your model in 3D. It supports displaying the dimensions of model, if provided to it. These dimensions are shown in 'cm' measurment. To use this feature, you can add a meta tag inside your object. Example:

{
  category: "eyeware",
  subCategory: "sunglasses",
  status: "PUBLISHED",
  arEffect:{
    // Details
  }
  meta:{
    dimensions: {
        length: "length-of-model",
        width: "width-of-model",
        height: "height-of-model",
    },
  }
}

Parameters	Type	Description
category	`string`	`eyeware`, `makeup`, `jewellery` etc.
subCategory	`string`	`sunglasses`, `necklace`, `earrings` etc.
productName	`string`	Name for the product
productImage	`string`	Image URL for the product
arEffect	`ArEffectOptions`	Object contains data that is used to render model accurately
meta	`MetaOptions`	Object contains miscellaneous data

ArEffectOptions

Parameters	Type	Description
transform	`object`	Contains position and rotation settings
envSettings	`object`	Contains lighting and environment settings
effectAssets2D	`string[]`	Contains urls of images for SKU rendering
effectAssets3D	`EffectAssets3DOptions`	Contains url of 3D file for rendering

EffectAssets3DOptions

Parameters	Type	Description
id	`string`	Always send "full"
url	`string`	Valid url to the desired asset. Supported extension is `.glb` and `.txt`

MetaOptions

Parameters	Type	Description
dimensions	`object`	Contains length, width and height properties

Post-Initialization Methods

applyBySku

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

applyByCategory

GlamAr.applyByCategory(subcategory);

Pass a subcategory (e.g., sunglasses,necklace,earrings), which the SDK will use to fetch all corresponding SKUs from the Console’s product inventory.
Return Value: None

Parameters	Type	Description	Options
subcateogry	`string`	Pass any compatible subcategory	`sunglasses`, `necklace`, `earrings` etc. Check supported subcategories

applyMultipleConfigData

GlamAr.applyMultipleConfigData(skuConfigArray);

Display multiple SKU types at once. The input should be an array of sku configs. Each item can be of diffrent subcategory eg: sunglasses, caps, earrings, etc.
Return Value: None

Parameters	Type	Description
skuConfigArray	`object`	An Array of SKU Configs

Following is an example of above skuConfigArray for applyMultipleConfigData.

const data = [
  {
    category: "eyewear",
    subCategory: "eyeglasses",
    status: "PUBLISHED",
    arEffect: {
      envSettings: {
        useDefaultEnvironment: true,
      },
      effectAssets3D: [
        {
          id: "full",
          url: "VALID-ASSET-URL", // We support .glb files
        },
      ],
    },
  },
  {
    category: "accessories",
    subCategory: "caps",
    status: "PUBLISHED",
    productName: "Test cap",
    productImage:
      "https://cdn.pixelbin.io/v2/dummy-cloudname/original/05-DP1YgvlO2.png",
    arEffect: {
      envSettings: {
        useDefaultEnvironment: true,
      },
      effectAssets3D: [
        {
          id: "full",
          url: "VALID-ASSET-URL", // We support .glb files
        },
      ],
    },
  },
  {
    category: "jewellery",
    subCategory: "earring",
    status: "PUBLISHED",
    productName: "Test earring",
    arEffect: {
      envSettings: {
        useDefaultEnvironment: true,
      },
      effectAssets3D: [
        {
          id: "full",
          url: "VALID-ASSET-URL", // We support .glb files
        },
      ],
    },
    meta: {
      size: "",
    },
  },
];
GlamAr.applyMultipleConfigData(data);

Users will see separate tabs for each category type in the SDK UI.

addEventListener

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.

removeEventListener

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.

open

GlamAr.open();

Opens the AR widget.
Return Value: None

Parameters	Type	Description	Options
mode	string	Opens Live-Tryon, Model/Image-tryon and Model Viewer	`modelViewer` `imgTryOn`
imgURL	string	Valid image URL	Any valid URL

No parameters: Start Live VTO
```
GlamAr.open();
```
Model Viewer: Start Model Viewer
```
GlamAr.open("modelViewer");
```
Image Try-On:
- Opens the image/model selection screen:
```
GlamAr.open("imgTryOn");
```
- Opens try-on directly with a specific image:
```
GlamAr.open("imgTryOn", "url_of_image");
```

Switching Views

While in Live or Image mode, calling:
```
GlamAr.open("modelViewer");
```
will open the model viewer. Calling GlamAr.open() again returns to the selected Try-On type.
To switch from Live to Image mode, call:
```
GlamAr.back();
```
This resets the Try-On session and then call GlamAr.open() with desired parameter

Note: The SKU must already be applied. If not, the SDK will display an error.

reset

GlamAr.reset();

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

Parameters	Description
None	No parameters required.

close

GlamAr.close();

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

Parameters	Description
None	No parameters required.

snapshot

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.

comparison

GlamAr.comparison(state, skus);

Toggles comparison mode in AR widget.
Return Value: None

Pass a state (i.e, open or close) to toggle between UI and with it 2 SKU ids or Skuconfig of same subcategory say sunglasses or necklace. Diffrent subcategory comparision is not supoorted. The first sku will be shown on the left side and the other one on the right side.

Parameters	Type	Description	Options
state	`string`	State to show or hide the UI respectively	`open` `close`
skus	`string[] \| object[]`	Provide 2 SKU Ids or 2 SKU json in an array	["skudID1", "skudID2"] ["SkuConfig1", "SkuConfig2"]

GlamAr.comparison("open", ["skudID1", "skudID2"]); // replace skudID1 and skudID2 with two SKU id's
GlamAr.comparison("close"); // When we send close we don't need to send SKUs

Eye PD Measurement Flow

We provide an integrated supports for eye pupillary distance (PD) scanning. This is activated when viewing any eyeware categories. If user wants to show his own UI and use this service we have function GlamAr.eyePD() for that case.

GlamAr.eyePD("start"); // To launch or restart Eye PD flow
GlamAr.eyePD("close"); // To exit Eye PD and return to active Try-On

Events

Refer to Setup Page to understand how we can register to events listed Check Events Page for event details.

Initialization Method​

Initialization Config​

Example​

Sku config​

ArEffectOptions​

EffectAssets3DOptions​

MetaOptions​

Post-Initialization Methods​

applyBySku​

applyByCategory​

applyMultipleConfigData​

addEventListener​

removeEventListener​

open​

Switching Views​

reset​

close​

snapshot​

comparison​

Eye PD Measurement Flow​

Events​