...
| 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>
|
|
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.
| 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>
|
|