The Jeeliz Glasses VTO widget is a javascript library that lets us add a virtual try-on widget to a web app. The VTO experience combines the use of 3D technologies in the browser and of our custom deep learning framework. The latter is used to train neuron networks that can analyze a video stream in order to detect a human face. We already wrote an article on How to use the Jeeliz VTO widget in your everyday projects, that explains how to setup a project in order to use the VTO widget.

Today, we’ll see together how to use the widget VTO in a business logic. We’ll build a small VTO app that, in addition to VTO experience, will direct our users to the amazon page for the tried-on glasses model in order to see the price of the item. By using the amazon’s affiliate program, we’ll be able to get a percentage on what the users coming from our web app buy. Let’s get started !

Setting up our project

After having followed the article we mentioned before, we should have the start of an app, with the VTO widget running. Here’s a complete boilerplate code to run the widget. Between the head tags:

<title>VTO Widget Amazon</title>
<script src="https://appstatic.jeeliz.com/jeewidget/JeelizNNCwidget.js"></script>
<script>
  function startWidget() {
    JEEWIDGET.start({
      sku: 'blaze_round_or_bleudegrademiroir',
      searchImageMask: 'https://appstatic.jeeliz.com/jeewidget/images/target.png',
      searchImageColor: 0xFF0000
     })
   }
</script>

And in the body:

<div id="JeeWidget">
  <canvas id="JeeWidgetCanvas"></canvas>
</div>

Let’s add a bit of CSS to make it clean:

#JeeWidget {
  width: 800px!important;
  height: 450px!important;
  top: 50%;
  left: 50%;
  position: relative;
  transform: translate(-50%, -50%);
  padding: 20px;
  background: #FAFAFA;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

We’ll now add the buttons will let us switch between several models.

Adding the switch models feature

The first step here is to select the glasses frames we’d like to use. I selected 3 models to keep our app simple, but feel free to use as many as you like – see here the complete list skus made available for free. We store our strings in an array named glassesSkus:

const glassesSkus = ['blaze_round_or_bleudegrademiroir', 'rayban_aviator_or_vertFlash', 'rayban_wayfarer_havane_vert'];

Then we create three buttons, one for each model.

<div class="buttonsContainer">
  <button id="model1">Model 1</button>
  <button id="model2">Model 2</button>
  <button id="model3">Model 3</button>
</div>

Now, we write the JavaScript function that will handle the loading of the different models.

Building our loadModel function

We create a function named loadModel():

function loadModel(event) {
  // We check which button was checked
  switch(event.target.id) {
    case model1:
      // And load the model
      JEEWIDGET.load(glassesSkus[0]);
      break;
    case model2:
      // And load the model
      JEEWIDGET.load(glassesSkus[1]);
      break;
    case model3:
       // And load the model
       JEEWIDGET.load(glassesSkus[2]);
       break;
     default:
       return;
  }
}

We add an onclick event handler on our buttons:

<button onclick="loadModel(event)" id="model1">Model 1</button>
<button onclick="loadModel(event)" id="model2">Model 2</button>
<button onclick="loadModel(event)" id="model3">Model 3</button>

Let us try it out ! The buttons work as intended, great! The next step is to get the URLs we want our users to visit when they click on our See price button.

Getting our product URLs

For each of our glasses model, we need to visit amazon.com and search for the model. Once we have found a sale that satisfies us, we copy the URL. We don’t need to copy all the URL but only from the start to the product ASIN, which is a string used by Amazon to reference its products (i.e.: B07N7J37P3). We store these URLs in an object named productURLs:

const productURLs = [
  'https://www.amazon.fr/Lunettes-Ray-Ban-Junior-RJ-9067SN/dp/B07N7J37P3',
  'https://www.amazon.fr/Ray-Ban-mixte-adulte-Montures-lunettes/dp/B000EYP57K',
  'https://www.amazon.fr/Ray-Ban-Sonnenbrille-WAYFARER-2140-902/dp/B001758ZHM'
];

Great! We now set up our Amazon affiliate account to be able to add our affiliate tag to these URLs.

Setting up our Amazon affiliate account

In Google, let\’s search for amazon affiliate program.

We create an account and get our affiliate tag. We are now able to add this tag to our Amazon product URLs. When the user will click on our button, our affiliate tag will be detected by Amazon. If this user then buys stuffs on Amazon, we wi’ll get 10% over the sale. We will save our tag like this:

const affiliateTag = "?tag=youraffiliatetag";

Nice. Let us create the See price button.

Adding the See price button

The See price button will actually be an a tag, styled to look like a button. We link it with the amazon URL of the first glasses model we show, with our affiliated tag provided at the end:

<a target="_blank" href="https://www.amazon.fr/Lunettes-Ray-Ban-Junior-RJ-9067SN/dp/B07N7J37P3/?tag=youraffiliatetag id=buttonSeePrice">See Price</a>

We will add a bit of styling for our button:

#buttonSeePrice {
  background: #1e61b4;
  color: white;
  text-decoration: none;
  display: block;
  width: 150px;
  padding: 10px 15px;
  border-radius: 3px;
  margin: 20px auto;
  font-family: Helvetica;
  text-align: center;
}

We create a function setURLButtonSeePrice(), that will update the href attribute of our link:

function setURLButtonSeePrice(index) {
  const button = document.getElementById('buttonSeePrice');
  // We modify the href attribute
  button.setAttribute(href, productURLs[index] + affiliateTag);
}

We add a call for each case in loadModel():

function loadModel(event) {
  // We check which button was checked
  switch(event.target.id) {
    case model1:
      // And load the model
      JEEWIDGET.load(glassesSkus[0]);
      setURLButtonSeePrice(0);
      break;
    case model2:
      JEEWIDGET.load(glassesSkus[1]);
      setURLButtonSeePrice(1);
      break;
    case model3:
       JEEWIDGET.load(glassesSkus[2]);
       setURLButtonSeePrice(2);
       break;
     default:
       return;
  }
}

Great, our button/link redirects to the intended page for each model. We now have a basic VTO solution from start to sale! But we can still improve our solution; in order to do so I invite you to check out the advanced features of the Jeeliz Widget VTO API.