Creating a direct link launching the Visualizer with a selected product (2) (2)

If you want to share the visualization result in social networks, marketing campaign, or send a direct link with a specific product applied to the chosen surface in a particular room scene to your customers, you can create a direct link launching the Visualizer with the predefined room scene and a particular product applied.

Please, check our general instructions on how to add the functionality launching the Visualizer with a predefined room scene or/and a predefined product. In case you’d like to be able to create a separate link, you will need to have an opportunity to add the information about the selected room scene and product in the script.

You can use a dedicated page on your website and use GET parameters to advertise the selected room scene and product.

Example of link: https://your-website.com/fitting-room?room=selected_room_uuid&product=product_vendor_code&open_visualizer=1

Instructions

<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) {
        const paramsString = window.location.search; //get url params
        const searchParams = new URLSearchParams(paramsString); //parse url params


        const floatingButton = new window.WFloatingButton({
            token: "5sqE3XBME9tOTgZfc8bI5IxritvBLfwuJWU7txisyrliCpifqKRa7LHYJ7cz",
            element: document.getElementsByTagName("body")[0]
        });

        floatingButton.set({ vendorCode: searchParams.get('product') }); //a product vendor code from url params

        floatingButton.render({
            parameters: JSON.stringify({
                room_uuid: searchParams.get('room'), //a room uuid from url params
            })
        });
        
        // open Visualizer after page load
        if (searchParams.get('open_visualizer') === "1") {
          floatingButton.open();
        }
    });
</script>
</body>
</html>

Also, using online services like this, you can generate QR codes with a link on your website with the predefined configuration.