First integration option:| 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: floatingButton.render({title: "Your title", color: "#000"}); |
| 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 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'}"}); Be careful, this method doesn’t include context or locale! Using for this next method! | 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.
|
| Anchor |
|---|
| shopping-cart-floating-first |
|---|
| shopping-cart-floating-first |
|---|
|
| 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 }};
} |
|
