Wizart Deployment Kit — Integration Settings Guide

1. Full-page Visualizer (Full-screen iframe)

This configuration loads the visualizer as a full-page iframe immediately after the page loads. It is typically used when the visualizer is opened via a dedicated link or a separate page.

Steps:

Add the Deployment Kit script to your page:

<script src="https://d18jpdcj6p6zg6.cloudfront.net/wizart-deployment-kit-v1.0.x.min.js"></script>

Initialize the visualizer after the page has loaded:

document.addEventListener("DOMContentLoaded", async () => { 
    try { 
        const targetElementVisualizer = document.body.firstChild; 
 
        const visualizer = new WizartDeploymentKit.Visualizer({ 
            token: '', 
            layoutSettings: { 
                targetElement: targetElementVisualizer, 
                layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN, 
                position: WizartDeploymentKit.POSITIONS.BEFORE 
            }, 
        }); 
 
        visualizer.show(); 
    } catch (error) { 
        console.error("Failed to load visualizer:"); 
    } 
});

In this configuration the iframe expands to the entire page immediately.

2. Custom Visualizer Placement (Container Layout)

If you want to place the visualizer inside a specific container instead of full-screen, the layout configuration needs to be modified.

Steps:

Locate the layout configuration in the visualizer initialization:

layoutSettings: { 
    targetElement: targetElementVisualizer, 
    layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN, 
    position: WizartDeploymentKit.POSITIONS.BEFORE 
}

Change the layout and position parameters according to your required placement.
Place the visualizer inside the desired HTML container.
Documentation for available options:
1. Layouts:
  https://docs-deployment-kit.wizart.ai/WizartDeploymentKit.html#.LAYOUTS
2. Positions:
  https://docs-deployment-kit.wizart.ai/WizartDeploymentKit.html#.POSITIONS

3. Visualizer with a Pre-selected Product

This configuration automatically opens the visualizer with a specific product already applied.

Steps:

Add sceneData to the visualizer configuration.
Specify the product using openWithProduct.

visualizer = new WizartDeploymentKit.Visualizer({ 
    token: ''”, 
    sceneData: { 
        openWithProduct: "{{vendor_code}}" 
    }, 
    layoutSettings: { 
        targetElement: targetElementVisualizer, 
        layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN, 
        position: WizartDeploymentKit.POSITIONS.BEFORE 
    } 
});

Replace {{vendor_code}} with the product vendor code.
The visualizer will open with this product automatically applied.

4. Dynamically Updating the Scene

If you need dynamically set SceneData, use updateSceneData.

Steps:

Use the updateSceneData() method of the visualizer.
Update the product or other scene parameters dynamically.

Example:

visualizer.updateSceneData({ 
    openWithProduct: "NEW_VENDOR_CODE" 
});

This allows the visualizer to refresh its state.

Documentation: https://docs-deployment-kit.wizart.ai/WizartDeploymentKit.Visualizer.html#updateSceneData

5. Visualizer with a Collection

This configuration opens the visualizer with a collection of products.

The first product from the collection will be automatically applied.

Steps:

Specify openWithCollection inside sceneData.

visualizer = new WizartDeploymentKit.Visualizer({ 
    token: '''', 
    sceneData: { 
        openWithCollection: "{{collection_name}}" 
    }, 
    layoutSettings: { 
        targetElement: targetElementVisualizer, 
        layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN, 
        position: WizartDeploymentKit.POSITIONS.BEFORE 
    } 
});

Replace {{collection_name}} with the collection identifier.
When the visualizer opens, the first product from the collection will be applied automatically.

6. Visualizer with Product and pre-selected scene

This configuration opens the visualizer with both a specific room scene and a product.

Steps:

Use both openInRoom and openWithProduct parameters.

visualizer = new WizartDeploymentKit.Visualizer({ 
    token: '''', 
    sceneData: { 
        openInRoom: "{{room_uuid}}", 
        openWithProduct: "{{vendor_code}}" 
    }, 
    layoutSettings: { 
        targetElement: targetElementVisualizer, 
        layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN, 
        position: WizartDeploymentKit.POSITIONS.BEFORE 
    } 
});

Replace:

{{room_uuid}} with the scene UUID
{{vendor_code}} with the product code

7. Shopping Cart Integration

The visualizer can be integrated with the website shopping cart in two ways:

One-way synchronization
Two-way synchronization

Documentation: Shopping cart integration

7.1 One-way Cart Integration

The website listens to visualizer events and updates the cart.

Steps

Subscribe to the Add to Cart event.

WizartDeploymentKit.EventBus.subscribe( 
    (event) => { 
        // Add item to your website cart 
    }, 
    WizartDeploymentKit.VISUALIZER_EVENTS.ADD_TO_CART, 
    visualizer 
);

Subscribe to the Remove from Cart event.

WizartDeploymentKit.EventBus.subscribe( 
    (event) => { 
        // Remove item from your website cart 
    }, 
    WizartDeploymentKit.VISUALIZER_EVENTS.REMOVE_FROM_CART, 
    visualizer 
);

The main task is to listen to these events and update your website cart accordingly.

7.2 Two-way Cart Integration

In this case both the website cart and the visualizer cart stay synchronized.

Steps

Initialize the website cart state.

const yourShoppingCartState = [ 
    { vendor_code: 'Wallpaper_01', quantity: 1 } 
];

Pass the initial cart state to the visualizer.

visualizer.setShoppingCartState(yourShoppingCartState);

Subscribe to cart events and update the state.

Events include:

ADD_TO_CART
REMOVE_FROM_CART
CART_PRODUCT_COUNT_INCREASE
CART_PRODUCT_CART_DECREASE

Example:

WizartDeploymentKit.EventBus.subscribe( 
    (event) => { 
        /* Modify your cart state */ 
        visualizer.setShoppingCartState(yourShoppingCartState); 
    }, 
    WizartDeploymentKit.VISUALIZER_EVENTS.ADD_TO_CART, 
    visualizer 
);

Button Integration Options

The visualizer can be opened either by using the built-in Wizart button or a custom website button.

Built-in Wizart Button

The Deployment Kit can automatically generate a button.

Steps

Create the visualizer.
Create the button using createButton().

const openVisualizerButton = WizartDeploymentKit.createButton({ 
    targetElement: targetElementVisualizer, 
    text: "See product in your room" 
});

Attach the visualizer opening event.

openVisualizerButton.onClick(() => visualizer.show());

Button configuration options: https://docs-deployment-kit.wizart.ai/global.html#ButtonOptions

Additional UI customization can be done using CSS.

Custom Button

If the client wants to use their own button.

Steps

Create a button in the HTML.
Add a click handler.

const button = document.getElementById('visualizer'); 
 
button.onclick = async () => { 
    try { 
        visualizer.show(); 
    } catch (error) { 
        console.error('Visualizer failed to load:', error); 
    } 
};

When the user clicks the button, the visualizer will open. This can be attached to the banners or menu links.

9. Integration Settings Usage

uploadPhoto - Enables or disables the custom photo upload feature.
showCatalog - Shows or hides the product catalog section within the Visualizer interface.
showBackToWebsiteButton - Enables or disables the display of the "Back to Website" button.
twoWaySyncFavorites - Enables two-way synchronization for favorites. If true, favorite list management is fully delegated to your side.
userId - A unique identifier for the user interacting with the Visualizer. Used for tracking user sessions and analytics.
locale - Sets the localization language for the Visualizer interface (e.g., "en" for English, "fr" for French).
context - Provides contextual information for displaying different data in the catalog (e.g., prices or currencies based on location).

Example:

document.addEventListener("DOMContentLoaded", async () => { 
    try { 
        const targetElementVisualizer = document.body.firstChild; 
        const visualizer = new WizartDeploymentKit.Visualizer({ 
            token: '', 
            integrationSettings: {
                locale: "fr",
                context: "fr"
            },
            layoutSettings: { 
                targetElement: targetElementVisualizer, 
                layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN, 
                position: WizartDeploymentKit.POSITIONS.BEFORE 
            }, 
        }); 
        visualizer.show(); 
    } catch (error) { 
        console.error("Failed to load visualizer:"); 
    } 
});