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#

  • sku (string) *required

SKU of your product. Identifier for 3D assets.

  • enable-ar (boolean)

Should enable AR button. Defaults to true

  • auto-rotate (boolean)

Should the models rotate automatically. Defaults to true

  • width (number)

Width of parent component. Defaults to %100

  • height (number)

Width of parent component. Defaults to 300px

  • config (object)

Scene and AR config. TBA.

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.