Skip to main content

Virtual Try-On

npm version

caution

If you're integrating the SDK for the first time, please use the artlabs Experience SDK. This SDK is deprecated and will be removed in the future.

Web

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>
info

Make sure to replace YOUR_API_KEY with your API key.

Basic Usage

After you include the script above, you need to call meshkraftVTO.init function with your token and optional config object. Then, you're ready to present the experience by calling meshkraftVTO.startVTO function.

meshkraftVTO.init({
token: 'YOUR_API_KEY',
// config is optional, see below for available options
config: { showAction: false, logoUrl: 'YOUR_LOGO_URL' },
});

meshkraftVTO.startVTO('YOUR_SKU');

That's it 🎉

Config

Possible values are;

CTA Banner Config

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

Branding Config

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

meshkraftVTO.init({
token: 'YOUR_API_KEY',
config: { logoUrl, fontFamily, showAction },
});

// or

meshkraftVTO.setConfig({ logoUrl, fontFamily, showAction });

Events

There are some events that can be listened to. You can register event listener by gettin element and invoking addEventListener method.

Added to Cart

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

// with functions
meshkraftVTO.addEventListener('add-to-cart', function (event) {
console.log('Size select requested with SKU: ' + e.detail.sku);
});
meshkraftVTO.addEventListener('close', function (event) {
console.log('Experience Closed on SKU: ' + e.detail.sku);
});

Error

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

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

Features

SKU Variants

If your product has different colors or variants, implementing this function will allow you to have multiple variant representation on VTO experience.

To implement this feature ⬇️

The function should be called with comma seperated multiple SKU's:

meshkraftVTO.startVTO(SKU-1,SKU-2,SKU-3,SKU-N)

With the new feature, user will be able to see different colors on VTO experience with smooth transitions as the user navigates through your shoe's different color. 🎉

Full Example

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

<script>
// init with your token and config
meshkraftVTO.init({
token: 'YOUR_API_KEY',
config: { logoUrl, fontFamily, showAction },
});

// start experience by calling the function
meshkraftVTO.startVTO('Nike-Air-Max-90');

// add event listeners
meshkraftVTO.addEventListener('add-to-cart', function (event) {
console.log('Add to Cart requested with SKU: ' + e.detail.sku);
});

meshkraftVTO.addEventListener('close', function (event) {
console.log('Experience Closed on SKU: ' + e.detail.sku);
});
</script>

<!-- or just a HTML button -->
<body>
<button
id="meshkraft-vto-button"
data-meshkraft-vto-sku="Nike-Air-Max-90"
data-meshkraft-vto-config='{"showBanner": true, "buttonTitle":"Add To Cart", "buttonColor": "#4dad94", "textColor": "#fff"}'
></button>
</body>

Bundle Size

You'll be consuming minified and Gzipped or Brotli compressed versions, depending on the browser.

┌─────────────────────────────────────────────┐
│ │
│ meshkraft-vto.min.js │
│ Bundle Size: 19.17 KB │
│ Gzipped Size: 2.71 KB │
│ Brotli size: 157 bytes │
│ │
└─────────────────────────────────────────────┘
info

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.

iOS

Please check this page for iOS specific instructions.

Android

Please check this page for iOS specific instructions.