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__entryfloating-pointbutton" data-token="token" src="https://wizart-filesd35so7k19vd0fx.fra1cloudfront.digitaloceanspaces.comnet/production/integration/floating-button.min.js"></script>

Кнопка поддерживает параметры, которые описаны ниже.

...

Floating button maintains the following parameters:

Code Block

language	html

<script
  class="wizart__floating-button"
  data-title="Custom button title"
  data-token="token"
  data-vendor_code=""
  data-article_query=""
  data-parameters=""
  data-background=""
  data-tooltip_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>

Параметр

Parameter

Описание

Description

Тип

Type
class

Обязательный параметр. Изменение не возможно

Required parameter.
Cannot be changed.

обязательныйобязательный

required

src

Ссылка на js файл с кодом интерации.

Link to js-file with integration code.	required
data-token	api token -

генерируется и выдается администратором Wizart

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

Vendor code артикула загруженного в систему Wizart.

Unique SKU ID of the product uploaded to Wizart system.	optional
data-article_query

Не обходим в том случае если параметра

Required in the case if parameter data-vendor_code

не достаточно для поиска артикула в системе Wizart. Значение устанавливаемое в параметр должно быть результатом работы функции

is not enough for product search in the Wizart system. Parameter value should be a result of the functionJSON.stringify();.

опциональныйопциональный

optional

data-background

Background кнопки.

Button background	optional
data-color	Button text color	optional
data-tooltip

_опциональный

-disable

Если передано значение true, подсказка отображаться не будет.

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

Если передано значение true, блик отображаться не будет.

опциональный

If the value is true, glitter will not be displayed	optional
data-width

Ширина кнопки.

Max 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

Класс, который будет установлен элементу кнопки на странице.

опциональный

data-compact

Если передано значение true, кнопка будет отображаться в компактном виде.

опциональный

data-parameters

Значение устанавливаемое в параметр должно быть результатом работы функции JSON.stringify(); Сюда можно передать дополнительные параметры указынные в таблице ниже.

опциональный

Параметры для атрибута data-parameters

Параметр

Описание

logo_path

Ссылка на логотип. Предпочтительно в формате svg. Логотип должен занимать всю высоту картинки без отступов сверху и снизу.

menu_items

Дополнительные поля в меню в формате: [{ title: string }].

do_not_show_info_about_app

Если передано значение 1 пункт меню "О приложении" не будет показан.

original_url

Cсылка на страницу. Служит для перенаправления из постов в социальных сетях.

twitter_mention

Mention вашего twitter аккаунта в фортмате @your_twitter_mention.

	Class to be set for the button element on the page	optional
data-compact	If the value is true, button will be displayed in the compact mode	optional
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.	optional
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.	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

Parameter	Description
user_id
context
main_page_link	Link added to your clickable logo.

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
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 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.
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 integrate, you need to include the following library in the header of your website:

Code Block
<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.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

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

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

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

Code Block
floatingButton.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,
  compact,
  tutorial,
  tutorialDelay,
  onloadCallback,
  onCloseCallback,
  onButtonClick,
  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

Code Block

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
floatingButton.set({ vendorCode: '' }); floatingButton.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

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

Versions Compared

Old Version 1

New Version Current

Key

First integration option

Second integration option:

Page Comparison

Versions Compared

Old Version 1

New Version Current

Key

First integration option

Second integration option: