The Jeeliz VTO widget API is a Javascript library that lets you add a glasses virtual try-on experience to your web app. 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). Besides, we made available more than 300 glasses models for free to use (see the list of the skus here).
We saw in a previous article, How to use the Jeeliz VTO widget in your everyday projects, how to add a simple virtual try-on widget in your web app. But the Jeeliz VTO Widget library has several more useful features that can be used in your widget. Let’s see together how to use those. We’ll start from where we left things in a previous article, How to use the Jeeliz VTO widget in your everyday projects.

Adding a “Use a picture” button

In order to add a button that will allow the user to use a picture instead of the video stream from his/her webcam we only need to add a button having the “JeeWidgetFileInputButton” id. The Jeeliz Widget API automatically finds the button on page load and binds a click listener. Simply add the following block of HTML to your code:

<button id="JeeWidgetFileInputButton">
  Use a picture

The button will let the user upload a picture and show it in the canvas, with the glasses frame added.

Adding an “Adjust/Move the glasses” button

The Jeeliz VTO Widget API implements an “adjust mode”, which is a mode where the user can scale up and down the glasses by scrolling, or move the glasses by clicking and dragging his/her mouse on the canvas element. The “adjust mode” is enabled by clicking on a button bearing the “JeeWidgetAdjust” id:

<button id="JeeWidgetAdjust">
  Adjust the glasses

In order to exit the “adjust mode”, we’ll need to add a div to our page bearing the “JeeWidgetAdjustNotice” id. This element should be hidden by default (set to “display: none;” ), so that the Jeeliz VTO Widget API can show it or hide it when necessary. This element will be displayed when the “adjust mode” is enabled.
When this is done, we should add inside the div we just created a button bearing the “JeeWidgetAdjustExit” id. The Jeeliz VTO Widget will find this button on page load, and add to it a listener so that it disables the “adjust mode” when the user clicks on it. Here’s the basic structure for our adjust notice:

<div id="JeeWidgetAdjustNotice">
  This is the notice
  <button id="JeeWidgetAdjustExit">Quit the adjust mode</button>

Here we go! Our adjust mode is up and running.

Changing models

The VTO Widget can also be used as an item list or a catalogue in which our user will be able to quickly switch between several glasses frames. This is done by using the “.load()” method of the Jeeliz VTO Widget API.
We’ll simply create a button, and bind to it the “.load()” method. We’ll be passing to it the sku value of the frame we want to show when the user clicks on the button:

<button onclick="JEEWIDGET.load(' sku_of_the_glasses_to_show')">
  Change model

Let’s reload. And tada ! Upon click our new glasses frame is displayed.

Sum up

We saw together how to enrich our VTO Widget with a “use a picture” button, a “move/scale” button and a “change model” feature. An online demo is made available to see all of these features in actions. Bear in mind that a lot of models are available for free to use with the Widget; you can check the sku list here. And if you need any more info on the library please reach out.