Custom apply for wall murals (2) (2)

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.

Please select the desired integration option below and expand the code sample provided:

Option #1. Integration via a custom button

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

Option #2. Integration via a deployment kit.

<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

Base structure

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