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:

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>

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>

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.

It is possible to use own SKU instead of product id provided by Intiaro. In order to do that, it is required to use data-client-product-id instead of data-product-id.

data-client-product-id - if provided, it is going to be used instead of “data-product-id”. It allows lauching configurator using client SKU instead of custom Intiaro product 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 size and layout¶

By default, configurator will take up whole available width and adjust it’s height to product picture ratio so that it is not stretched. Very often however it is required to reduce it’s size or change it’s default layout so that it fits better to it’s surrounding.

In order to change 360 configurator size or layout, it is required to limit it’s available space by properly styling it’s parent div with few simple css rules. It is even possible to define custom display / menu ration by adding custom styles to one or more internal 360 configurator classes.

In this section we’re going to present most common use cases.

1. Static size¶

You can set static configurator width and height by simply applying those styles to configurator parent div. In this case, configurator dimensions are fixed and will never change even if page size is changed.

<style>

    .staticLimitDesktop{
        width: 1024px;
        height: 500px;
    }

    .center{
        margin: auto;
    }

</style>

<div class="staticLimitDesktop center">
    <div id="Intiaro-configurator-static-desktop" class="intiaroConfigurator"
        data-customer-id="IntiaroWLShowcase"
        data-product-id="8763"
        > Loading...
    </div>
</div>

If total available space is equal or less then 800px, configurator will switch to mobile mode to better present the product. Please note that in this scenario, available height is used in 50/50 ratio, meaning display and menu will both have 1/2 of available height.

<style>

    .staticLimitMobile{
        width: 800px;
        height: 1000px;
    }

    .center{
        margin: auto;
    }

</style>

<div class="staticLimitMobile center">
    <div id="Intiaro-configurator-static-mobile" class="intiaroConfigurator"
        data-customer-id="IntiaroWLShowcase"
        data-product-id="8763"
        > Loading...
    </div>
</div>

2. Responsive size limit¶

You’re not limited to static size limit. It is very common to use responsive size limit. This approach allows limiting the 360 configurarot size leaving enough freedom for it’s internal functions to handle layout and scaling when needed.

<style>

    .responsiveLimit {
        width: 90%;
        max-width: 1200px;
    }

    .center{
        margin: auto;
    }

</style>

<div class="responsiveLimit center">
    <div id="Intiaro-configurator-responsive" class="intiaroConfigurator"
        data-customer-id="IntiaroWLShowcase"
        data-product-id="8763"
        > Loading...
    </div>
</div>

3. Custom display / menu ratio¶

Sometimes it is required to change default display / menu ratio so that the user has better view on the product or more space to use menu. In order to adjust these, it is required to apply some css rules to “intiaro360player” and “intiaroController” classes. First one applies to display while the second one is pplied to configurator menu.

It is worth remembering that fixed parent div dimensions will prevent configurator from switching to mobile layout. It is therefore required to handle it manually with media query for example.

HINT: Reduce or extend page width to see configurator switching layout from desktop to mobile.

<style>

    .center {
        margin: auto;
    }

    .customRatio{
        width: 1500px;
    }

    .customRatio .intiaro360player {
        min-width: 1080px;
    }

    .customRatio .intiaroController {
        max-width: 230px;
    }

    @media only screen and (max-width: 1500px) {

        .customRatio{
            width: 800px;
        }
        .customRatio .intiaro360player {
            min-width: 800px;
            min-height: 400px;
        }
        .customRatio .intiaroController {
            min-width: 800px;
            min-height: 400px;
            max-height: 400px !important;
        }
    }

</style>

<div class="customRatio center">
    <div id="Intiaro-configurator-custom-ratio" class="intiaroConfigurator"
        data-customer-id="IntiaroWLShowcase"
        data-product-id="8763"
        > Loading...
    </div>
</div>

4. Custom display / menu ratio - responsive¶

<style>

    .center {
        margin: auto;
    }

    .customRatioResponsive{
        width: 70%;
        max-width: 1500px;
    }

    .customRatioResponsive .intiaro360player {
        min-width: 75%;
    }

    .customRatioResponsive .intiaroController {
        max-width: 25%;
    }

    @media only screen and (max-width: 1500px) {

        .customRatioResponsive{
            width: 70%;
            max-width: 800px;
        }

        .customRatioResponsive .intiaroController {
            max-width: 100%;
            min-height: 400px;
            max-height: 400px !important;
        }
    }

</style>

<div class="customRatioResponsive center">
    <div id="Intiaro-configurator-custom-ratio-responsive" class="intiaroConfigurator"
        data-customer-id="IntiaroWLShowcase"
        data-product-id="8763"
        > Loading...
    </div>
</div>

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>

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>

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>

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. 360 configurator uses swal2 popup library so it is required to modify it’s build in classes in order to change they popups look. To makey it easier, 360 configurator popups are enriched by “Intiaro” class that can be used by selectors.

Div with “swal2-container” and “Intiaro” classes 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: .Intiaro .swal2-popup

// popup window title
class: .Intiaro .swal2-title

// popup window text
class: .Intiaro .swal2-html-container span

// popup window button
class: .Intiaro .intiaro-popup-button

// popup window close button
class: .Intiaro .swal2-close

example:

.Intiaro .intiaro-popup-button {
    color: black;
    background-color: #9f9872;
    border: 1px solid #9f9872;
}

.Intiaro .swal2-close {
    color: #9f9872;
}

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

Choice tooltip button

Each choice in configurator can contain tooltip button that allows to display enlarged choice picture. It possible to change the styling of that button by overwriting “choice-tooltip-button” class

#css-modified .choice-tooltip-button {
    background-color: #9f9872;
}

Dimensions button

For products that support dimensions it is possible to display dimensions toggle button that can either switch dimensions on or off. It is possible to change this button styles by modyfying his on and off classes.

#css-modified .measurementButtonToggleOff  {
    background-image: url('https:///libs.intiaro.com/integrations/lexington/icons/measurementsOff.svg');
}

#css-modified  .measurementButtonToggleOn {
    background-image: url('https:///libs.intiaro.com/integrations/lexington/icons/measurementsOn.svg');
}

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.intiaroConfigurator ::-webkit-scrollbar-thumb {
       background-color: #9f9872 !important;
   }

   #css-modified  .choice-tooltip-button {
       background-color: #9f9872;
   }

   #css-modified .measurementButtonToggleOff  {
       background-image: url('https:///libs.intiaro.com/integrations/lexington/icons/measurementsOff.svg');
   }

   #css-modified  .measurementButtonToggleOn {
       background-image: url('https:///libs.intiaro.com/integrations/lexington/icons/measurementsOn.svg');
   }

   .Intiaro .intiaro-popup-button {
       color: black;
       background-color: #9f9872;
       border: 1px solid #9f9872;
   }

   .Intiaro .swal2-close {
       color: #9f9872;
   }


</style>

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

Embedding Intiaro 360 Configurator¶

Live Example¶

Installation and requirements¶

HTML Code¶

Parameters¶

Custom size and layout¶

1. Static size¶

2. Responsive size limit¶

3. Custom display / menu ratio¶

4. Custom display / menu ratio - responsive¶

Custom embeding scenarios¶

1. Viewer only¶

2. Controller only¶

3. Custom setup viwer + controller¶

Styling¶

Further Reading¶