-First integration option:

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. The minimum amount of integration code is:

<script class="wizart__entry-point" data-token="token" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"></script>

Entry point button maintains the following parameters:

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

Parameter	Description	Type

Parameter	Description	Type
class	Required parameter. `Cannot be changed`.	Required
src	Link to js-file with integration code.	Required
data-token	api token - generated and issued by Wizart Administrator.	Required
data-title	Text to be displayed on the button (the default value is "Try it in your room in one click!").	Optional
data-vendor_code	Unique SKU ID of the product uploaded to Wizart system.	Optional
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 function`JSON.stringify();`.	Optional
data-color	Button text color.	Optional
data-background	Button background.	Optional
data-tooltip-disable	If the value is “true”, the tooltip will not be displayed.	Optional
data-tooltip-title	Text to be displayed on the tooltip (the default value is "See it in your room!").	Optional
data-tooltip-position	Tooltip position towards the button. Available values are top, right, bottom, left (the default value is top)	Optional
data-glitter-disable	If the value is true, glitter will not be displayed	Optional
data-width	Button width	Optional
data-height	Button height	Optional
data-border	Button border	Optional
data-border_radius	Button border-radius	Optional
data-image	Link to the icon that will be displayed on the button	Optional
data-class_name	Class to be set for the button element on the page	Optional
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.	Optional
data-onload-callback	The name of the function to be in the global scope. The function will be called when the visualizer is loaded.	Optional
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.	Optional
data-element-selector	A CSS selector to select an element on the page to insert a button where you want.	Optional
data-insert-element-position	The insertion position of the element. Values: append, before, after. default value: append.	Optional
data-iframe-element-selector	A CSS selector to select an element on the page to insert the fitting room where you want.	Optional
data-insert-iframe-element-position	The insertion position of the element. Values: append, before, after. default value: append.	Optional

Additional parameters for “data-parameters” attribute

Parameters	Type	Description

Parameters	Type	Description
user_id	string	User identifier or Device identifier
context	array
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.

Two-way shopping cart 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.
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.
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.

Second integration option:

To get this button successfully integrated, you need to include the following library in the header of your website:

To initialize the button, you need to call this code with a token, element and vendor code or article query:

Parameter	Description	Type

Parameter	Description	Type
token	api token - generated and issued by Wizart Administrator.	Required
element	link to the element to insert the entry point button (e.g document.getElementsByTagName("")[0])	Optional
vendorCode	Unique SKU ID of the product uploaded to Wizart system.	Optional
articleQuery	vendor_code (unique SKU ID of the product uploaded to Wizart system) collection_name (name of collection)	Optional

The following parameters can be passed to the render method: