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’ll store our strings in an array named glassesSkus:

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

We’ll then 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>

We’ll now write the Javascript that will handle loading the different models.

Building our loadModel function

We’ll 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’ll then 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’s try it out !

The buttons work as intended, great!
The next step will be to get the URLs we’ll want our users to visit when they’ll click on our “See price” button.

Getting our product URLs

For each of our glasses model, we’ll need to visit amazon.com and search for the model. Once we have found a sale that satisfies us, we’ll 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’ll 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’ll 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’ll create an account and get our affiliate tag. We’ll now be 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 stuff on Amazon, we’ll get 10% over the sale. Isn’t that great?
We’ll save our tag like this:

const affiliateTag = "?tag=youraffiliatetag";

Nice. Let’s 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’ll give it the amazon URL of the first glasses model we show, with our affiliated tag added to its 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’ll now 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.