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:
| Table of Contents | ||||
|---|---|---|---|---|
|
Examples of buttons:
| Expand | ||
|---|---|---|
| ||
1. Floating button:    |
| Expand | ||
|---|---|---|
| ||
1. Entry-point button:    |
| Note |
|---|
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)
| Tip |
|---|
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. |
...
| title | First integration option (RECOMMENDED) |
|---|
First integration option:
| Info |
|---|
| Code Block | ||
|---|---|---|
| ||
<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: |
| Info |
|---|
The set method can be used to set “vendorCode,” or “element”. |
| Code Block | ||
|---|---|---|
| ||
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 functionJSON.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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
function wizartRemoveItemToCart() {
console.log('Product is removed!');
}
floatingButton.render({onRemoveShoppingCartItem: "wizartRemoveItemToCart"}); |
floatingButton.render({onRemoveShoppingCartItem: "nameOfFunction"});
Please, before adding this parameter, do cart integration.
...
| Code Block | ||
|---|---|---|
| ||
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
...
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*:
...
| title | Second integration option |
|---|
Second integration option:
| Info |
|---|
| Code Block | ||
|---|---|---|
| ||
<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 |
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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
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 )
...
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 methodCode 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 thegetShoppingCartStoremethod 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 theonRemoveShoppingCartItemmethod 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 theonAddShoppigCartItemfunction 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)
| Tip |
|---|
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. |
...
| title | First integration option (RECOMMENDED) |
|---|
| Info |
|---|
First integration option:
| Code Block | ||
|---|---|---|
| ||
<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: |
| Info |
|---|
The set method can be used to set “vendorCode,” or “element”. |
| Code Block | ||
|---|---|---|
| ||
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 functionJSON.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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
function wizartRemoveItemToCart() {
console.log('Product is removed!');
}
entryPoint.render({onRemoveShoppingCartItem: "wizartRemoveItemToCart"}); |
entryPoint.render({onRemoveShoppingCartItem: "nameOfFunction"});
Please, before adding this parameter, do cart integration.
...
| Code Block | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
const onRemoveShoppingCartItem = () => {
console.log(payload);
// { item: { vendor_code: 'vendor_code', removeAll: true }};
} |
...
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 )
...
| title | Second integration option |
|---|
| Info |
|---|
Second integration option:
| Code Block | ||
|---|---|---|
| ||
<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 |
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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
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 | ||
|---|---|---|
| ||
<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 | ||
|---|---|---|
| ||
<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 | ||
|---|---|---|
| ||
<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 | ||
|---|---|---|
| ||
<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.
...
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.
...
The Wizart DeploymentKit library simplifies the process of integrating the Wizart Visualizer into your website, reducing setup complexity and enabling seamless customization. For detailed API references and advanced options, check out our DeploymentKit documentation.
Step 1: Obtain Your Web Token
To begin, you need a Web Token to authenticate your Visualizer instance. Follow these steps to retrieve it:
Log in to the Wizart Admin Panel.
Navigate to the Settings section.
Locate and copy your Web Token. This token will be required for initializing the Visualizer on your website.
Step 2: Add the DeploymentKit Library to Your Website
To start, find the latest library version link DeploymentKit documentation and include it by adding the following <script> tag in your HTML file. Place it before your integration script to ensure the library is loaded.
| Code Block |
|---|
<script src="https://d18jpdcj6p6zg6.cloudfront.net/wizart-deployment-kit-v..."></script> |
Step 3: Add the Target Element to Your HTML
Ensure you have a target HTML element where the Visualizer will render. For example:
| Code Block |
|---|
<div id="visualizer-container"></div> |
Step 4: Create a Visualizer Instance
With your Web Token in hand, you can now create a simple Visualizer instance. Below is an example of how to get started:
| Code Block |
|---|
<script>
document.addEventListener('DOMContentLoaded', () => {
// Ensure the DeploymentKit is available
if (typeof WizartDeploymentKit === 'undefined') {
console.error('DeploymentKit library is not loaded!');
return;
}
// Create a Visualizer instance
const visualizer = new WizartDeploymentKit.Visualizer({
token: 'YOUR_WEB_TOKEN', // Replace with your actual Web Token
targetElement: document.getElementById('visualizer-container'),
layoutSettings: {
layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN,
},
});
// Load and display the Visualizer
visualizer.load().then(() => {
visualizer.show();
}).catch(error => {
console.error('Failed to load the Visualizer:', error);
});
});
</script> |
Example: Show/Hide the Visualizer on Button Click
You can control when the Visualizer is shown or hidden by binding it to a button click event. Let’s modify integration:
| Code Block |
|---|
<button id="show-visualizer">Show Visualizer</button>
<button id="hide-visualizer">Hide Visualizer</button>
<div id="visualizer-container"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const visualizer = new WizartDeploymentKit.Visualizer({
token: 'YOUR_WEB_TOKEN',
targetElement: document.getElementById('visualizer-container')
});
visualizer.load().then(() => {
// Add event listeners to the buttons to show and hide the Visualizer
document.getElementById('show-visualizer').addEventListener('click', () => {
visualizer.show();
console.log('Visualizer is now visible!');
});
document.getElementById('hide-visualizer').addEventListener('click', () => {
visualizer.hide();
console.log('Visualizer is hidden now!');
});
}).catch(error => {
console.error('Failed to load the Visualizer:', error);
});
});
</script> |
For detailed API references and advanced options, check out our DeploymentKit documentation.