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.