Simple Intiaro 360 Configurator Integration¶

This tutorial will guide you step-by-step through the process of embedding Intiaro 360 to your site.

Live Example¶

Please take a moment to look at the example below.

Content before 360 loader

Installation and requirements¶

Intiaro 360 Configurator requires proper CSS files in the head section and a JavaScript file placed at the end of the body tag in the HTML document. For best user experience on mobile devices, it is also recommended that you add a viewport meta tag with a particular size and scale setting. Refer to the example of a player placeholder below:

Add proper css links and meta tag in th header section of your web page

<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/2.5/css/intiaro360configurator.css" rel="stylesheet"/>
...
</head>

Add js script at the bottom of the page:

<script src="https://libs.intiaro.com/360/configurator/2.5/js/360.min.js" type="text/javascript" charset="UTF-8"></script>

HTML Code¶

In order to embed the Intiaro 360 configurator, you need to place a special prepared div tag. The JavaScript function will look for DOM elements with ‘intiaroConfigurator’ class and replace each of them with the configurator instance. Please note, that Intiaro 360 configurator will take the whole available width. If you wish to make is smaller, you should limit it’s width in parent DOM element. You will find some examples further on this page. Also, application is responsive and will adjust it’s dimentions whenever parent DOM element dimensions are changed.

<div id="Intiaro-configurator" class="intiaroConfigurator"
    data-customer-id="IntiaroWLShowcase"
    data-product-id="13934"
    > Loading... </div>
</div>

Parameters¶

Let’s look closer at those parameters

id - standart DOM tag ID. Must be unique and it will allow you to get an instance of a configurator.
data-customer-id - Client’s ID. Must be obtained from the Intiaro Team.
data-product-id - Product Configuration ID product_configuration_id.

There are many other parameters that allow you to adjust configurator settings to your needs. You’ll find more about them in Intiaro 360 Configurator API documentation section.

Custom embeding scenarios¶

1. Viewer only¶

It is possible to launch Intiaro 360 configurator in viewer only mode. In order to do that you will have to use “intiaro360player” class instead of “intiaroConfigurator” in your placeholder DOM element. Everything else remains the same.

<div id="Intiaro-configurator" class="intiaro360player"
    data-customer-id="IntiaroWLShowcase"
    data-product-id="13934"
    > Loading... </div>
</div>

Content before 360 loader

2. Controller only¶

It is even possible to launch Intiaro 360 configurator in controller only mode. In this case you will have to use “intiaroMenuController” class in your placeholder DOM element.

<style>
    .sizeLimiter{
        display: flex;
        position: relative;
        margin: auto;
        width: 500px;
        height: 500px;
        max-height: 500px;
    }
    #html-player123 #variable-group_sections{
        display: none;
    }
</style>

<div class="sizeLimiter">
    <div id="html-player123" class="intiaroMenuController"
        data-customer-id="IntiaroWLShowcase"
        data-product-id="13934"
        > Loading...
    </div>
</div>

3. Custom setup viewer + controller¶

It is possible to customize default configurator shape. You can even separate viewer and controller from each other while maintaining proper communication and data sharing between them. In order to achieve this result, you will first have to place two separate placeholders for viewer and controller just as it is described below. Since viewer component will react on configuration changes done by controller, it does not require data-product-id nor data-customer-id attributes. They will be taken from controller instance. Instead it needs data-target attribute to point at one of controller that it will react to. Please take a look at example below.

<style>
    .header {
        text-align: center;
        padding: 15px;
        font-size: 20px;
    }

    .componentsPositioner{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sizeLimiter {
        display: flex;
        position: relative;
        width: 500px;
        max-height: 500px;
    }

    .controller{
        margin: 0;
        box-shadow: 0 2px 7px 0 rgb(0 0 0 / 10%);
    }

    .viewer{
        margin: auto 0;
        z-index: 0;
    }

</style>

<p class="header">Controller on the left side of the viewer.</p>

<div class="componentsPositioner">

    <div class="sizeLimiter controller">
        <div id="intiaro-controller-left" class="intiaroMenuController"
            data-customer-id="IntiaroWLShowcase"
            data-product-id="13934"
            > Loading...
        </div>
    </div>


    <div class="sizeLimiter viewer">
        <div id="intiaro-viewer-right" class="intiaro360player" data-target="intiaro-controller-left"
            > Loading...
        </div>
    </div>

</div>

<p class="header">Controller on the right side of the viewer.</p>

<div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;">

    <div class="sizeLimiter viewer">
        <div id="intiaro-viewer-left" class="intiaro360player" data-target="intiaro-controller-right"
            > Loading...
        </div>
    </div>

    <div class="sizeLimiter controller">
        <div id="intiaro-controller-right" class="intiaroMenuController"
            data-customer-id="IntiaroWLShowcase"
            data-product-id="13934"
            > Loading...
        </div>
    </div>

</div>

Simple Intiaro 360 Configurator Integration¶

Live Example¶

Installation and requirements¶

HTML Code¶

Parameters¶

Custom embeding scenarios¶

1. Viewer only¶

2. Controller only¶

3. Custom setup viewer + controller¶

Further Reading¶