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

See more about Floating button and Entry point button

If you need to send some predefined values, you can use a special parameter called ‘’parameters’’ 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 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. So, when your customer clicks the entry point button on your website, she or he will see a particular room and a pattern you want them to start with.

All you need to do is to add certain parameters to your integration.

Launching the Visualizer with a predefined room scene

You have to use a room identifier to launch the Visualizer with a predefined room scene.

Please, request room_uuid for a room scene via Wizart Help Center - Integration tab.

option #1: launching the Visualizer with a predefined room scene

<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"}'
        src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js"
></script>
</body>
</html>

option #2: launching the Visualizer with a predefined room scene

<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]
        });

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

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

In case you’d like your Visualizer to launch with a predefined room scene and 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.

option #1: launching the Visualizer with a predefined room scene and a predefined product applied

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

option #2: launching the Visualizer with a predefined room scene and a predefined product applied

<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]
        });

        floatingButton.set({ vendorCode: 'Wallpaper 06' }); //a product vendor code

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