-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 |
---|---|---|
class | Required parameter. | 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 | 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 | 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 |
---|---|---|
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 methodconst 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 thegetShoppingCartStore
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 theonRemoveShoppingCartItem
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 theonAddShoppigCartItem
function with a parameter{ vendor_code: 'vendor_code' }
. The method is available after opening the visualizer.window.wizartDK.onAddShoppigCartItem({ vendor_code: 'vendor_code' });
Second integration option:
To get this button successfully integrated, you need to include the following library in the header of your website:
<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"></script>
To initialize the button, you need to call this code with a token, element and vendor code or article query:
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 | 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) | Optional |
Element articleQuery
takes precedence over element vendorCode
.
To display the button, you need to call the render method.
entryPoint.render();
The following parameters can be passed to the render method:
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
Description of this parameters you can find in the block of first integration.
Parameters should write following this structure: entryPoint.render({fontSize: '12px', title:'Custom title'});
const onAddShoppigCartItem = (payload) => { console.log(payload); // { item: { vendor_code: 'vendor_code' }}; } const onRemoveShoppingCartItem = () => { console.log(payload); // { item: { vendor_code: 'vendor_code', removeAll: true }}; }
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 }, ...]