...
| Expand |
|---|
| title | second integration via a deployment kit. |
|---|
|
| Code Block |
|---|
| <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>
|
|
| Info |
|---|
Example of using custom button to get scale of current interactive product: |
send Send the "getScale" event and listen the "scaleProduct" event to get current interactive product with scale param:
| Expand |
|---|
| title | Example with second integration via a deployment kit. |
|---|
|
| Code Block |
|---|
| <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“ “scaleProduct“ event :
| Code Block |
|---|
{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
} |
...