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>
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 “scaleProduct“ 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
}