Page Comparison

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

language	js

<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

language	js

<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

title	Base structure

Code Block

language	js

{
  "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	yes		-	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

Versions Compared

Old Version 2

New Version 3

Key

Example of integration with deployment-kit.

Parameters explanations