Deployment Kit for Wizart Web

Owned by Ekaterina Slesarchik
Last updated: 19-08-2024 by Darya Isaeva
15 min read

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

Deployment Kit have 2 main buttons:

Examples of buttons:

1. Floating button:

1. Entry-point button:

Please note that integrating the shopping cart will help you better understand the purpose of the visualizer and track user actions to assess the impact of the visualizer on conversion rates. You can view the technical implementation of the shopping cart here.

Floating button (fixed button on screen, good for main page of your website)

For successful integration of this button, you need to add several lines of JS-code to the place, where you would like to display the button.

First integration option:

Shopping cart integration.

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

Parameter

Description

Type

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:

floatingButton.set({ vendorCode: '' }); floatingButton.set({ element: document.getElementById("0000")});
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

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:

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:

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:

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:

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

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

onAddShoppigCartItem

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

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.

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

Shopping cart.

Parameters

Parameters

Type

Description

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 (Cart integration and favorites integration | Two way Favorites synchronization )

compact mode*:

Second integration option:

Name of parameter

Description and Examples of using

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

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:

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.

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

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

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:

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:

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

Parameters

Type

Description

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 (Cart integration and favorites integration | Two way Favorites synchronization )

Shopping cart.

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

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

    The method is available after opening the visualizer.

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

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

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

compact mode*:

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

First integration option:

Parameter

Description

Type

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:

Name of parameter

Description and Examples of using

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:

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:

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:

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

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

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:

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

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

onAddShoppigCartItem

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

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.

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

Shopping cart.

Parameters

Type

Description

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 (Cart integration and favorites integration | Two way Favorites synchronization )