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:
Floating button (fixed button on screen, good for main page of your website)
First integration option (RECOMMENDED)
First integration option:
<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:
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 |
|---|
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:
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.
|
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 }, ...]
const onRemoveShoppingCartItem = () => {
console.log(payload);
// { item: { vendor_code: 'vendor_code', removeAll: true }};
}
Parameters
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*:
Second integration option
Second integration option:
<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();. 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"
|
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 method
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.
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.
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.
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)
First integration option (RECOMMENDED)
First integration option:
<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:
floatingButton.set({ vendorCode: '' });
floatingButton.set({ element: document.getElementById("0000")});
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:
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:
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:
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):
<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):
<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:
<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“.
<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.
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.
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.
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 }, ...]
const onRemoveShoppingCartItem = () => {
console.log(payload);
// { item: { vendor_code: 'vendor_code', removeAll: true }};
}
Second integration option
Second integration option:
<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();. 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:
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.
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):
<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):
<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:
<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:
<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.
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
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.
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.
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.
window.wizartDK.onAddShoppigCartItem({ vendor_code: 'vendor_code' });
