Deployment Kit this is the instruction to integrate Wizart Button less than 10 min, if you are tech specialist.

Expand

title	First integration option (RECOMMENDED)

First integration option:

Info
Shopping cart integration.

Code Block

language	js

<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js"></script>

<script>
  const floatingButton = new window.WFloatingButton({
    token: "your token for wizart",
    element: "link to the element to insert the entry point button", // example document.getElementById("0000")
    vendorCode: "vendor code for first apply",
    articleQuery: Json.stringify({
      vendor_code: 'vendor code for first apply',
      collection_name: '',
     }),
  });
  floatingButton.render();
</script>

Please, note, that articleQuery isn’t required. This parameter need only, if you want init collection and sku in PIM, because, if you have multi-collection (one product in several collections) and you want init that product in that collection, please, use articleQuery, but if you don’t need this, remove it.

Parameter	Description	Type
token	api token - generated and issued by Wizart Administrator.	Required
vendorCode	Unique SKU ID of the product uploaded to Wizart system.	Required
articleQuery	If you want init collection and sku in PIM, e.x: that product in that collection.	Optional
element	link to the element to insert the entry point button (e.g document.getElementsByTagName("")[0])	Optional

When you are rendering button, you can write next parameters to style your button:

Info
If you want re-styled button, it will look like: `floatingButton.render({title: "Your title", color: "#000"});`

Info
The set method can be used to set “vendorCode,” or “element”.

Code Block

language	js

floatingButton.set({ vendorCode: '' });
floatingButton.set({ element: document.getElementById("0000")});

Code Block

  fontSize,
  title,
  tooltipTitle,
  tooltipPosition,
  tooltipDisable,
  glitterDisable,
  className,
  borderRadius,
  parameters,
  background,
  color,
  width,
  height,
  border,
  image,
  compact,
  tutorial,
  tutorialDelay,
  onloadCallback,
  onCloseCallback,
  onButtonClick,
  iframeElementSelector,
  insertIframeElementPosition,
  onAddShoppigCartItem,
  onRemoveShoppingCartItem,

Name of parameter

Description and Examples of using

fontSize

Font size of your button.
floatingButton.render({fontSize: "24px"});

title

Text to be displayed on the button (the default value is "Try it in your room in one click!").
floatingButton.render({title: "Your title"});

tooltipTitle

Text to be displayed on the tooltip (the default value is "See it in your room!").
floatingButton.render({tooltipTitle: "Your tooltip title"});

tooltipPosition

Tooltip position towards the button. Available values are top, right, bottom, left (the default value is top).
floatingButton.render({tooltipPosition: "bottom"});

tooltipDisable

If the value is “true”, the tooltip will not be displayed. Default: false.
floatingButton.render({tooltipDisable: "true"});

glitterDisable

If the value is “true”, glitter will not be displayed.
floatingButton.render({glitterDisable: "true"});

className

Class to be set for the button element on the page. Mostly, using to change more style, that our default parameters can’t (e.x. box-shadow).
floatingButton.render({className: "wizart-main-page"});

borderRadius

Button border-radius.
floatingButton.render({borderRadius: "15px"});

parameters

Parameter value should be a result of the function
JSON.stringify(); . Additional parameters from the table below can be added to this attribute.
floatingButton.render({parameters: "{'vendor_code':'vendor_code','collection_name':'collection_name'}"});

background

Button background.
floatingButton.render({background: "#000"});

color

Button text color.
floatingButton.render({color: "#FFF"});

width

Max button width.
floatingButton.render({width: "100%"});

height

Button height.
floatingButton.render({height: "60px"});

border

Style of button. For example: 2px solid;
floatingButton.render({border: "2px solid"});

image

Link to the icon that will be displayed on the button.
floatingButton.render({image: "https://d365wxw7pkwfoh.cloudfront.net/Wizart_Logo_e23fb5c030.svg"});

compact

If the value is true, button will be displayed in the compact mode*.
floatingButton.render({compact: "true"});

tutorial

If the value is true and compact is true, the button will be animated: from the compact to the full mode and then back to compact mode*. Animation repeats only once.
floatingButton.render({tutorial: "true"});

tutorialDelay

Period of time before the animation is activated.
Available periods are 5, 10, 20 or 30 seconds.
If this parameter is not set, the button will be animate immediately.
floatingButton.render({tutorialDelay: "10"});

onloadCallback

The name of the function to be in the global scope. The function will be called when the visualizer is loaded.
Example:

Code Block

language	js

function wizartOnLoad() {
   console.log('Visualizer is loaded!');
}
floatingButton.render({onloadCallback: "wizartOnLoad"});

floatingButton.render({onloadCallback: "nameOfFunction"});

onCloseCallback

The name of the function to be in the global scope. The function will be called after the visualizer is closed.
Example:

Code Block

language	js

function wizartOnClosed() {
   console.log('Visualizer is closed!');
}
floatingButton.render({onloadCallback: "wizartOnClosed"});

floatingButton.render({onCloseCallback: "nameOfFunction"});

onButtonClick

The name of the function to be in the global scope. The function will be called when the button is cliecked.
Example:

Code Block

language	js

function wizartButtonClicked() {
   console.log('Button is clicked!');
}
floatingButton.render({onloadCallback: "wizartButtonClicked"});

floatingButton.render({onButtonClick: "nameOfFunction"});

iframeElementSelector

A CSS selector to select an element on the page to insert the fitting room where you want. The best way to put iframe is “before body“.
Example:

Code Block
<body></body> floatingButton.render({iframeElementSelector: "body"});

floatingButton.render({iframeElementSelector: "nameOfSelector"});

insertIframeElementPosition

The insertion position of the element. Values: append, before, after. default value: append. The best way to put iframe is “before body“.

Code Block
<body></body> floatingButton.render({insertIframeElementPosition: "before"});

floatingButton.render({insertIframeElementPosition: "nameOfElementPosition"});

onAddShoppigCartItem

The function is called on the event of adding an product to the cart.

Code Block

language	js

function wizartAddItemToCart() {
   console.log('Product is added!');
}
floatingButton.render({onAddShoppigCartItem: "wizartAddItemToCart"});

floatingButton.render({onAddShoppigCartItem: "nameOfFunction"});
Please, before adding this parameter, do cart integration.

onRemoveShoppingCartItem

The function is called on the event of deleting an product to the cart.

Code Block

language	js

function wizartRemoveItemToCart() {
   console.log('Product is removed!');
}
floatingButton.render({onRemoveShoppingCartItem: "wizartRemoveItemToCart"});

floatingButton.render({onRemoveShoppingCartItem: "nameOfFunction"});
Please, before adding this parameter, do cart integration.

Shopping cart.
Anchor
shopping-cart-floating-first
shopping-cart-floating-first

Code Block

language	js

const onAddShoppigCartItem = (payload) => {
  console.log(payload);
  // { item: { vendor_code: 'vendor_code' }};
}

//The set method can be used to set vendorCode or articleQuery.

floatingButton.set({ vendorCode: '' });
floatingButton.set({ articleQuery: Json.stringify({ vendor_code: '' })});
 
//The setShoppingCartStore method allows you to set the current state of the shopping cart.

floatingButton.setShoppingCartStore(payload);
// payload format [{vendor_code: 'vendor_code', quantity: 1 }, ...]

Code Block
const onRemoveShoppingCartItem = () => { console.log(payload); // { item: { vendor_code: 'vendor_code', removeAll: true }}; }

Parameters

Anchor

	parameters-floating-first
	parameters-floating-first

Parameters	Type	Description
context	array	Need to indicate from which part of string in CSV file need to be get. More information you can find here.
locale	array	Need to indicate in which language product’s should be displayed. More information you can find here.
main_page_link	string	Link added to your clickable logo.
open_first_room	bool 1/0	Skipping step a room selection and open any first room
room_uuid	string	The room with the selected uuid will be opened
deactivate_custom_photo	bool 1/0	For deactivating uploading photo.
enable_two_way_favorites	bool 1/0	For enabling two-way synchronization of Favorites (https://wizart.atlassian.net/wiki/spaces/WDP/pages/2682913853/Cart+integration+and+favorites+integration#Two-way-Favorites-synchronization )

compact mode*:

Expand

title	Second integration option

Second integration option:

Info
Shopping cart integration.

Code Block

language	js

<script
  class="wizart__floating-button"
  data-title="Custom button title"
  data-token="token"
  data-vendor_code=""
  data-article_query=""
  data-parameters=""
  data-background=""
  data-color=""
  data-image=""
  data-tooltip-title=""
  data-tooltip-position=""
  data-tooltip-disable=""
  data-glitter-disable=""
  data-width=""
  data-height=""
  data-border=""
  data-border_radius=""
  data-class_name=""
  data-compact=""
  data-tutorial=""
  data-tutorial-delay=""
  data-on-button-click=""
  data-element-selector=""
  data-insert-element-position=""
  data-iframe-element-selector=""
  data-insert-iframe-element-position=""
  src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js"
></script>

Name of parameter

Description and Examples of using

class

Required parameter.
Cannot be changed.

src

Link to js-file with integration code.

data-token

api token - generated and issued by Wizart Administrator.

data-title

Text to be displayed on the button (the default value is "Try it in your room in one click!").
data-title="Visualizer"

data-vendor_code

Unique SKU ID of the product uploaded to Wizart system.
data-vendor_code="vendor_code"

data-article_query

Required in the case if parameter data-vendor_code is not enough for product search in the Wizart system. Parameter value should be a result of the functionJSON.stringify();.

Info
Please, note, that `articleQuery` isn’t required. This parameter need only, if you want init collection and sku in PIM, because, if you have multi-collection (one product in several collections) and you want init that product in that collection.

data-article_query="{'vendor_code':'vendor_code','collection_name':'collection_name'}"

data-background

Button background.
data-background="#000"

data-color

Button text color.
data-color="#FFF"

data-tooltip-disable

If the value is “true”, the tooltip will not be displayed.
data-tooltip-disable="true"

data-tooltip-title

Text to be displayed on the tooltip (the default value is "See it in your room!").
data-tooltip-title="Visualizer!"

data-tooltip-position

Tooltip position towards the button. Available values are top, right, bottom, left (the default value is top).
data-tooltip-position="top"

data-glitter-disable

If the value is “true”, glitter will not be displayed.
data-glitter-disable="true"

data-width

Max button width.
data-width="100%"

data-height

Button height.
data-height="60px"

data-border

Style of button. For example: 2px solid;
data-border="2px solid"

data-border_radius

Button border-radius.
data-border_radius="15px"

data-image

Link to the icon that will be displayed on the button.
data-image="https://d365wxw7pkwfoh.cloudfront.net/Wizart_Logo_e23fb5c030.svg"

data-class_name

Class to be set for the button element on the page. Mostly, using to change more style, that our default parameters can’t (e.x. box-shadow).
data-class_name="wizart-main-page"

data-compact

If the value is true, button will be displayed in the compact mode*.
data-compact="true"

data-tutorial

If the value is true and data-compact is true, the button will be animated: from the compact to the full mode and then back to compact mode* Animation repeats only once.
data-tutorial="true"

data-tutorial-delay

Period of time before the animation is activated.
Available periods are 5, 10, 20 or 30 seconds.
If this parameter is not set, the button will be animate immediately.
data-tutorial-delay="10"

data-parameters

Parameter value should be a result of the function JSON.stringify(); .
Additional parameters from the table below can be added to this attribute.
data-parameters="{'context':'en','locale':'en'}"
This method include context or locale.

data-onload-callback

The name of the function to be in the global scope. The function will be called when the visualizer is loaded.
Example:

Code Block

language	js

function wizartOnLoad() {
   console.log('Visualizer is loaded!');
}
<script
 class="wizart__floating-button"
 data-token="token"
 data-onload-callback="wizartOnLoad"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-onload-callback="nameOfFunction"

data-on-close-callback

The name of the function to be in the global scope. The function will be called after the visualizer is closed.

Code Block

language	js

function wizartOnClosed() {
   console.log('Visualizer is closed!');
}
<script
 class="wizart__floating-button"
 data-token="token"
 data-onload-callback="wizartOnClosed"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-on-close-callback="nameOfFunction"

data-element-selector

A CSS selector to select an element on the page to insert a button where you want.
Example (you want locate it under cart button):

Code Block

<div id="shopping-cart">Add to cart</div>
<script
 class="wizart__floating-button"
 data-token="token"
 data-element-selector="#shopping-cart"
 data-insert-element-position="after"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-element-selector="SELECTOR"

data-insert-element-position

A CSS selector to select an element on the page to insert a button where you want.
Example (you want locate it under cart button):

Code Block

<div id="shopping-cart">Add to cart</div>
<script
 class="wizart__floating-button"
 data-token="token"
 data-element-selector="#shopping-cart"
 data-insert-element-position="after"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-insert-element-position="nameOfElementPosition"

data-iframe-element-selector

A CSS selector to select an element on the page to insert the fitting room where you want. The best way to put iframe is “before body“.
Example:

Code Block

<body></body>
<script
 class="wizart__floating-button"
 data-token="token"
 data-iframe-element-selector="body"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-iframe-element-selector="nameOfSelector"

data-insert-iframe-element-position

The insertion position of the element. Values: append, before, after. default value: append. The best way to put iframe is “before body“.
Example:

Code Block

<body></body>
<script
 class="wizart__floating-button"
 data-token="token"
 data-iframe-element-selector="body"
 data-insert-iframe-element-position="before"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-insert-iframe-element-position="nameOfElementPosition"

Parameters	Type	Description
context	array	Need to indicate from which part of string in CSV file need to be get. More information you can find here.
locale	array	Need to indicate in which language product’s should be displayed. More information you can find here.
user_id	string	User identifier or Device identifier
main_page_link	string	Link added to your clickable logo.
open_first_room	bool 1/0	Skipping step a room selection and open any first room
room_uuid	string	The room with the selected uuid will be opened
deactivate_custom_photo	bool 1/0	For deactivating uploading photo.
enable_two_way_favorites	bool 1/0	For enabling two-way synchronization of Favorites (https://wizart.atlassian.net/wiki/spaces/WDP/pages/2682913853/Cart+integration+and+favorites+integration#Two-way-Favorites-synchronization )

Shopping cart.
Anchor
shopping-cart-floating-second
shopping-cart-floating-second

When the visualizer is open, methods are added to the window.wizartDK to synchronize the shopping cart.

Setting the current state of items in the shopping cart – setShoppingCartStore. To transfer the current state of the shopping cart to the visualizer, call the method
Code Block
const payload = [{vendor_code: 'vendor_code1', quantity: 1 }]; window.wizartDK.setShoppingCartStore(payload);
The method is available after opening the visualizer.
Getting the current state of items in the shopping cart – getShoppingCartStore. To get the items in the shopping cart, call the getShoppingCartStore method with a callback function. The callback function will receive the items in the shopping cart. The method is available after opening the visualizer.
Code Block
const callback = () => { console.log(payload); // [{vendor_code: 'vendor_code1', quantity: 1}, ...] } window.wizartDK.getShoppingCartStore(callback);
Removing an item from the shopping cart – onRemoveShoppingCartItem. To get the goods when they are removed, you must call the onRemoveShoppingCartItem method with a callback function. The method is available after opening the visualizer.
Code Block
const callback = () => { console.log(payload); // { vendor_code: 'vendor_code', removeAll: true } } window.wizartDK.onRemoveShoppingCartItem(callback);
Adding an item to the shopping cart – onAddShoppigCartItem. To add a product, you need to call the onAddShoppigCartItem function with a parameter { vendor_code: 'vendor_code' } . The method is available after opening the visualizer.
Code Block
window.wizartDK.onAddShoppigCartItem({ vendor_code: 'vendor_code' });

compact mode*:

Entry-point button (button, that you can put whatever you want, good for the product page or category page)

...

Expand

title	First integration option (RECOMMENDED)

Info
Shopping cart integration.

First integration option:

Code Block

language	js

<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"></script>

<script>
  const entryPoint = new window.WEntryPoint({
    token: "your token for wizart",
    element: "link to the element to insert the entry point button", // example document.getElementById("0000")
    vendorCode: "vendor code for first apply",
    articleQuery: Json.stringify({
       vendor_code: 'vendor code for first apply',
       collection_name: '',
     }),
  });
  entryPoint.render();
</script>

Please, note, that articleQuery isn’t required. This parameter need only, if you want init collection and sku in PIM, because, if you have multi-collection (one product in several collections) and you want init that product in that collection, please, use articleQuery, but if you don’t need this, remove it.

Parameter	Description	Type
token	api token - generated and issued by Wizart Administrator.	Required
vendorCode	Unique SKU ID of the product uploaded to Wizart system.	Required
articleQuery	If you want init collection and sku in PIM, e.x: that product in that collection.	Optional
element	link to the element to insert the entry point button (e.g document.getElementsByTagName("")[0])	Optional

When you are rendering button, you can write next parameters to style your button:

Info
If you want re-styled button, it will look like: `entryPoint.render({title: "Your title", color: "#000"});`

Info
The set method can be used to set “vendorCode,” or “element”.

Code Block

language	js

floatingButton.set({ vendorCode: '' });
floatingButton.set({ element: document.getElementById("0000")});

Code Block

  fontSize,
  title,
  tooltipTitle,
  tooltipPosition,
  tooltipDisable,
  glitterDisable,
  className,
  borderRadius,
  parameters,
  background,
  color,
  width,
  height,
  border,
  image,
  onloadCallback,
  onCloseCallback,
  onButtonClick,
  elementSelector,
  insertElementPosition,
  iframeElementSelector,
  insertIframeElementPosition,
  onAddShoppigCartItem,
  onRemoveShoppingCartItem,

Name of parameter

Description and Examples of using

fontSize

Font size of your button.
entryPoint.render({fontSize: "24px"});

title

Text to be displayed on the button (the default value is "Try it in your room in one click!").
entryPoint.render({title: "Your title"});

tooltipTitle

Text to be displayed on the tooltip (the default value is "See it in your room!").
entryPoint.render({tooltipTitle: "Your tooltip title"});

tooltipPosition

Tooltip position towards the button. Available values are top, right, bottom, left (the default value is top).
entryPoint.render({tooltipPosition: "bottom"});

tooltipDisable

If the value is “true”, the tooltip will not be displayed. Default: false.
entryPoint.render({tooltipDisable: "true"});

glitterDisable

If the value is “true”, glitter will not be displayed.
entryPoint.render({glitterDisable: "true"});

className

Class to be set for the button element on the page. Mostly, using to change more style, that our default parameters can’t (e.x. box-shadow).
entryPoint.render({className: "wizart-main-page"});

borderRadius

Button border-radius.
entryPoint.render({borderRadius: "15px"});

parameters

Parameter value should be a result of the function
JSON.stringify(); . Additional parameters from the table below can be added to this attribute.
entryPoint.render({parameters: "{'vendor_code':'vendor_code','collection_name':'collection_name'}"});

background

Button background.
entryPoint.render({background: "#000"});

color

Button text color.
entryPoint.render({color: "#FFF"});

width

Max button width.
entryPoint.render({width: "100%"});

height

Button height.
entryPoint.render({height: "60px"});

border

Style of button. For example: 2px solid;
entryPoint.render({border: "2px solid"});

image

Link to the icon that will be displayed on the button.
entryPoint.render({image: "https://d365wxw7pkwfoh.cloudfront.net/Wizart_Logo_e23fb5c030.svg"});

onloadCallback

The name of the function to be in the global scope. The function will be called when the visualizer is loaded.
Example:

Code Block

language	js

function wizartOnLoad() {
   console.log('Visualizer is loaded!');
}
entryPoint.render({onloadCallback: "wizartOnLoad"});

floatingButton.render({onloadCallback: "nameOfFunction"});

onCloseCallback

The name of the function to be in the global scope. The function will be called after the visualizer is closed.
Example:

Code Block

language	js

function wizartOnClosed() {
   console.log('Visualizer is closed!');
}
entryPoint.render({onloadCallback: "wizartOnClosed"});

floatingButton.render({onCloseCallback: "nameOfFunction"});

onButtonClick

The name of the function to be in the global scope. The function will be called when the button is cliecked.
Example:

Code Block

language	js

function wizartButtonClicked() {
   console.log('Button is clicked!');
}
entryPoint.render({onloadCallback: "wizartButtonClicked"});

floatingButton.render({onButtonClick: "nameOfFunction"});

elementSelector

A CSS selector to select an element on the page to insert a button where you want.
Example (you want locate it under cart button):

Code Block
<div id="shopping-cart">Add to cart</div> entryPoint.render({elementSelector: "#shopping-cart", insertElementPosition: "after"});

entryPoint.render({elementSelector: "SELECTOR"});

insertElementPosition

A CSS selector to select an element on the page to insert a button where you want.
Example (you want locate it under cart button):

Code Block
<div id="shopping-cart">Add to cart</div> entryPoint.render({elementSelector: "#shopping-cart", insertElementPosition: "after"});

entryPoint.render({insertElementPosition: "nameOfElementPosition"});

iframeElementSelector

A CSS selector to select an element on the page to insert the fitting room where you want. The best way to put iframe is “before body“.
Example:

Code Block
<body></body> entryPoint.render({iframeElementSelector: "body"});

entryPoint.render({iframeElementSelector: "nameOfSelector"});

insertIframeElementPosition

The insertion position of the element. Values: append, before, after. default value: append. The best way to put iframe is “before body“.

Code Block
<body></body> entryPoint.render({insertIframeElementPosition: "before"});

entryPoint.render({insertIframeElementPosition: "nameOfElementPosition"});

onAddShoppigCartItem

The function is called on the event of adding an product to the cart.

Code Block

language	js

function wizartAddItemToCart() {
   console.log('Product is added!');
}
entryPoint.render({onAddShoppigCartItem: "wizartAddItemToCart"});

entryPoint.render({onAddShoppigCartItem: "nameOfFunction"});
Please, before adding this parameter, do cart integration.

onRemoveShoppingCartItem

The function is called on the event of deleting an product to the cart.

Code Block

language	js

function wizartRemoveItemToCart() {
   console.log('Product is removed!');
}
entryPoint.render({onRemoveShoppingCartItem: "wizartRemoveItemToCart"});

entryPoint.render({onRemoveShoppingCartItem: "nameOfFunction"});
Please, before adding this parameter, do cart integration.

Shopping cart.
Anchor
shopping-cart-entry-first
shopping-cart-entry-first

Code Block

language	js

const onAddShoppigCartItem = (payload) => {
  console.log(payload);
  // { item: { vendor_code: 'vendor_code' }};
}

//The set method can be used to set vendorCode or articleQuery.

entryPoint.set({ vendorCode: '' });
entryPoint.set({ articleQuery: Json.stringify({ vendor_code: '' })});
 
//The setShoppingCartStore method allows you to set the current state of the shopping cart.

entryPoint.setShoppingCartStore(payload);
// payload format [{vendor_code: 'vendor_code', quantity: 1 }, ...]

Code Block

language	js

const onRemoveShoppingCartItem = () => {
  console.log(payload);
  // { item: { vendor_code: 'vendor_code', removeAll: true }};
}

Parameters	Type	Description
context	user_id	string	User identifier or Device identifierarray	Need to indicate from which part of string in CSV file need to be get. More information you can find here.
locale	array	Need to indicate in which language product’s should be displayed. More information you can find here.
main_page_link	string	Link added to your clickable logo.
open_first_room	bool 1/0	Skipping step a room selection and open any first room
room_uuid	string	The room with the selected uuid will be opened
deactivate_custom_photo	bool 1/0	For deactivating uploading photo.
enable_two_way_favorites	bool 1/0	For enabling two-way synchronization of Favorites (https://wizart.atlassian.net/wiki/spaces/WDP/pages/2682913853/Cart+integration+and+favorites+integration#Two-way-Favorites-synchronization )

Expand

title	Second integration option

Info
Shopping cart integration.

Second integration option:

Code Block

language	js

<script
  class="wizart__entry-point"
  data-token="token"
  data-title=""
  data-vendor_code=""
  data-article_query=""
  data-parameters=""
  data-image=""
  data-color=""
  data-background=""
  data-tooltip-title=""
  data-tooltip-position=""
  data-tooltip-disable=""
  data-glitter-disable=""
  data-width=""
  data-height=""
  data-border=""
  data-border_radius=""
  data-class_name=""
  data-onload-callback=""
  data-on-close-callback=""
  data-on-button-click=""
  data-element-selector=""
  data-insert-element-position=""
  data-iframe-element-selector=""
  data-insert-iframe-element-position=""
  src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"
></script>

Name of parameter

Description and Examples of using

class

Required parameter.
Cannot be changed.

src

Link to js-file with integration code.

data-token

api token - generated and issued by Wizart Administrator.

data-title

Text to be displayed on the button (the default value is "Try it in your room in one click!").
data-title="Visualizer"

data-vendor_code

Unique SKU ID of the product uploaded to Wizart system.
data-vendor_code="vendor_code"

data-article_query

Required in the case if parameter data-vendor_code is not enough for product search in the Wizart system. Parameter value should be a result of the functionJSON.stringify();.

Info
Please, note, that `articleQuery` isn’t required. This parameter need only, if you want init collection and sku in PIM, because, if you have multi-collection (one product in several collections) and you want init that product in that collection.

data-article_query="{'vendor_code':'vendor_code','collection_name':'collection_name'}"

data-background

Button background.
data-background="#000"

data-color

Button text color.
data-color="#FFF"

data-tooltip-disable

If the value is “true”, the tooltip will not be displayed.
data-tooltip-disable="true"

data-tooltip-title

Text to be displayed on the tooltip (the default value is "See it in your room!").
data-tooltip-title="Visualizer!"

data-tooltip-position

Tooltip position towards the button. Available values are top, right, bottom, left (the default value is top).
data-tooltip-position="top"

data-glitter-disable

If the value is “true”, glitter will not be displayed.
data-glitter-disable="true"

data-width

Max button width.
data-width="100%"

data-height

Button height.
data-height="60px"

data-border

Style of button. For example: 2px solid;
data-border="2px solid"

data-border_radius

Button border-radius.
data-border_radius="15px"

data-image

Link to the icon that will be displayed on the button.
data-image="https://d365wxw7pkwfoh.cloudfront.net/Wizart_Logo_e23fb5c030.svg"

data-class_name

Class to be set for the button element on the page. Mostly, using to change more style, that our default parameters can’t (e.x. box-shadow).
data-class_name="wizart-main-page"

data-parameters

Parameter value should be a result of the function JSON.stringify(); .
Additional parameters from the table below can be added to this attribute.
data-parameters="{'context':'en','locale':'en'}"
This method include context or locale.

data-onload-callback

The name of the function to be in the global scope. The function will be called when the visualizer is loaded.
Example:

Code Block

language	js

function wizartOnLoad() {
   console.log('Visualizer is loaded!');
}
<script
 class="wizart__entry-point"
 data-token="token"
 data-onload-callback="wizartOnLoad"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-onload-callback="nameOfFunction"

data-on-close-callback

The name of the function to be in the global scope. The function will be called after the visualizer is closed.

Code Block

language	js

function wizartOnClosed() {
   console.log('Visualizer is closed!');
}
<script
 class="wizart__entry-point"
 data-token="token"
 data-onload-callback="wizartOnClosed"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-on-close-callback="nameOfFunction"

data-element-selector

A CSS selector to select an element on the page to insert a button where you want.
Example (you want locate it under cart button):

Code Block

language	js

<div id="shopping-cart">Add to cart</div>
<script
 class="wizart__entry-point"
 data-token="token"
 data-element-selector="#shopping-cart"
 data-insert-element-position="after"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-element-selector="SELECTOR"

data-insert-element-position

A CSS selector to select an element on the page to insert a button where you want.
Example (you want locate it under cart button):

Code Block

language	js

<div id="shopping-cart">Add to cart</div>
<script
 class="wizart__entry-point"
 data-token="token"
 data-element-selector="#shopping-cart"
 data-insert-element-position="after"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-insert-element-position="nameOfElementPosition"

data-iframe-element-selector

A CSS selector to select an element on the page to insert the fitting room where you want. The best way to put iframe is “before body“.
Example:

Code Block

language	js

<body></body>
<script
 class="wizart__entry-point"
 data-token="token"
 data-iframe-element-selector="body"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-iframe-element-selector="nameOfSelector"

data-insert-iframe-element-position

The insertion position of the element. Values: append, before, after. default value: append. The best way to put iframe is “before body“.
Example:

Code Block

language	js

<body></body>
<script
 class="wizart__entry-point"
 data-token="token"
 data-iframe-element-selector="body"
 data-insert-iframe-element-position="before"
 src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js">
</script>

data-insert-iframe-element-position="nameOfElementPosition"

Parameters	Type	Description
context	array	Need to indicate from which part of string in CSV file need to be get. More information you can find here.
locale	array	Need to indicate in which language product’s should be displayed. More information you can find here.
user_id	string	User identifier or Device identifier
main_page_link	string	Link added to your clickable logo.
open_first_room	bool 1/0	Skipping step a room selection and open any first room
room_uuid	string	The room with the selected uuid will be opened
deactivate_custom_photo	bool 1/0	For deactivating uploading photo.

Shopping cart.
Anchor
shopping-cart-entry-second
shopping-cart-entry-second

When the visualizer is open, methods are added to the window.wizartDK to synchronize the shopping cart.

Setting the current state of items in the shopping cart – setShoppingCartStore. To transfer the current state of the shopping cart to the visualizer, call the method
Code Block
const payload = [{vendor_code: 'vendor_code1', quantity: 1 }]; window.wizartDK.setShoppingCartStore(payload);
The method is available after opening the visualizer.
Getting the current state of items in the shopping cart – getShoppingCartStore. To get the items in the shopping cart, call the getShoppingCartStore method with a callback function. The callback function will receive the items in the shopping cart. The method is available after opening the visualizer.
Code Block
const callback = () => { console.log(payload); // [{vendor_code: 'vendor_code1', quantity: 1}, ...] } window.wizartDK.getShoppingCartStore(callback);
Removing an items from the shopping cart – onRemoveShoppingCartItem. To get the goods when they are removed, you must call the onRemoveShoppingCartItem method with a callback function. The method is available after opening the visualizer.
Code Block
const callback = () => { console.log(payload); // { vendor_code: 'vendor_code', removeAll: true } } window.wizartDK.onRemoveShoppingCartItem(callback);
Adding an item to the shopping cart – onAddShoppigCartItem. To add a product, you need to call the onAddShoppigCartItem function with a parameter { vendor_code: 'vendor_code' } . The method is available after opening the visualizer.
Code Block
window.wizartDK.onAddShoppigCartItem({ vendor_code: 'vendor_code' });

...

Versions Compared

Old Version 9

New Version Current

Key

First integration option:

Shopping cart.
Anchor
shopping-cart-floating-first
shopping-cart-floating-first

Second integration option:

Shopping cart.
Anchor
shopping-cart-floating-second
shopping-cart-floating-second

Entry-point button (button, that you can put whatever you want, good for the product page or category page)

First integration option:

Shopping cart.
Anchor
shopping-cart-entry-first
shopping-cart-entry-first

Second integration option:

Shopping cart.
Anchor
shopping-cart-entry-second
shopping-cart-entry-second

Page Comparison

Versions Compared

Old Version 9

New Version Current

Key

First integration option:

Shopping cart. Anchorshopping-cart-floating-firstshopping-cart-floating-first

Second integration option:

Shopping cart. Anchorshopping-cart-floating-secondshopping-cart-floating-second

Entry-point button (button, that you can put whatever you want, good for the product page or category page)

First integration option:

Shopping cart. Anchorshopping-cart-entry-firstshopping-cart-entry-first

Second integration option:

Shopping cart. Anchorshopping-cart-entry-secondshopping-cart-entry-second

Shopping cart.
Anchor
shopping-cart-floating-first
shopping-cart-floating-first

Shopping cart.
Anchor
shopping-cart-floating-second
shopping-cart-floating-second

Shopping cart.
Anchor
shopping-cart-entry-first
shopping-cart-entry-first

Shopping cart.
Anchor
shopping-cart-entry-second
shopping-cart-entry-second