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 us see together how to use those. We will 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
</button>

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
</button>

In order to exit the adjust mode, we wi’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. This is the basic structure for our adjust notice:

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

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 create a button, and bind to it the .load() method. We provide 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
</button>

Let us 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.