...
Description
Wizart Web Visualizer is a virtual fitting room executed as a standalone web application to be integrated into the client’s website. Its purpose is to allow the user to apply samples of finishing materials on photos of interiors that have previously been marked, as well as users’ personal interior photos. It displays information either from the PIM system (see below) or from the client’s database.
Example of the application without integration: https://demo.wizart.techai/visualizer
E-commerce example with integration: https://store.wizart.tech(to be added)
The PIM (Product Information Management) system
This system is a server application that stores, in a structured form, detailed information about products and their textures, necessary for application in Wizart visualization products.
The PIM Admin Tool (https://pim-admin.wizart.techai/login)
A web administration system that allows the client to quickly manage the data available in the PIM system and the data displayed in Wizart visualization products. Using this tool, the client can upload the necessary textures into the PIM system and use them in Wizart visualization products. For every client, a separate Admin Tool is used.
Wizart Web Visualizer is a virtual fitting room executed as a standalone web application to be integrated
Wizart Web Integration
Operational procedure
Get access to the PIM Admin Tool (to be generated and issued by a Wizart administrator) and an API Token
Import the necessary data into the PIM via the PIM Admin Tool (File upload requirementsUpload Requirements, PIM User manual for PIM adminManual )
Integrate the Wizart Web application into the client’s website
Integration testing
Release
Requirements to specialists
Basic knowledge of web layout and development:
HTML
JavaScript
CSS
System requirements
No specific requirements. The application may be integrated into any modern website.
Examples of possible integration areas
The Wizart Web Visualizer opening styles and elements can be completely customized per the client’s wishes.
Below are some examples of possible element layouts.
...
Product list page:
...
Product page:
...
Integrating the Wizart Web Visualizer application into a client’s website
You will need an API Token (to be generated and issued by a Wizart administrator) - api_token
In the source file of the target page, add the required code in the <body> tag, as shown in the listing below.
| Info |
|---|
Since the Wizart Web Visualizer allows to open and visualize a specific product (SKU), please pay attention to how this is implemented separately. |
| Note |
|---|
To avoid issues with the Wizart Web Visualizer appearing the CSS z-index property for |
| Code Block | ||
|---|---|---|
| ||
<body>
...
<button id="wizart-fitting-room-button" onClick="openFittingRoom()">
Fitting room
</button>
<iframe
id="wizart-fitting-room-object"
role="dialog"
aria-label="Wizart Fitting Room."
type="text/html"
allowfullscreen
>
</iframe>
<style>
#wizart-fitting-room-object {
z-index: 2147483647 !important;
display: none;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
border: none;
}
#wizart-fitting-room-object.active {
display: block;
}
</style>
<script src="./wizart-integration.js"></script>
</body> |
2. Using the listing below, create a js-file named wizart-integration.js: upload it to the existing source files of the client’s web application.
| Code Block | ||
|---|---|---|
| ||
// todo get api token from Wizart.
const api_token = 'CLIENT_SPECIFIC_API_TOKEN';
const server_address = 'https://pim-client.wizart.tech';
// bba (back button action) param is used to add back button to wizart component
const fittingRoomEndpoint = server_address
+ '/fitting-room'
+ '?api_token=' + api_token
+ '&bba=true'
;
function openFittingRoom (searchQuery) {
const componentEndpoint = searchQuery ? fittingRoomEndpoint + searchQuery : fittingRoomEndpoint;
let fittingRoomObject = document.getElementById('wizart-fitting-room-object');
const fittingRoomObjectContainer = fittingRoomObject.parentElement;
fittingRoomObject.setAttribute('src', componentEndpoint);
// object clonning is necessary as some browsers does not render "object" twice after changing data attribute
const clonnedFittingRoomObject = fittingRoomObject.cloneNode(true);
fittingRoomObjectContainer.appendChild(clonnedFittingRoomObject);
fittingRoomObject.remove();
clonnedFittingRoomObject.classList.add('active');
// should be added to avoid duplicating scrollbars
document.getElementsByTagName('html')[0].style.overflow = 'hidden';
}
// bba event - fired when back button is clicked at wizart component
window.addEventListener('message', function (event) {
if (~event.origin.indexOf(server_address)) {
// exactly 'close_overlay' as it's sent from wizart component
if (event.data === 'close_overlay') {
// return overflow of target page to initial state
document.getElementsByTagName('html')[0].style.overflow = 'auto';
document.getElementById('wizart-fitting-room-object').classList.remove('active');
}
if (event.data && event.data.eventName === 'wizart_shopping_cart') {
// here you can process the data that comes from the shopping cart after clicking go_to_shop
}
}
}); |
3. Shopping cart.
An example of shopping cart integration is shown in the listing above. See line 42.
Event.data format:
| Code Block |
|---|
{
eventName: 'wizart_shopping_cart',
payload: [
{
vendor_code: string,
quantity: number,
},
],
} |
4. Optional parameters:
logo_path – link to your logo. Preferably in svg format. The logo should occupy the entire height of the image without indentation above and below.
Format:logo_path=LINK_TO_YOUR_LOGOmenu_items – additional fields in the menu.
Format:menu_items=JSON.stringify([{ title: string }])do_not_show_info_about_app – do not show the menu item “About the application“.
Format:do_not_show_info_about_app=1original_url – link to the page. Links for redirecting from posts in social networks.
Format:original_url=link_to_your_web_sitetwitter_mention – mention your twitter account.
Format:twitter_mention=@your_twitter_mentionfacebook_app_id – Account ID that is mentioned in the facebook post when sharing. The default account is Wizart. You need to register your app on https://developers.facebook.com/ and copy its ID (make sure that you clicked LIVE button to activate your app on Facebook).
back_button_background - the background of the Back button.
Format:back_button_background=#ffffffback_button_icon_color - the icon color inside the Back button.
Format:back_button_icon_color=#ffffffenabled_shopping_cart – If the value is 1, the shopping cart functionality will be activated. The default value is 0.
Format:enabled_shopping_cart=1is_shown_shopping_cart_prices – If the value is 1, the prices in the shopping cart and catalog will be displayed. The default value is 0.
Format:is_shown_shopping_cart_prices=1shopping_cart_button_name – Text for the shopping cart redirect button. The default is “Go to shop“.
Format:shopping_cart_button_name=your_text_for_shopping_cart_buttonshopping_cart_link - Link to your shopping cart without parameters. For example:
http://www.appdomain.com/any_nesting/add_products.
Format:shopping_cart_link=link_to_your_shoping_cartuser_id – User identifier or Device identifier. Type string. Format:
user_id=string.
Integration example:
| Code Block |
|---|
const fittingRoomEndpoint = server_address
+ '/fitting-room'
+ '?api_token=' + api_token
+ '&bba=true'
+ '&logo_path=LINK_TO_YOUR_LOGO'
+ '&menu_items=' + JSON.stringify([])
+ '&do_not_show_info_about_app=0'
+ '&twitter_mention=@your_twitter_mention'
+ '&original_url=LINK_TO_YOUR_WEB_SITE'
+ '&facebook_app_id=facebook_app_id'
+ '&back_button_background=#ffffff'
+ '&back_button_icon_color=#ffffff'
+ '&shopping_cart_link=link_to_your_shoping_cart'
+ '&user_id=string
; |
5. Save and move all the changes into the work environment of the client’s website.
6. Check and verify that the integration is operational.
The integration is now considered complete.
In case you have any additional questions or issues, please contact Wizart technical support: developer@wizart.tech
Simple integration: Video tutorial
...