Launching the Visualizer with a predefined room scene or/and a predefined collection

1 Launching the Visualizer with a predefined room scene or/and a predefined collection
2 Launching the Visualizer with a predefined room scene, a predefined collection, and a predefined product applied

See more about here.

If you need to send some predefined values, you can use a special parameter called ‘’parameters’’ and “article_query“ from our Deployment Kit. This option would allow you to skip the step of room selection and launch the Visualizer with the chosen room scene and a predefined collection with a specific product applied to the surface.

For example, you can choose bedroom as the room scene your Visualizer will be launched with, and select a pattern matching this room type with your predefined collection. So, when your customer clicks the entry point button on your website, they will see a particular room and collection with a pattern you want them to start with.

All you need to do is to add certain parameters to your integration and write the collection name.

Launching the Visualizer with a predefined room scene or/and a predefined collection

You have to use collection_name in an article_query

Also, you have to use a room identifier to launch the Visualizer with a predefined room scene.

A ‘room_uuid' parameter for each room scene can be found in your personal PIM-account in the 'Interiors’ tab (please see below).

<html>
<head></head>
<body>
<script
        class="wizart__floating-button"
        data-title="Custom button title"
        data-token="5sqE3XBME9tOTgZfc8bI5IxritvBLfwuJWU7txisyrliCpifqKRa7LHYJ7cz"
        data-parameters='{"room_uuid":"184164cb-2a4d-49b7-a716-50685b3cd70d"}'
        data-article_query='{"collection_name":"Demo Wallpapers"}'
        src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js"
></script>
</body>
</html>

<html>
<head></head>
<body>
<script type="application/javascript"
        defer
        src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>
<script type="application/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
        var floatingButton = new window.WFloatingButton({
            token: "5sqE3XBME9tOTgZfc8bI5IxritvBLfwuJWU7txisyrliCpifqKRa7LHYJ7cz",
            element: document.getElementsByTagName("body")[0],
            articleQuery: Json.stringify({
                  collection_name: 'Demo Wallpapers',
            }),
        });

        floatingButton.render({
            parameters: JSON.stringify({
                room_uuid: '184164cb-2a4d-49b7-a716-50685b3cd70d',
            })
        });
    });
</script>
</body>
</html>

<iframe 
  id="wizart-fitting-room-object"
  name="wizartFittingRoom" 
  role="dialog"
  aria-label="Wizart Fitting Room." 
  type="text/html" 
  allowfullscreen
  src='https://pim-client.wizart.ai/fitting-room?api_token=5sqE3XBME9tOTgZfc8bI5IxritvBLfwuJWU7txisyrliCpifqKRa7LHYJ7cz&article_query={"collection_name":"Demo Wallpapers"}&room_uuid=184164cb-2a4d-49b7-a716-50685b3cd70d'>
</iframe>

Launching the Visualizer with a predefined room scene, a predefined collection, and a predefined product applied

In case you’d like your Visualizer to launch with a predefined room scene and a predefined collection with a predefined product applied to the chosen surface, please follow the instructions below.

The implementation is the same as described above, but you will need to add a vendor_code as a parameter with collection_name as article_query.