Page Comparison

...

To further illustrate the concept of using parameters in iframe integration, let's explore some practical examples:

1. Selected SKU

The article_query parameter plays a crucial role in enabling the automatic application of a selected product SKU (Stock Keeping Unit) to the visualization based on the user's room selection.

Let’s see the example:

<iframe
  id="wizart-fitting-room-object"
  role="dialog"
  aria-label="Wizart Fitting Room."
  type="text/html"
  class="active"
  src='https://pim-client.wizart.ai/fitting-room?api_token=your_API_token&article_query={"vendor_code":"WP-01"}'
  allowfullscreen
  >
</iframe>

Here is the result:

1. Step 1. Choose the interior.

...

2. Step 2. See the result.

...

2. Selected interior

The room_uuid parameter enabling the initial loading of an iframe with a specific interior preselected.

Let’s see the example:

<iframe
  id="wizart-fitting-room-object"
  role="dialog"
  aria-label="Wizart Fitting Room."
  type="text/html"
  class="active"
  src='https://pim-client.wizart.ai/fitting-room?api_token=your_API_token&room_uuid=cff18b37-f768-4a63-b2a9-6268abf27c0a'
  allowfullscreen
  >
</iframe>

Here is the result:

...

3. Selected collection

The article_query parameter plays a crucial role in enabling the automatic application of a selected collection to the visualization based on the user's room selection.

Let’s see the example:

<iframe
  id="wizart-fitting-room-object"
  role="dialog"
  aria-label="Wizart Fitting Room."
  type="text/html"
  class="active"
  src='https://pim-client.wizart.ai/fitting-room?api_token=your_API_token&article_query={"collection_name":"Carpet Rolls"}'
  allowfullscreen
  >
</iframe>

Here is the result:

1. Step 1. Choose the interior.

...

2. Step 2. See the result.

...

The power of parameter-driven iframe integration lies in its flexibility to combine different parameter methods, enabling a wide range of visualization scenarios. Let's explore some potential combinations:

1. Collection and Room Selection:
   Parameter Usage: Utilize both article_query and room_uuid parameters.
   Scenario: The user selects a collection from a collection page. The iframe loads with the selected collection pre-populated, and the visualization automatically applies the relevant products to the preselected room.

2. SKU and Collection Selection:
   Parameter Usage: Employ both sku and collection_name parameters.
   Scenario: The user selects an article and a collection from a product page. The iframe loads with the selected collection pre-populated, and the visualization initially displays the chosen article within the selected room.