Embedding Intiaro 360 Configurator

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:

  1. 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.4/css/intiaro360configurator.css" rel="stylesheet"/>
...
</head>
  1. Add js script at the bottom of the page:

<script src="https://libs.intiaro.com/360/configurator/2.4/js/360.min.js" type="text/javascript"></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="8763"
    > 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="8763"
    > 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;
    }
</style>

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

3. Custom setup viwer + 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;
    }

</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="8763"
            > 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="8763"
            > Loading...
        </div>
    </div>

</div>

Controller on the left side of the viewer.

Loading...
Loading...

Controller on the right side of the viewer.

Loading...
Loading...

Styling

Every single element of configurator can be modified with your own css styles. This allows you to adjust final look exactly to your needs. Below you’ll find most common use cases.

Idle attribute groups tab

class: .variable-group-tab

Active attribute groups tab

class: .variable-group-tab.active

Attribute tab icons Each attribute tab has it’s unique id equal to tab slug. If you wish to change particular tab icon you will have to use combination of unique tab id and tab icon class name.

class: .variable-group-icon

example:

#lex_uph_overall_body_welt.variable-group-tab .variable-group-icon {
    background-image: url(_static/lex_icons/welt.png) !important;
}

#lex_uph_overall_body_welt.variable-group-tab:hover .variable-group-icon{
    background-image: url(_static/lex_icons/welt.png) !important;
}

Open customization panel in mobile layout

The button opening attributes group panel in mobile view is store in div with “expand-panel-button” class attached to it. Inside this div you’ll find two child DOM elements. Custom web element called “app-rotating-arrow-icon” and div with “panel-label” class attached to it. First of them is responsible for arrow icons indicating weather panel is opened or not. Second one holds button label.

class: .expand-panel-button
class: .expand-panel-button app-rotating-arrow-icon
class: .expand-panel-button .panel-label

example:

#css-modified .expand-panel-button app-rotating-arrow-icon {
    background-color: #2a2828;
    color: #9f9872;
}

#css-modified .expand-panel-button .panel-label {
    color: #9f9872;
}

Attribute name in menu header

class: .group-name

Search button opening group filters

class: .search-button

Filter options (when filter is opened)

There are couple of buttons and labels inside opened filters panel that you may whant to modify or color to better suit your website. They are all located inside of div with “select-options-container” class. Below you’ll find a list of usefull classes that are used to color panel elements. Also please note, that some buttons have svg icons attached to them. In order to change their color you will have to style path element inside button class. Please take a look at example below.

// filter close button located in upper right corner of the panel
class: .select-options-container .button-close-container

// done button located in lower left corner of the panel
class: .select-options-container .button-done-container

// sellect all button in the lower right corner
class: .select-options-container .button-select-all-container

// clear all button in the lower right corner
class: .select-options-container .button-clear-all-container

// selected filter option label
class: .select-options-container label.colored

// selected filter option checkbox (required :before selector)
.select-options-container label.colored:before

example:

#css-modified .select-options-container .button-close-container {
    background-color: #2a2828;
    color: #9f9872;
}

#css-modified .select-options-container .button-close-container path{
    fill: #9f9872;
}

#css-modified .select-options-container .button-done-container {
    background-color: #2a2828;
    color: #9f9872;
}

#css-modified .select-options-container .button-select-all-container {
    color: #9f9872;
}

#css-modified .select-options-container .button-select-all-container path {
    fill: #9f9872;
}

#css-modified .select-options-container .button-clear-all-container {
    color: #2a2828;
}

#css-modified .select-options-container .button-clear-all-container path{
    fill: #2a2828;
}

#css-modified .select-options-container label.colored{
    color: #9f9872;
}

#css-modified .select-options-container label.colored:before{
    background-image: none;
    background-color: #9f9872;
    border-radius: 100%
}

Search button filters icon

Search button icon is svg with couple of paths nested inside. To change icon color use overwrite path fill style inside .search-button class. Please take a look at example below:

class: .search-button path

Search button next to search input field inside group filters

class: .searchButton

Siloo shoot widget

class: .silo-shoot-widget

Siloo shoot widget loading state

class: .silo-shoot-widget-loading

Siloo shoot widget popup

Once silo shoot is ready. Popup window will appear to let user decide what action should be taken next. Popu window can me changed by styling “intiaroPopup” class. Div with “intiaroPopup” class attached to it contains few other DOM elements with witch other classes representing certain popup window components. They are listed below.

// main popup window
class: .intiaroPopup
// popup window title
class: .intiaroPopup .popup-title
// popup window text
class: .intiaroPopup .popup-header
// popup window download button
class: .intiaroPopup .download-silo-button
// popup window open button
class: .intiaroPopup .open-silo-button
// popup window close button
class .intiaroPopup .popup-close-button

example:

#css-modified .intiaroPopup {
    background-color: #2a2828;
    color: #9f9872;
}

#css-modified .intiaroPopup .popup-header {
    color: #9f9872;
}

// move download button to the right
#css-modified .intiaroPopup .download-silo-button {
    float: right;
}

Attribute choices

Each choice in configurator is represented by an icon. Each icon is made by div with “choiceIconContainer” class attached to it. Every choiceIconContainer contains two child elements representing choice image nad choice label. These containt adequatly “choiceIcon” nad “choiceIconText” classes attached to them. It is also worth mentioning, that selected choice icons containers have “selected” class dynamically attached to them.

// default choice
class: .choiceIconContainer
class: .choiceIconContainer .choiceIcon
class: .choiceIconContainer .choiceIconText

// selected choice
class: .choiceIconContainer.selected
class: .choiceIconContainer.selected .choiceIcon
class: .choiceIconContainer.selected .choiceIconText

Below example configurator with custom styles attached:

<style>
   #css-modified .variable-group-tab{
       background-color: #494949 !important;
       color: white;
   }

   #css-modified .variable-group-tab:hover{
       background-color: #2a2828 !important;
       color: #9f9872;
   }

   #css-modified .variable-group-tab.active{
       background-color: #2a2828 !important;
       color: #9f9872;
   }

   #css-modified .group-name{
       color: #9f9872;
   }

   #css-modified .search-button {
       color: #9f9872;
   }

   #css-modified .search-button path {
       fill: #9f9872;
   }

   #css-modified .searchButton {
       background-color: #9f9872;
   }

   #css-modified .silo-shoot-widget {
       background-image: url(_static/lex_icons/download_img.png);
   }

   #css-modified .silo-shoot-widget-loading {
       background-image: url(_static/lex_icons/arrows.png);
   }

   #css-modified #Body_Fabric.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/body_fabric.png) !important;
   }

   #css-modified #Body_Fabric.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/body_fabric.png) !important;
   }

   #css-modified #lex_uph_overall_body_welt.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/welt.png) !important;
   }

   #css-modified #lex_uph_overall_body_welt.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/welt.png) !important;
   }

   #css-modified #lex_uph_overall_body_welt_fabric.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/welt.png) !important;
   }

   #css-modified #lex_uph_overall_body_welt_fabric.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/welt.png) !important;
   }

   #css-modified #Seat_Cushion_Quantity.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/seat.png) !important;
   }

   #css-modified #Seat_Cushion_Quantity.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/seat.png) !important;
   }

   #css-modified #lex_uph_finish.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/legs.png) !important;
   }

   #css-modified #lex_uph_finish.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/legs.png) !important;
   }

   #css-modified #Select_your_Body_Welt.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/nail.png) !important;
   }

   #css-modified #Select_your_Body_Welt.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/nail.png) !important;
   }

   #css-modified .choiceIconContainer {
       border-radius: 100%;
       border: none;
   }

   #css-modified .choiceIconContainer .choiceIcon {
       border-radius: 100%;
       border: none;
   }

   #css-modified .choiceIconContainer .choiceIconText {
       background-color: transparent;
       color: #2a2828;
   }

   #css-modified .choiceIconContainer.selected {
       border-radius: 6px;
       border: 1px solid #9f9872;
   }

   #css-modified .choiceIconContainer.selected .choiceIconText {
       background-color: #2a2828;
       color: #9f9872;
       border-radius: 6px;
   }

   #css-modified .expand-panel-button app-rotating-arrow-icon {
       background-color: #2a2828;
       color: #9f9872;
   }

   #css-modified .expand-panel-button .panel-label {
       color: #9f9872;
   }

   #css-modified .select-options-container .button-close-container {
       background-color: #2a2828;
       color: #9f9872;
   }

   #css-modified .select-options-container .button-close-container path{
       fill: #9f9872;
   }

   #css-modified .select-options-container .button-done-container {
       background-color: #2a2828;
       color: #9f9872;
   }

   #css-modified .select-options-container .button-select-all-container {
       color: #9f9872;
   }

   #css-modified .select-options-container .button-select-all-container path {
       fill: #9f9872;
   }

   #css-modified .select-options-container .button-clear-all-container {
       color: #2a2828;
   }

   #css-modified .select-options-container .button-clear-all-container path{
       fill: #2a2828;
   }

   #css-modified .select-options-container label.colored{
       color: #9f9872;
   }

   #css-modified .select-options-container label.colored:before{
       background-image: none;
       background-color: #9f9872;
       border-radius: 100%
   }

   #css-modified .intiaroPopup {
       background-color: #2a2828;
       color: #9f9872;
   }

   #css-modified .intiaroPopup .popup-header {
       color: #9f9872;
   }

   #css-modified .intiaroPopup .download-silo-button {
       float: right;
   }

   #css-modified.intiaroConfigurator ::-webkit-scrollbar-thumb {
       background-color: #9f9872 !important;
   }

</style>

<div id="css-modified" class="intiaroConfigurator"
       data-customer-id="IntiaroWLShowcase"
       data-product-id="8763"
       > Loading...
</div>
Loading...

Further Reading

There are plenty of usage examples and customizations on API site: Intiaro 360 Configurator API documentation