Skip to main content

SDK Demo

To get started with the GlamAR SDK, follow these steps and understand how you can integrate GlamAR SDK within your existing application. If you need further assistance, please contact us at support@glamar.io.

Setting up the Environment and Execution​

Clone the repository​

To clone the repository:

$ git clone https://github.com/pixelbin-io/glamar-web-demo.git

You can follow a thorough guide here

Starting the project​

To start the project locally,

1. Install npm packages​

yarn install

2. Setup local SSL certificate​

  1. First install mkcert. Refer this link to install it.
  2. We will be using mkcert to generate locally-trusted development certificate. Use this command to generate SSL certificate
$ mkcert -key-file key.pem -cert-file cert.pem "*.glamar.io"

  1. Create a folder named ssl at root level of repository.

  2. Copy the two .pem files (i.e key.pem & cert.pem) generated above command to ssl folder

  3. Next up we will bind localhost or 127.0.0.1 to host name i.e local.sdk.glamar.io

  4. open and edit /etc/hosts and insert

127.0.0.1       local.sdk.glamar.io

How to Open /etc/hosts File

  • Mac: Use Terminal and type sudo nano /etc/hosts.
  • Windows: Open hosts file in Notepad as administrator from C:\Windows\System32\drivers\etc.

Remember to be cautious when editing system files like hosts.

3. Running the Project​

  1. To run the project locally, use the following command:
yarn serve

This command will start the server, and your code will be running on http://localhost:59089.

  1. Open your web browser and navigate to http://localhost:59089 to view the project.

4. Setting Up GlamAR Activation Key​

To use GlamAR's features, update the TryonFrame.jsx file with your GlamAR Activation Key. In useEffect, replace 'Replace it with your GlamAR Activation Key' with your actual key. For SKU-specific features, refer to the GlamAR SDK documentation.

5. Usage​

If you are using via npm, then you need to import the GlamAR SDK as a module. Then you can call the APIs available on the GlamAR object.

Import GlamAR module

import * as GlamAR from "glamar-sdk";

Init GlamAR module with your API KEY

// Pass in the id of a container and your API key
GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
});

GlamAR.addEventListener("loaded", () => GlamAR.applyBySku("YOUR SKU ID"));

Call applyBySku on any event to apply the desired sku

<button onclick="GlamAR.applyBySku("YOUR SKU ID")">Apply Lip Color</button>