Custom button in Visualizer

Add custom button in your Visualizer.

You can call your functionality by clicking on this button. When a button is clicked, the "customButtonWasClicked" event is sending to the parent window.

To add a custom button you should add the code below to your Deployment Kit integration.

custom_button: {title:"Your button"}

first Integration via a deployment kit.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no viewport-fit=cover"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Document</title>
  </head>
  <body>
  
    <script
      class="wizart__entry-point"
      data-token="YOUR TOKEN"
      src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"
      data-parameters='{"custom_button": {"title":Your button"}}'
    ></script>
      <script>
  window.addEventListener('message',()=>{
    if(event.data && event.data.eventName === 'customButtonWasClicked'){
        console.log('the button was clicked')
      //your code 
    }
  }, false);
</script>
  </body>
</html>

second integration via a deployment kit.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no viewport-fit=cover"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <script
     const entryPoint = new WEntryPoint({
        element: document.getElementById("element_id"),
        className:'wizart__entry-point',
        token: "YOUR TOKEN",
      });

      entryPoint.render({
          tooltipPosition: "bottom",
          insertElementPosition: "before",
          parameters:JSON.stringify({
            custom_button: {title:"Your button"}
          }),
      });
      </script>
      <script>
  window.addEventListener('message',()=>{
    if(event.data && event.data.eventName === 'customButtonWasClicked'){
        console.log('the button was clicked')
      //your code 
    }
  }, false);
</script>
  </body>

</html>

Example of using custom button to get scale of current interactive product: send the "getScale" event and listen the "scaleProduct" event to get current interactive product with scale param:

Example with second integration via a deployment kit.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no viewport-fit=cover"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <script
     const entryPoint = new WEntryPoint({
        element: document.getElementById("element_id"),
        className:'wizart__entry-point',
        token: "YOUR TOKEN",
      });

      entryPoint.render({
          tooltipPosition: "bottom",
          insertElementPosition: "before",
          parameters:JSON.stringify({
            custom_button: {title:"Your button"}
          }),
      });
      </script>
  <script>
    window.addEventListener('message',()=>{
      if(event.data && event.data.eventName === 'customButtonWasClicked'){
          console.log('the button was clicked')
        //your code
        window.frames.wizartFittingRoom.postMessage(
            {eventName:"getScale"}, "*"
        );
      }
      if (event.data && event.data.eventName === 'scaleProduct') {
        console.log('scale_product',event.data)
      }
    }, false);
    // now you can close the iframe or do something else
  </script>
  </body>

</html>

Payload of “scale_product“ event :

{product: 
  {type: 'wall_mural', 
   name: 'product_name',
   vendor_code: 'product_sku_id',
   width:'2',
   height:'1',
   ...other original data of product,
}
scale: 1.25 // scaling from 0.5 to 4
}