Interactive Custom apply for wall murals

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:

<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: {
          // locale:"de"(there may be other parameters here),
          custom_apply: {
            product: {
              type: "wall_mural",
              name: "product_name",
              vendor_code: "product_sku_id",
              image_path:
                "data:image/jpeg;base64.....(base_64 image string)",
              is_base64: 1,
              customized_size: 1,
              repeatable:0,
              unit: "m",
              width: 2,
              height: 3,
              link: "https://wizart.ai",
            },
        }},
      });
    };
  </script>
  
  </body>
</html>

<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>
        const entryPoint = new window.WEntryPoint({
            token: "YOUR TOKEN",
            element: document.getElementsByTagName("body")[0],
        });

        entryPoint.render({
            parameters: JSON.stringify({
            // locale:"de"(there may be other parameters here),
                custom_apply: {
                    product: {
                        type: "wall_mural",
                        name: "product_name",
                        vendor_code: "product_sku_id",
                        image_path:
                            "data:image/jpeg;base64.....(base_64 image string)",
                        is_base64: 1,
                        customized_size: 1,
                        repeatable: 0,
                        unit: "m",
                        width: 2,
                        height: 3,
                        link: "https://wizart.ai",
                    }
                }
            })
        })
    </script>
  </body>
</html>

<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",
      "is_base64":1,
      "image_path":"base64_string",
      "unit":"m",
      "width":"2",
      "height":"3",
      "customized_size": "1", 
      "repeatable":"0",
      "link":"https://wizart.ai"}}}'
    ></script>
    
  </body>
</html>

If you use iframe integration, you shouldn’t sent “image_path" in parameters. You should send it in the postMessage in event "setCustomProduct”

Parameters explanations

Parameter	Type	Required	Possible values	Default Value	Example	Description

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 (when you use depKit integration) no when is_base64=1(only when you use old iframe integration. )		-	base_64 string	Generated texture in base64. We will use it to use it in 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	yes	0, 1	0	0	0 - pattern won’t repeat (used for interactive products)1 - pattern will repeat vertically and horizontally on the wall.
customized_size	integer	yes	0,1	0	0	1 - the texture can scale, 0 - the texture only moves along the wall without scaling.
is_base64	integer	yes	0,1	0	0	To use image_path via base64.