Custom apply for wallpapers (2) (2)

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.

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

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

Base structure

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

Parameter	Type	Required	Possible values	Default Value	Example	Description
custom_apply	object	yes		Head element
product	object	yes		Contains product attributes
type	string	yes	wallpaper	-	“wallpaper”
name	string	yes		-	“My wallpaper 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		-	0.56	Width of the pattern design
hight	numeric(float or integer)	yes when unit = cm,m		-	0.64	Height of the pattern design
height_feet	integer	yes when unit = in		0	8
height_inch	integer	yes when unit = in		0	0
width_feet	integer	yes when unit = in		0	15
width_inch	integer	yes when unit = in		0	2
pattern_offset	float	no Applicable for: wallpaper		0	0.34	Pattern offset should be specified if applicable to ensure correct wallpaper visualization and installation.
overlap	numeric(float or integer) when unit = cm,m	No		-	0.56
overlap_feet	integer when unit = in	No		-	1
overlap_inch	integer when unit = in	No		-	2
repeatable	repeatable	No	0,1	1	0	0 - pattern won’t repeat 1 - pattern will repeat vertically and horizontally on the wall