Embedding Intiaro 3D Configurator

This tutorial will guide you step-by-step through the process of embedding the Intiaro WL Application to your site. To embed the Intiaro WL Application, you need to place a specially prepared anchor (simple HTML “a” tag).

Live Example

Please take a moment and look at the example below

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.

Installation and requirements

To activate the Intiaro 3D Configurator, you need to place some CSS and JavaScript code.

Place the CSS code into the head section of the page:

<link rel="stylesheet" href="https://libs.intiaro.com/button/default/1.8.5.0/showInIntiaro.css">

Then, place JavaScript code at the very end of your site, usually just above the closing body tag.

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

And that’s it.

You can have customized version of the script. Please ask your supporting team if this option is enabled for you.

HTML Code

To embed Intiaro3D Viewer, you need to put an HTML code at your anchor.

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

As an anchor value, provide a fallback for the mobile browser (as those are not supported by 3D Advanced Configurator)

The code visible on mobile devices instead of the configurator should be placed here. It should include short descriptions and links to the WL app. This content will be shown only if the player does not load.

Then, close the tag.

</a>

Example code:

<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.
</a>

Note that your actual code will vary. Parameters such as “data-app,” “data-open” or “data-retailer-id” are unique and are provided for each customer individually.

Embedding Intiaro 3D Configurator with custom configuration

It is also possible to launch Intiaro 3D Configurator with custom configuration. To do that, you first need to save configuration that you wish to display later. Please take a look at how to save custom configuration here: (Saving product configuration). If you already have id of configuration you would like to launch, provide it as data-id value. You will also have to set data-mode value to “user_configuration”.

Example code:

 <a class="_showInIntiaroButton_"
 data-web="true"
 data-width="1300"
 data-height="800"
 data-embed="true"
 data-app="IntiaroWLShowcase"
 data-id="1234567890"
 data-mode="user_configuration"
 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.
 </a>

Parameters

Let’s take a closer look at those parameters.

  • class - “_showInIntiaroButton_” is a special class that activates Intiaro Wl Behavior.

  • data-embed (required) - this parameter activates Intiaro WL Application in embedded mode. On mobile devices creates a deeplink on _showInIntiaroButton_ element>

  • data-web (required) - if set to true on desktop devices, framework opens Intiaro WL Web Application.

  • data-app (required) - internal name of the client’s application, provided by our Customer Service team.

  • data-mode (optional) - if set to “user_configuration” allows to launch custom user configurations.

  • data-id (required) - product ID in 3D catalog. IDs are provided by our Customer Service team. It may also be used to provide saved configuration id when in “user_configuration” mode.

  • data-width (optional) - in embed mode, sets Intiaro WL Web Application iframe width, which defaults to 900px. Recommended minimum size is 900px.

  • data-height (optional) - in embed mode, sets Intiaro WL Web Application iframe height, which defaults to 500px. Recommended minimum size is 500px.

  • data-lang (required) - sets language of the Intiaro WL Web Application. Available options are defined with Intiaro WL Application client.

Mobile devices

Mobile browsers are not currently supported by embed mode. Usually, we want to redirect the user to the mobile application in this scenario.

Intiaro WL Application will detect a mobile browser and leave the anchor as is. You can style it with an ordinary CSS file as usual.

Note:

Please note that on mobile devices, Intiaro 3D configurator won’t be displayed. You have to configure a fallback message. Usually, it’s an anchor to the Intiaro 360 Configurator.

And that’s it! Please contact our support team if you have any questions.