Skip to main content

React Setup

As you follow this tutorial, we recommend using our demo project reference to assist you in integrating the SDK into your project.

icon

React Demo Project

Prerequisites​

To follow along you should have basic knowledge of creating web apps with Javascript and it's ecosystem. In this tutorial we are going to use:

  • Webpack — Bundler for your JavaScript apps.
  • NPM — JavaScript package manager.

Don't worry if you don't have a lot of experience with these (or any experience at all). It is pretty straightforward to use and we will explain everything along.

Install node.js to be able to use NPM and Webpack if you haven't already.

  • Basic knowledge of React and JavaScript
  • Your access key must be setup under Pixelbin > GlamAR console.
  • Any valid SKU inside your Product Inventory under GlamAR.

Visit Getting Started Page if access key or SKU has not been created

Installation​

Once you have obtained your access key, you're ready to integrate the GlamAR SDK into your Javascript project. This can be achieved through two primary methods:

  1. Installing it from NPM and using a build tool such as Parcel, WebPack, or Vite.
  2. Utilizing script tags

NPM​

Add GlamAR Web SDK to your project using npm:

npm i @glamario/core-web

Then you can simply import GlamAR SDK as follows

import * as GlamAR from "@glamario/core-web";

Because we use ES2017 syntax (such as import), this workflow assumes you are using a modern browser or a bundler/transpiler to convert your code to something older browsers understand. However, you are free to use any build tool that you prefer.

Script tag​

Instead of NPM you can add GlamAR Web SDK using script tag. Add the following code to an HTML file:

<script src="https://cdn.glamar.io/sdk/wrapper"></script>

Initialization​

To get started, The first step is to initialize GlamAR by calling the init function:

GlamAR.init("YOUR CONTAINER ID", "YOUR ACCESS KEY", {
  platform: "web",
});

Replace 'YOUR CONTAINER ID' with your CSS container ID and 'YOUR ACCESS KEY' with your organization AccessKey.

NPM​

// Import GlamAR package
import * as GlamAR from "@glamario/core-web";

// Initialize GlamAR
function InitGlamAr() {
  const config = {
    platform: "web",
  };
  GlamAR.init("container__frame_wrapper", "YOUR ACCESS KEY", config);
}

Script tag​

<head>
  <!-- Script to load GlmarAR SDK -->
  <script src="https://cdn.glamar.io/sdk/wrapper"></script>
</head>
<body>
  <!-- Div element where SDK will be inserted -->
  <div style='width: 640px; height: 360px' id='container__frame_wrapper'></div>
  <!-- Initialize GlamAR -->
  <script>
    (function() {
      GlamAR.init("container__frame_wrapper", "YOUR ACCESS KEY", {
        platform: "web",
      });
    })();
  </script>
</body>

Replace 'YOUR ACCESS KEY' with your organization AccessKey.

Basic Functions​

addEventListener​

Event listeners are essential soon after initialization is called to start listening to GlamAR SDK callback events.

GlamAR.addEventListener("*", (e) => {
  switch (e) {
    case "loaded":
      // Triggered when the SDK has successfully loaded
      // Use this to handle any setup tasks that depend on the SDK being ready
      break;
    case "sku-applied":
      // Triggered when a SKU has been successfully applied
      // Useful for updating UI or confirming to the user that the SKU is active
      break;
  }
});

After calling init, best practise is to wait to receive the event "loaded" before calling any other function

applyBySku​

Load a virtual try-on using applyBySku method and passing the relevant SKU ID.

GlamAR.applyBySku("YOUR SKU ID"); // Replace with a valid SKU ID from your Console

applyByCategory​

Allows the client to pass a subcategory (e.g., sunglasses,necklace,earrings), which the SDK will use to fetch all corresponding SKUs from the Console’s product inventory.

GlamAR.applyByCategory("sunglasses"); // Replace with the desired category

open​

Open the live camera to see the SKU that you applied. If no sku data has been pass to SDK, it will show an error

GlamAR.open();