To add the "Custom apply" feature for wall murals 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 mural, 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: "wall_mural",
name: "product_name",
vendor_code: "product_sku_id",
image_path:
"https://images.your_website.com/images/paintedworldmap.png",
unit: "m",
width: 2,
height: 3,
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":"wall_mural","name":"product_name","vendor_code":"product_sku_id","image_path":"https://images.website.ai/images/paintedworldmap.png","unit":"m","width":"2","height":"3","link":"https://wizart.ai"}}}'
></script>
</body>
</html>
|
|
Parameters explanations
| Expand |
|---|
|
| Code Block |
|---|
| {
"custom_apply": {
{
product: {
type: "wall_mural",
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: 2,
height: 3,
link: "https://wizart.ai",
}
}
}
|
|
Parameter | Type | Required | Possible values | Default Value | Example | Description |
|---|
custom_apply | object | yes | | Head element | |
product | object | yes | | Contains product attributes | |
type | string | yes | wall_mural | - | “wall_mural” | |
name | string | yes | | - | “My mural name“ | |
vendor_code | string | yes | | - | “vendor_code_or_sku“ | Product’s code or SKU |
image_path | string | no when is_base64=1 yes in other cases | | - | https://images.host.ai/images/pim-data/5411d399-baec-4c35-8e81-8c1cc185dee1/7141/paintedworldmap.png | Generated texture path. We will use it to download this texture and use it in our fitting room. |
preview_path | string | no | | - | https://images.host.ai/images/pim-data/5411d399-baec-4c35-8e81-8c1cc185dee1/7141/paintedworldmap-preview.png | Generated texture preview for our fitting room. |
link | string | no | | - | https://my-website.com/my-product-page | Your clients will be able to use that link to go to your product page. |
unit | string | yes when unit = in | cm, m, in | m | m | |
width | numeric(float or integer) | yes when unit = cm,m | | - | 10 | |
hight | numeric(float or integer) | yes when unit = cm,m | | - | 12.5 | |
height_feet | integer | yes when unit = in | | 0 | 15 | |
height_inch | integer | yes when unit = in | | 0 | 0 | |
width_feet | integer | yes when unit = in | | 0 | 10 | |
width_inch | integer | yes when unit = in | | 0 | 2 | |
repeatable | integer | no | 0, 1 | 0 | 0 | 0 - pattern won’t repeat 1 - pattern will repeat vertically and horizontally on the wall |
customized_size | integer | no | 0,1 | 0 | 0 | |
is_base64 | integer | no | 0,1 | 0 | 0 | To use image_path via base64. |
