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

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'}"}); Be careful, this method doesn’t include context or locale! Using for this next method!

background

Button background.
floatingButton.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:

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:

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:

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:

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

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

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.

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

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

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 )

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();.

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:

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.

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

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

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

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

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