-First integration option:

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

Code Block

language	js

<script class="wizart__entry-point" data-token="token" src="https://wizart-filesd35so7k19vd0fx.fra1.cdn.digitaloceanspaces.comcloudfront.net/production/integration/entry-point.min.js"></script>

Entry point button maintains the following parameters:

Code Block

language	html

<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://wizart-filesd35so7k19vd0fx.fra1.cdn.digitaloceanspaces.comcloudfront.net/production/integration/entry-point.min.js"
></script>

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

Anchor

	additional-parameters
	additional-parameters

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:

Anchor

	two-way-sync
	two-way-sync

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
language js
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
language js
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
language js
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.
Code Block
window.wizartDK.onAddShoppigCartItem({ vendor_code: 'vendor_code' });

Second integration option:

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

Code Block

language	js

<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"></script>

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

Code Block

language	js

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: '',
  }),
});

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

Info
Element `articleQuery` takes precedence over element `vendorCode`.

Tip
To display the button, you need to call the render method.

Code Block

language	js

entryPoint.render();

The following parameters can be passed to the render method:

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, // the function is called on the event of adding an article to the cart
  onRemoveShoppingCartItem, // the function is called on the event of deleting an article to the cart

Info
Description of this parameters you can find in the block of first integration.

Info
Parameters should write following this structure: `entryPoint.render({fontSize: '12px', title:'Custom title'});`

Code Block

language	js


const onAddShoppigCartItem = (payload) => {
  console.log(payload);
  // { item: { vendor_code: 'vendor_code' }};
}

const onRemoveShoppingCartItem = () => {
  console.log(payload);
  // { item: { vendor_code: 'vendor_code', removeAll: true }};
}

Info
The set method can be used to set vendorCode or articleQuery.

Code Block

language	js

entryPoint.set({ vendorCode: '' });
entryPoint.set({ articleQuery: Json.stringify({ vendor_code: '' })});

Info
The `setShoppingCartStore` method allows you to set the current state of the shopping cart.

Code Block

language	js

  entrypoint.setShoppingCartStore(payload);
  // payload format [{vendor_code: 'vendor_code', quantity: 1 }, ...]

Versions Compared

Old Version 21

New Version Current

Key

-First integration option:

Second integration option:

Page Comparison

Versions Compared

Old Version 21

New Version Current

Key

-First integration option:

Second integration option: