This is about how to get a Plattar Embed into a product listing website

Demo

The best experience for adding a web embed in order to balance good page load times and seamless user experience we have come up with the following rules:

  • Initially shows the product image with ‘View in 3D/AR’ badge
  • Has a button for view 360. This will load the product in an iframe replacing the product image.
  • Has a button for view in home. This button will detect if AR is supported, and will launch it if it is. Otherwise it will display a QR code and instructions on how to get it on your AR supported device

You will first need to include the Plattar Integration script that will detect the user’s device and load the relevant content.

<script src="https://app.plattar.com/webgleditor/embed/plattar-1.0.0.min.js"></script>

An example Integration usage
var integration = new PlattarIntegration();
integration.init(<product_id>, <variation_id>, ?callback);
// example: integration.init('a4257cc0-b7f8-11e9-a7b2-3b6d222630bd', 'a4282db0-b7f8-11e9-aa78-597990917d3f', function(){
//  console.log('ready');
// });
// OR
// integration.init(<scene_id>, ?callback);
// example: integration.init('11424b40-9bf2-11ea-abba-a1c9eb50774f', function(){
//  console.log('ready');
// }));

function start360() {
  var iframe = document.getElementById('plattar-frame');
  iframe.src = integration.embedUrl;
  iframe.classList.add('visible');

  var qrframe = document.getElementById('viewinar');
  qrframe.classList.remove('visible');
}

function startAR() {
  if (integration.canAugment) {
    integration.startAugment(function(){
      QRCodeFallback();
    });
  }
  else {
    QRCodeFallback();
  }
  var iframe = document.getElementById('plattar-frame');
  iframe.classList.remove('visible');
}

function QRCodeFallback(){
  var qr = integration.qrUrl;
  document.getElementById('qrimage').src = qr;
  var frame = document.getElementById('viewinar');
  frame.classList.add('visible');
}
Example iframe and qrframe display code
<style type="text/css">
  .ar-button {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30px;
    opacity: 0.75;
  }

  #plattar-frame{
    display: none;
    position: absolute;
    z-index: 11;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
  }

  #plattar-frame.visible{
		display: block;
  }

  #viewinar{
    display: none;
    position: absolute;
    z-index: 11;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    text-align: center;
  }
  #viewinar.visible{
		display: block;
  }
</style>
<iframe id='plattar-frame' width="100%" height="100%" frameBorder="0" allow="camera; vr; autoplay" allowfullscreen></iframe>
<img onclick='startAR();' src="./view_at_home.png" id="buttonAR" class="ar-button" style="opacity: 1; bottom: -70px;">
<img onclick='start360();' src="./view_360.png" id="button3D" class="ar-button" style="opacity: 1; bottom: -35px;">
<div id='viewinar'>
	<h2 style='margin-top: 20px;'>View at Home</h2>
	<p>Open the camera app on your<br/>phone and scan this code</p>
	<img id='qrimage' src="" style='max-height: 200px;'>
</div>

Using the Plattar integration object.

Start by creating an instance of the Plattar integration object. This is the main component that will detect platform support and link to the correct augmentable scene/file.

var integration = new PlattarIntegration();

The init function is used to select the Plattar scene or product and variation to display. It can be called repeatedly to change the scene or which product/variation if there are multiple to choose from. You may also pass an optional callback which will run once the initialisation is completed.

The init function can be called the following ways depending on your use case:

  • integration.init(<product_id>, <variation_id>, ?callback);
  • integration.init(<scene_id>, ?callback);
  • integration.init(<params>, ?callback);
//params taking the form
{
	sceneId: <uuid>,
	variationId: <uuid>,  //optional
	variationSku: <uuid>, //optional
	callback: <function>  //optional
}

Example for when selecting a product and its variation:

integration.init('a4257cc0-b7f8-11e9-a7b2-3b6d222630bd', 'a4282db0-b7f8-11e9-aa78-597990917d3f');

Example for when selecting an advanced scene:

integration.init('11424b40-9bf2-11ea-abba-a1c9eb50774f');

Example for when selecting an advanced scene with variations:

integration.init({
  sceneId: '11424b40-9bf2-11ea-abba-a1c9eb50774f',
  variationId: '5eaf2070-f1e1-11e8-9fd4-79f855ed082e'
});
integration.init({
  sceneId: '11424b40-9bf2-11ea-abba-a1c9eb50774f',
  variationSku: 'black'
});
View in AR sample image
View in AR sample image
View in 3D sample image
View in 3D sample image
QR Code Style Guide
QR Code Style Guide

See QR Code Style Guide for more info.