Skip to main content

Web

You have two options for web integrations. Their main difference is, first option provides a 3D preview of the product before going into AR while second option directly goes into AR inside phone camera.

For the time being, AR is only available on mobile devices because it requires a camera to operate. In both options; when users tries to open AR in desktop, a popup window guides user to their phone with QR code

1: Viewer & AR SDK#

Install#

The <meshkraft-viewer> web component can be used directly from various free CDNs such as unpkg.com

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

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

Make sure to replace YOUR_API_KEY with your application token.

Usage#

After initialized, in specific product page, call SDK with product identifier (SKU)

<meshkraft-viewer sku="YOUR_SKU" />

SDK will do the rest.

Options#

NameDefaultDescription
skurequiredSKU of your product. Identifier for 3D assets.
width100%CSS width of parent component. Accepts px, em, rem, vw
height300pxCSS height of parent component. Accepts px, vh, vw
auto-rotatetrueShould model rotate automatically
show-dimensionsfalseShould show the dimensions of model in centimeters.
show-bannerfalseShould show a banner with Add to Cart button in iOS AR
banner-typedefaultType of iOS AR banner. Possible values are default, custom and apple-pay. Apple Pay includes an checkout with Apple Pay button.
extranullExtra product information such as price, description to be displayed in AR banner. Required if show-banner enabled

Events#

There are some events that can be listened to. You can register event listener using addEventListener method.

  • Added to Cart

In AR banner, when user clicks to Add to Cart button. This event will be fired with SKU.

const meshkraftElement = document.querySelector('meshkraft-viewer');
meshkraftElement.addEventListener('add-to-cart', (e) => {
// Add product to cart
console.log(e.detail.sku);
});

Full Example#

<head>
<script
type="module"
src="https://unpkg.com/meshkraft-viewer/dist/meshkraft-viewer.min.js"
data-meshkraft-key="YOUR_API_KEY"
></script>
</head>
<body>
<meshkraft-viewer
sku="Nike-Air-Max-90"
height="500px"
show-banner
banner-type="default"
extra='{"price": "$500", "description":"White, Essential"}'
></meshkraft-viewer>
</body>
<script>
const meshkraftElement = document.querySelector('meshkraft-viewer');
meshkraftElement.addEventListener('add-to-cart', (e) => {
console.log('Product added to cart :: ', e.detail.sku);
});
</script>

Bundle Size#

You'll be consuming minified and Gzipped or Brotli compressed version, depending on the browser. Network impact of bringing AR experience to your website will be around 177kb and 218kb πŸŽ‰

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ β”‚
β”‚ meshkraft-viewer.min.js β”‚
β”‚ Bundle Size: 828.88 KB β”‚
β”‚ Minified Size: 828.55 KB β”‚
β”‚ Gzipped Size: 218.53 KB β”‚
β”‚ Brotli size: 177.16 KB β”‚
β”‚ β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

2: AR SDK#

Install#

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

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

Make sure to replace YOUR_API_KEY with your application token.

Usage#

After you include 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

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

And, that's it πŸŽ‰

Bundle Size#

You'll be consuming minified and Gzipped or Brotli compressed version, depending on the browser. Network impact of bringing AR experience to your website will be around 4kb Isn't it amazing πŸŽ‰

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ β”‚
β”‚ meshkraft-ar.min.js β”‚
β”‚ Bundle Size: 10.31 KB β”‚
β”‚ Minified Size: 10.3 KB β”‚
β”‚ Gzipped Size: 4.71 KB β”‚
β”‚ Brotli size: 4.01 KB β”‚
β”‚ β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Desktop Behavior#

As AR technology is only available in mobile devices, users on desktop will need to be guided to their mobile devices. Both SDK's will do that for you on desktop browser, using a runtime generated QR code and a guidance popup.