AR-Labs.io - docs

Getting started

Step 1: Initialization

This javascript code is responsible for enabling the widget on partner’s page. It should be added in the <head> section. It is important to use appropriate parameters explained below to assure that the authorization completes succesfully and that the solution is properly customized to partner’s needs.

  <script>
    (function (w,d,s,o,f,js,fjs) {
      w['arlab-site-widgets']=o;
      w[o] = w[o] || function () {(w[o].q = w[o].q || []).push(arguments)};
      if (d.getElementById(o)) return;
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'arlab', 'https://connect.ar-labs.io/v2/widget.js'));
    arlab('init', {apiKey:'fill partner api key here'});
  </script>
Parameter name Type Is it required? Description
apiKey String yes Your API key. If you don’t know your API key, please contact us.
language String no Language of text displayed on the button and in the modal window. Accepted values: ‘pl’, ’en’. Default value: ’en’.
queryParam String no Query parameter taken into account when matching links with products. If depending on a query parameter in your site’s url you want to display try-on for different products, provide this parameter. See: example below.
analytics Boolean [true/false] no If true, the application will collect information about what product is being tried on and the type of device on which the fitting room was launched. Otherwise we only count how many times was your try-on used each day. Default: false.

Step 2: Widget embedding

When you have placed the initialization code in your website’s source, the next step is to add the code responsible for displaying the try-on. For the standard, one product a time functionality place the below code in the <body> section of the product page and customize it to your needs using the parameters described below.

  <script>
    arlab('webfit', {append: '#ar_holder', autoplay: false});
  </script>

If your try on widget is expected to append two products to a single try on window (sets tab in partner.ar-labs.io) use the following:

  <script>
    arlab('webfit-set', {append: '#ar_holder', autoplay: false});
  </script>
Parameter name Type Is it required? Description
append String [html_markup] yes CSS selector of the HTML element that will be the parent of the rendered try-on button. You should make sure this element is present in your HTML code, so the try-on can use it.
autoplay Boolean [true/false] no If true, the try-on modal will open immediately after the site content is loaded without need for any user interaction. If false, the modal will only open when user clicks the try-on button. Default: false.

Step 3: Linking products with their URLs

Open our panel and choose the tab Click Fit Web from the navigation sidebar. Here you can connect products with their urls. Please note that only urls that are linked here will have the try-on rendered.

Example

Suppose you received an API key ‘aaa-bbb-ccc’. You want to use polish language, you do not use query parameters and you want gather only basic analytics data. The try-on button should be rendered inside the div that has the id ‘ar-holder’ and the modal should only open on user click. Your code should look like this:

  <head>
    {* Other HEAD contents*}
    <script>
      (function (w,d,s,o,f,js,fjs) {
        w['arlab-site-widgets']=o;
        w[o] = w[o] || function () {(w[o].q = w[o].q || []).push(arguments)};
        if (d.getElementById(o)) return;
        js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
        js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
      }(window, document, 'script', 'arlab', 'https://connect.ar-labs.io/v2/widget.js'));
      arlab('init', {apiKey:'aaa-bbb-ccc', language: 'pl'});
    </script>
  </head>
  <body>
    {* div where the try-on will be rendered. *}
    <div id='ar_holder'></div>
    {* Other BODY contents *}
    <script>
      arlab('webfit', {append: '#ar_holder'});
    </script>
  </body>

Now let’s also suppose you use query strings. For example, let’s say the url of your site https://your-site.com/products/glassesA?variant=black points to the product Glasses A in the color black and the url https://your-site.com/products/glassesA?variant=red points to Glasses A in the color red. Without using the queryParam parameter the try-on would ignore the query string and for both urls it would display the try-on for the model that you assigned to the url https://your-site.com/products/glassesA (see that this is the url without any query string). However, if we provide ‘variant’ as the queryParam and assign different product versions to the urls https://your-site.com/products/glassesA?variant=black and https://your-site.com/products/glassesA?variant=red, our solution will be able to distinguish between those urls and render a different product.

In this case the ‘init’ method from the previous example modified to use the queryParam parameter would look like this:

  arlab('init', {apiKey:'aaa-bbb-ccc', language: 'pl', queryParam: 'variant'});

Note that we use only one query parameter to distinguish products. Any other query parameters will still be ignored.

Styling the elements

If you want to change the appearance of the try-on button or it’s text content, you can do so using CSS with IDs and classnames of the rendered elements as they will be the same every time the widget is rendered.

Typically:

id="arlab__webfit__open-0" class="arlab__webfit__try"

Add to cart functionality

If your try on window contains add to cart button we recommend you select it by id:

id="arlab__webfitset__add__to__cart"

Selected alias and set name

Set name is contained by the element with the following id:

id="arlab__webfitset__product__set__name"

Selected product alias is contained by the element with the following class:

class="arlab__button__selected"

Shutting down virtual try-on modal

Ordinarily modal is meant to be closed via “X” span situated in the upper right corner. However, if closing the solution via client javascript is necessary it is recommended to do so by either:

  1. a click event performed on the “X” span selected by id via the document api. This is the recommended approach. For most solutions, where only one modal is embedded index = 0.
id=`arlab__webfit__try__modal__close-${index}`
//for webfit-set
//id=`arlab__webfitset__try__modal__close-${index}`
  1. By setting modal’s display parameter to none & invoking the clickFitApp.stopCamera() function imported into the browser with the downloaded js files. For most solutions, where only one modal is embedded index = 0.
const modalWindow = document.getElementById(`arlab__webfit__try__modal-${index}`);
//for webfit-set:
//const modalWindow = document.getElementById(`arlab__webfitset__try__modal-${index} webfit-set`);
modalWindow.style.display = "none";
clickFitApp.stopCamera();