Getting Started

POWER Commerce

3D Viewer

POWER Engage

Asset Manager

3D Files

Documentation

This section will guide you on how to integrate POWER.xyz 3D Viewer within your own website with one unique script. In order to guide you within this integration we have put in place a test project, allowing you to: - Access our default product viewer - Activate AR capabilities - Customisation capabilities & much more… !

Introduction

POWER.xyz 3D Viewer SDK uses a CDN.

Import the default viewer script

Our javascript SDK provides you a set of classes, web components allowing to ease the integration.

<script src="https://sdk.metav.rs/viewer/2.0.0/power.viewer.sdk.js"></script>

Generic 3D viewer

⚠️ Assets need to be imported into POWER.xyz asset platform in order to be displayed within a viewer.

Viewer needs to be created & customised. Once done, simply use the following web component to dispay the POWER.xyz 3D Viewer in a page/website:

<power-viewer
	id="myViewer"
	
	company-eid="COMPANY_ID"
	viewer-eid="COMPANY_ID"
	sku="PRODUCT_SKU"
 ></power-viewer>

That's it ! The viewer will display on you page.

This piece of code showcases the 3 mandatory arguments (id is optionnal) to display a simple viewer, but there are more available as explain below on “Query Parameters”.

Query Parameters

All these attributes are reactive, change them with simple javascript to see the result !

// will start a manual viewer
document.getElementById('myViewer').setAttribute('start', 'eager')

// will display another product
document.getElementById('myViewer').setAttribute('sku', 'ANOTHER_PRODUCT')

Propose also Augmented Reality as part of our 3D viewer

Check out on our dedicated section on how to propose Augmented reality capabilities to your audience!

🔍Augmented reality

Display a product variant selector

While our default use case is to integrate our viewers directly in our customer’s product detail page, in some case you might want to add variant selector to our viewer (in the event you want to integrate it in a homepage, a custom website..) If that’s the case you simply have to use our web component.

Just simply add a <power-viewer-selector> somewhere in your page,

with a for attribute indicating the id of your viewer

Inside this component, include as many <power-asset> as you want in your selector:

  <power-viewer-selector for="myViewer" id="mySelector" >
    <power-asset sku="PRODUCT_1_SKU" color="#bf8432" label="Or rose 750" />
    <power-asset sku="PRODUCT_2_SKU" color="#9da6a8" label="Acier" />
  </power-viewer-selector>

Both parameters  color label can be used together

The generated HTML is fully accessible via console or javascript and is easy to customize.

Here are the classes used and a CSS theme example:

 /* Custom selector theme example */

  .power-viewer-selector {
    display: flex;
    gap: 1em;
  }
  .power-selector-item {
    background-color: transparent;
    padding: 0.5em;
    position: relative;
    width: 6em;
    text-align: center;
    flex-grow: 0; flex-shrink: 0;
  }
  .power-selector-item.current {
    border: 1px solid currentColor;
    box-shadow: 0 0 1em color-mix(in srgb, currentColor 33%, transparent);
  }
  .power-selector-item > button {
    border: none; cursor: pointer; display: block;
  }
  .power-selector-item-color {
    width: 100%; aspect-ratio: 16 / 9;
  }
  .power-selector-item-label {
    width: 100%; text-align: center;
    height: max-content;
    font-family: inherit;
    font-weight: bold;
    padding: 0.75rem 0 0 0;
    background: none;
    font-size: 0.8em;
  }

See implementation example

Use the javascript class

Useful to integrate oPOWER.xyz 3D Viewer through a Google Tag Manager (GTM) type script or in the event where you wouldn’t be able to change the html of your page, you can easily integrate our viewer using a simple javascript class:

   var customViewer = new POWERViewer({
    container: '#your_DOM_container',

    companyEid: 'YOUR_COMPANY_EID',
    viewerEid: 'YOUR_VIEWER_EID',
    sku: 'PRODUCT_SKU',
  })

Query parameters are identical, you can find the list of methods & callbacks you can interact with below:

  // *** Callbacks ***

  customViewer.onReady(() => {
    // viewer ready
  })
  customViewer.onLoad(() => {
    // product loaded
  })
  customViewer.onLaunchAR((ARUrls) => {
    // Augmented realtity has been launched
  })
  customViewer.onProductUpdated((code) => {
    // The product sku/variant has been updated on the viewer
  })

  // *** Methods ***

  // load another product
  customViewer.changeSKU(code)

  // On desktop: displays a QRCode
  // on mobile: launch an Aumgneted Reality session
  customViewer.launchAR()
  // (use this to make an AR button where you want in your website)

On this page

• Documentation
• Introduction
• Import the default viewer script
• Generic 3D viewer
• Query Parameters
• Propose also Augmented Reality as part of our 3D viewer
• Display a product variant selector
• Use the javascript class