To add the "Custom apply" feature for custom wallpaper designs on your website, you will need to create a custom_apply object. Here's an example of what it should look like:
Example of integration with deployment-kit.
To open the visualizer with the customized design, you must set the product info in the parameters property data-parameters- this is JSON string. Please note that the list of parameters varies depending on the product type, and is provided below.
| Expand |
|---|
| title | Option #1. Integration via a custom button |
|---|
|
| 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" />
<title>Document</title>
<script
defer
type="application/javascript"
src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"
></script>
</head>
<body>
<button onClick="openVisualizer()">open fitting room</button>
<script type="application/javascript">
const openVisualizer = function () {
const entryPoint = new window.WEntryPoint({
token: "YOUR TOKEN",
element: document.getElementsByTagName("body")[0],
});
entryPoint.open({
parameters: {
custom_apply: JSON.stringify({
product: {
type: "wallpaper",
name: "product_name",
vendor_code: "product_sku_id",
image_path:
"https://images.your_website.com/images/paintedworldmap.png",
unit: "m",
width: 0.56,
height: 0.64,
link: "https://wizart.ai",
},
}),
},
});
};
</script>
</body>
</html>
|
|
| Expand |
|---|
| title | Option #2. 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" />
<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_apply":{"product":{"type":"wallpaper","name":"product_name","vendor_code":"product_sku_id","image_path":"https://images.website.ai/images/paintedworldmap.png","unit":"m","width":"0.56","height":"0.64","link":"https://wizart.ai"}}}'
></script>
</body>
</html>
|
|
Parameters explanations
| Expand |
|---|
|
| Code Block |
|---|
| {
"custom_apply": {
{
product: {
type: "wallpaper",
name: "product_name",
vendor_code: "product_sku_id",
image_path: "https://images.host.ai/images/pim-data/5411d399-baec-4c35-8e81-8c1cc185dee1/7141/paintedworldmap.png",
unit: "m",
width: 0.56,
height: 0.64,
link: "https://wizart.ai",
}
}
}
|
|
...