Meshkraft-vto NPM

ART Labs Meshkraft Web Virtual Try-On SDK

VTO SDK is a web application for ART Labs Virtual Try-On Engine to enhance its capabilites for user interaction. This application introduces various concepts such as dynamic version management, multiple event handling, customization for customer requirements and many more.

Install

You'll need to paste script code before closing </body> tag of your web page.

<script
  type="module"
  src="https://unpkg.com/meshkraft-vto/dist/index.min.js"
  data-meshkraft-key="YOUR_API_KEY"
></script>

Make sure to replace YOUR_API_KEY with your application token.

Basic Usage

After you place the script above, all you need to do is adding any button, a, div or any other clickable HTML element to your website, with your own style. The SKU that specified in the element can be a comma separated list to show multiple shoes.

<button data-meshkraft-vto-sku="YOUR_SKU">View in AR</button>

That's it 🎉.

Config

You should pass a stringified JSON object to script tag via data-meshkraft-config attribute. Available options are:

showAction - Boolean. Should show action block or not. Default is false. actionButtonText - String. Title for the button. Default is Add to Cart. actionButtonEventName - String. Event name to listen on button click. Default is add-to-cart.

logoUrl - String. Logo URL to use in upper-right corner. Default is null. fontFamily - String. Font family name to use in SDK. Must be included in DOM. Default is Bebas Neue. qrPopupTitle - String. Text to use in Desktop QR popup title. Default is Scan QR Code. qrPopupSubtitle - String. Text to use in Desktop QR popup subtitle. Default is Point your mobile phone camera to the QR code below to experience Virtual Try-on.

<button
  data-meshkraft-vto-sku="Nike-Air-Max-90"
  data-meshkraft-vto-config='{"fontFamily":"Arial","qrPopupTitle":"Scan the Code","qrPopupSubtitle":"Scan the QR code below","logoUrl": "https://artlabs.ai/images/logo.svg", "showAction": true, "actionButtonText":"Add To Cart", "actionButtonEventName": "add-to-cart"}'
>
  Enter VTO
</button>

Events

There are two events that can be listened to. You can register an event listener to the window element via invoking the addEventListener method.

Added to Cart

When user clicks the Add to Cart button in AR banner, this event will be fired with SKU.

window.addEventListener('add-to-cart', (e) => {
  // Product added to cart
  console.log(e.detail.sku);
});

Error

When something goes wrong, this event will be fired with error message.

window.addEventListener('vto-error', (e) => {
  // VTO failed
  console.log(e.detail.message);
});

Full Example

<head>
  <script
    type="module"
    src="https://unpkg.com/meshkraft-vto/dist/index.min.js"
    data-meshkraft-key="YOUR_API_KEY"
  ></script>
</head>

<body>
  <button
    id="meshkraft-vto-button"
    data-meshkraft-vto-sku="Nike-Air-Max-90"
    data-meshkraft-vto-config='{"fontFamily":"Arial","qrPopupTitle":"Scan the Code","qrPopupSubtitle":"Scan the QR code below","logoUrl": "https://artlabs.ai/images/logo.svg", "showAction": true, "actionButtonText":"Add To Cart", "actionButtonEventName": "add-to-cart"}'
  >
    Enter VTO
  </button>
</body>

<script>
  window.addEventListener('add-to-cart', (e) => {
    console.log('Product added to cart :: ', e.detail.sku);
  });

  window.addEventListener('vto-error', (e) => {
    console.log('An error occured :: ', e.detail.message);
  });
</script>

Bundle Size

You will consuming minified and Gzipped or Brotli compressed version, depending on the browser.

┌─────────────────────────────────────────────┐
│                                             │
│   meshkraft-vto.min.js                      │
│   Bundle Size:  253.42 KB                   │
│   Gzipped Size: 77.24 KB                    │
│   Brotli size:  66.91 KB                    │
│                                             │
└─────────────────────────────────────────────┘

Initial bundle size is small but the essential parts of the VTO will be downloaded after user clicks to the button. The total size will be about 2MB to 10MB, depending on the 3D model.