The Jeeliz VTO widget API is a Javascript library that lets you add a glasses virtual try-on widget to your web app in minutes. The widget uses our custom JS deep learning framework to detect the user’s face and add to it the glasses frame in augmented reality (AR). Although the library is technically advanced, we made sure that any developer could easily add a Jeeliz VTO widget to his/her website, by creating a simple API to interact with it. Besides, we made available more than 300 glasses models for free to use (see the list of the skus here). Let’s see together how to add the Jeeliz VTO Widget to a web app.

Adding the Jeeliz VTO script to our project

For starters, we’ll add the Jeeliz VTO script to our project. To do so, add to your index.html file:

<script src="https://appstatic.jeeliz.com/jeewidget/JeelizNNCwidget.js"></script>

Let’s reload our page. Great, we can now start using the Jeeliz Glasses VTO API.

Building the interface for our widget

The Jeeliz Widget API come with a list of functionalities that are detailed in the documentation. Today, we’ll build a light version of the widget. But we’ll see a few of the features that can be added for those wishing to build a more complex widget at the end of this article.
The next step is to build the widget interface, using HTML. The default template for the Jeeliz Widget VTO is:

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

Important: do not omit to precise the ids of the “div” container and the “canvas”; these ids should exactly match the ones in the template in order for the Jeeliz Widget API to be able to find and manipulate these elements.
Very well, the interface for our widget is set up. Now let’s start the VTO experience !

Starting the VTO experience

The last step is to start the VTO experience. To do so, we’ll use the “.start()” method of the Jeeliz Widget API, passing it the sku value of the glasses frame model we want to be displayed:

JEEWIDGET.start({
sku: 'blaze_round_or_bleudegrademiroir',
searchImageMask: 'https://appstatic.jeeliz.com/jeewidget/images/target.png',
searchImageColor: 0xFF0000
});

Let’s see what is going on here.
Firstly, the “sku” attribute defines the glasses 3D model loaded. The list of all the glasses models made available for free is shown here.
Secondly, the “searchImageMask” and the “searchImageColor” attributes define which image will be displayed as a spinner by the widget while it’s loading the 3D assets, along with the color applied to the image (which should be in white and black).

Let’s reload the page… and there we go ! Our widget is up and running !

Going further with the Jeeliz Widget API

Today we saw how to embed a simple VTO widget using the Jeeliz Widget VTO API. But we could do much more with this powerful library. Here are some of the features made available:

  • change the glasses model
  • use a picture instead of the video feed button
  • allow the user to scale and move the glasses

We’ll see together how to do so in the soon to be released article: Advanced use of the Jeeliz Widget VTO API. See you soon !