General iframe method

This method isn’t good for integration, but sometimes it is the one way to integrate. Please, try deployment kit before implement this method.

Please note that integrating the shopping cart will help you better understand the purpose of the visualizer and track user actions to assess the impact of the visualizer on conversion rates. You can view the technical implementation of the shopping cart here.

Integrating the Visualizer application into a client’s website

You will need an API Token (to be generated and issued by a Wizart administrator) - api_token

In the source file of the target page, add the required code in the <body> tag, as shown in the listing below.

Since the Wizart Web Visualizer allows to open and visualize a specific product (SKU), please pay attention to how this is implemented separately.

To avoid issues with the Wizart Web Visualizer appearing the CSS z-index property for wizart-fitting-room-object tag id has to be greater than z-index for the rest of pop-up windows on client web application.

<body>

...

<button id="wizart-fitting-room-button" onClick="openFittingRoom()">
    Fitting room
</button>

<iframe 
  id="wizart-fitting-room-object"
  name="wizartFittingRoom" 
  role="dialog" 
  aria-label="Wizart Fitting Room." 
  type="text/html" 
  allow="web-share"
  allowfullscreen
  >
</iframe>

<style>
  #wizart-fitting-room-object {
      z-index: 2147483647 !important;
      display: none;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8);
      border: none;
  }
  #wizart-fitting-room-object.active {
    display: block;
  }
</style>

<script src="./wizart-integration.js"></script>

...

</body>

wizart-integration.js:

Using the listing below, create a js-file named wizart-integration.js: upload it to the existing source files of the client’s web application.

// TODO get api token from Wizart and set the value
const api_token = 'CLIENT_SPECIFIC_API_TOKEN';

// please do not change the server address
const server_address = 'https://pim-client.wizart.ai';

// bba (back button action) param is used to add back button to wizart component
const fittingRoomEndpoint = server_address
  + '/fitting-room'
  + '?api_token=' + api_token 
  + '&bba=true'
;

function wid() {
  let currentID = localStorage.getItem("w_uuid");
  if (!currentID) {
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    }
    currentID = `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
    localStorage.setItem("w_uuid", currentID);
  }
  return currentID;
}

function openFittingRoom (searchQuery) {
  const componentEndpoint = searchQuery ? fittingRoomEndpoint + searchQuery : fittingRoomEndpoint;
  let fittingRoomObject = document.getElementById('wizart-fitting-room-object');
  const fittingRoomObjectContainer = fittingRoomObject.parentElement;
  fittingRoomObject.setAttribute('src', componentEndpoint);

  // object clonning is necessary as some browsers does not render "object" twice after changing data attribute
  const clonnedFittingRoomObject = fittingRoomObject.cloneNode(true);
  fittingRoomObjectContainer.appendChild(clonnedFittingRoomObject);
  fittingRoomObject.remove();
  clonnedFittingRoomObject.classList.add('active'); 

  // should be added to avoid duplicating scrollbars
  document.getElementsByTagName('html')[0].style.overflow = 'hidden';
  const queryParams = new URLSearchParams({
    v: 1,
    ds: "web",
    t: "event",
    tid: "UA-121898981-9",
    ec: "spi_entry_button",
    ea: "pressed",
    uid: wid(),
    dr: window?.location?.origin || "",
    z: Date.now(),
    cd1: !!searchQuery,
  }).toString();
  fetch(`https://www.google-analytics.com/collect?${queryParams}`);
}

// bba event - fired when back button is clicked at wizart component
window.addEventListener('message', function (event) {
  if (~event.origin.indexOf(server_address)) {
    // exactly 'close_overlay' as it's sent from wizart component
    if (event.data === 'close_overlay') {
      // return overflow of target page to initial state
      document.getElementsByTagName('html')[0].style.overflow = 'auto';
      document.getElementById('wizart-fitting-room-object').classList.remove('active');
    }    

    if (event.data && event.data.eventName === 'wizart_shopping_cart') {
      // here you can process the data that comes from the shopping cart after clicking go_to_shop
    }
  }
});

document.addEventListener("DOMContentLoaded", () => {
  const buttons = document.querySelectorAll("#wizart-fitting-room-object");
  const queryParams = new URLSearchParams({
    v: 1,
    ds: "web",
    t: "event",
    tid: "UA-121898981-9",
    ec: "spi_entry_button",
    ea: "shown",
    uid: wid(),
    dr: window?.location?.origin || "",
    z: Date.now(),
    cd2: buttons.length > 1,
  }).toString();
  fetch(`https://www.google-analytics.com/collect?${queryParams}`);
});

Shopping cart.

An example of shopping cart integration is shown in the listing above. Please check line 64.

Event.data format:
{
  eventName: 'wizart_shopping_cart',
  payload: [
    { 
      vendor_code: string,
      quantity: number, 
    },
  ],
}

Optional parameters:

Visualizer configuration: https://pim-admin.wizart.ai/configuration/web

Parameter	Type	Description

Parameter	Type	Description
user_id	string	User identifier or Device identifier. Format: user_id=string.
context	string	Format: context=string Here you can find out more about the context.
custom_shopping_cart_link	string	This parameter takes precedence over the setting in the PIM configuration. Format: custom_shopping_cart_link=Wizart - Welcome to the New Era of Product Visualization
locale	array	Need to indicate in which language product’s should be displayed. More information you can find here.
room_uuid	string	The room with the selected uuid will be opened
deactivate_custom_photo	bool 1/0	For deactivating uploading photo.

Integration example with the parameters:

Save and move all the changes into the work environment of the client’s website.
Check and verify that the integration is operational.

The integration is now considered complete.

In case you have any additional questions or issues, please contact Wizart technical support at support@wizart.ai

Simple integration: Video tutorial

Wizart Web Visualizer: integration tutorial

General iframe method

wizart-integration.js:

Shopping cart.

Optional parameters:

Parameter

Parameter