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.
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.
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 🎉.
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>There are two events that can be listened to. You can register an event listener to the window element via invoking the addEventListener method.
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);
});When something goes wrong, this event will be fired with error message.
window.addEventListener('vto-error', (e) => {
// VTO failed
console.log(e.detail.message);
});<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>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.