Skip to main content

3D Viewer

npm version

You have two options for web integrations. The first option provides both a 3D view and an AR button, while the second option goes directly into AR inside the phone camera.

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

1: Viewer & AR SDK

bundle size

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 API key.

Usage

After initialized, on a 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
revealautoDetermines when to load and reveal 3D model. Values;
auto As soon as model loaded.
interaction Reveals model after first user interaction
manual the model will remain hidden until dismissPoster() is called.
auto-rotatefalseShould model rotate automatically
show-zoom-buttonsfalseShows zoom controls
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
disable-arfalseDisables AR mode, hides View in AR button
disable-zoomfalseDisables model zooming

Methods

NameDescription
dismissPosterMeant to use with reveal='manual'. Dismisses the poster image and loads 3D model

Example;

const meshkraftViewer = document.getElementById('meshkraft-viewer');
meshkraftViewer.dismissPoster();

Events

Some events can be listened to. You can register an event listener using addEventListener method.

Added to Cart

When user clicks the Add to Cart button in AR banner, 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>

2: AR SDK

bundle size

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"
></script>

Basic Usage

manually start AR session within your javascript. SDK exposes an object meshkraftAR with some useful methods in it.

// init function to pass token and config
meshkraftAR.init({
token: 'YOUR_API_KEY',
// config is optional
config: {
showBanner: true,
title: 'Nike Air Max 90',
subtitle: 'White/White/White',
price: '90$',
},
});

// to start AR session in mobile or show QR code in desktop
meshkraftAR.startAR('YOUR_SKU');

// to listen SDK events
meshkraftAR.addEventListener('add-to-cart', (event) => {
console.log('SKU added to cart within AR', event.detail.sku);
});
caution

Make sure to replace YOUR_API_KEY with your API key.

Config

Possible values are;
showBanner - Boolean. Should show banner or not. Default is false
price - String. Price tag for the banner.
title - String. Title for the banner.
subtitle - String. Subtitle for the banner.

Events

Some events can be listened to. You can register an event listener by getting 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.

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

Full Example

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

<script>
meshkraftAR.init({
token: 'YOUR_API_KEY',
config: {
showBanner: true,
title: 'Nike Air Max 90',
subtitle: 'White/White/White',
price: '90$',
},
});

meshkraftAR.addEventListener('add-to-cart', (event) => {
console.log('SKU added to cart within AR', event.detail.sku);
});

meshkraftAR.startAR('YOUR_SKU');
</script>

Bundle Size

bundle size

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

Bundle Size

bundle size

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

Desktop Behavior

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