Iframe integration on the product page

Iframe integration on a product page refers to embedding the product visualization UI directly into the page instead of using a default button. This approach eliminates the need for users to click a button to view the visualization, providing a more seamless and engaging experience.

In this example, the product visualization is embedded directly within the product page, eliminating the need for a separate button:

The following code snippet provides a guide for integrating the visualization using an iframe approach:

<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"
   allowfullscreen
   >
</iframe>

<style>
   iframe {position:fixed; width:60%; height:60%; border:none; z-index:999999; }
</style>

'your_API_token' can be found in your PIM-account:

The provided code should be placed below the element where you want the iframe to appear. This ensures that the iframe is positioned correctly within the page layout.

The src attribute in an iframe tag can also include various parameters that become accessible within the iframe's context.

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:

Step 1. Choose the interior.

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:

To acquire the room_uuid for a specific interior, follow these steps:
Access the PIM System -> interiors tab selection -> get room_uuid (column UUID)

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:

Here is the result:

Step 1. Choose the interior.

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:

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.
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.