Migration from Intiaro 3D configurator to Intiaro 360 configurator

We’ve prepare simple adapter for all those users that would like to switch from Intiaro 3D configurator to Intiaro 360 configurator without reimplementing whole frontend from scratch. Below you’ll find step by step explanation how to easily migrate from one configuration to another, maintaining currently implemented functionality at the stame time.

Migration process

  1. Include required 360 configurator scripts and styles. It is explained in details here: Embedding Intiaro 360 Configurator

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link href="https://libs.intiaro.com/360/configurator/1.9.5.5/css/intiaro360configurator.css" rel="stylesheet"/>
...
</head>

<script src="https://libs.intiaro.com/360/configurator/1.9.5.5/js/360.min.js" type="text/javascript"></script>

  1. Include adapter script.

<script src="https://libs.intiaro.com/360/adapter/1.0.9/intiaroEmbedAdapter.js" type="text/javascript"></script>

  1. Remove existing Intiaro 3D configurator script

<!-- <script type="text/javascript" src="https://libs.intiaro.com/button/default/1.8.5.0/showInIntiaro.js"></script> -->

And that’s it. You should now be able to use Intiaro 360 configurator using existing Intiaro 3D configurator placeholders and API.

Live Example

 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
 <link href="https://libs.intiaro.com/360/configurator/1.9.5.5/css/intiaro360configurator.css" rel="stylesheet"/>
 ...
 </head>

 <!-- <script type="text/javascript" src="https://libs.intiaro.com/button/default/1.8.5.0/showInIntiaro.js"></script> -->
 <script src="https://libs.intiaro.com/360/configurator/1.9.5.5/js/360.min.js" type="text/javascript"></script>
 <script src="https://libs.intiaro.com/360/adapter/1.0.9/intiaroEmbedAdapter.js" type="text/javascript"></script>

<a class="_showInIntiaroButton_"
data-web="true"
data-width="1300"
data-height="800"
data-embed="true"
data-app="IntiaroWLShowcase"
data-id="8763"
data-lang="en"
data-layout="default">
Code visible on mobile devices instead of configurator should be placed here. It should include a short descriptions and links to the WL app. This content will be shown only if the player does not load.
Player did not loaded yet. When it's ready it will populate event that you can register handler on. For instance, if you register for a configuration change it won't work yet.
Angle (degrees)

Using 360 configurator API

Since You migrated to 360 configurator, You can now use it’s API. In order to do that however, You’ll need it’s reference. You can get it using getIntiaroPlayer(<player-id>); function. It is described in details here: Intiaro 360 Configurator API documentation.

Getting configurator reference

Adapter script creates 360 configurator inside original 3D configurator placeholder. This newly created 360 configurator will have id which is equal to original 3D configurator id with additional “adapter_” prefix which is added due to compatibility reasons. To make it clear: If 3D configurator id was “someId”, 360 configurator id will be “adapter_someID” and if 3D configurator placeholder div had no id, 360 configurator id is going to be “adapter_”.

<a class="" data-web="true" data-width="1300" data-height="800" data-embed="true" data-app="IntiaroWLShowcase" data-id="8763" data-lang="en" data-layout="default" style="display: block; width: 1300px; height: 800px;">
<div id="adapter_" data-customer-id="IntiaroWLShowcase" data-product-id="8763" class="intiaroConfigurator" processed="true">

Knowing configurator id allows You to use getIntiaroPlayer() function and remaining API.

Getting product picture

<!-- Button that will trigger our getFrameUrl() function -->
<button id="get-picture">GET PRODUCT PICTURE</button>

<!-- Reulting picture placeholder -->
<h4>Product picture:</h4>
<img id="picture" style="min-height: 10px; background-color: #f0fafa; padding: 10px;"></div>


<script>
  // Add button click listener
  document.getElementById("get-picture").onclick = function(){

    // get refference to configurator
    var pictureConfigurator = getIntiaroPlayer("adapter_");

    // get picture url.
    // We're calling getFrameUrl with angle parameter equal 30. This will produce url to picture of a product facing 30 degrees from default product rotation.
    let ulr = pictureConfigurator.getFrameUrl(30);

    // update image src with our url
    let image = document.getElementById("picture");
    image.src = ulr;
  };

</script>

Product picture: