Deployment Kit (Web Integration)

The Wizart DeploymentKit library simplifies the process of integrating the Wizart Visualizer into your website, reducing setup complexity and enabling seamless customization. For detailed API references and advanced options, check out our DeploymentKit documentation.

Step 1: Obtain Your Web Token

To begin, you need a Web Token to authenticate your Visualizer instance. Follow these steps to retrieve it:

Log in to the Wizart Admin Panel.
Navigate to the Settings section.
Locate and copy your Web Token. This token will be required for initializing the Visualizer on your website.

Step 2: Add the DeploymentKit Library to Your Website

To start, include the DeploymentKit library by adding the following <script> tag in your HTML file. Place it before your integration script to ensure the library is loaded.

<script src="https://cdn.wizart.ai/deployment-kit/latest/deployment-kit.min.js"></script>

Step 3: Add the Target Element to Your HTML

Ensure you have a target HTML element where the Visualizer will render. For example:

<div id="visualizer-container"></div>

Step 4: Create a Visualizer Instance

With your Web Token in hand, you can now create a simple Visualizer instance. Below is an example of how to get started:

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Ensure the DeploymentKit is available
        if (typeof WizartDeploymentKit === 'undefined') {
            console.error('DeploymentKit library is not loaded!');
            return;
        }

        // Create a Visualizer instance
        const visualizer = WizartDeploymentKit.createVisualizer({
            token: 'YOUR_WEB_TOKEN', // Replace with your actual Web Token
            targetElement: document.getElementById('visualizer-container'),
            layoutSettings: {
                layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN,
            },
        });

        // Load and display the Visualizer
        visualizer.load().then(() => {
            visualizer.show();
        }).catch(error => {
            console.error('Failed to load the Visualizer:', error);
        });
    });
</script>

Example: Show/Hide the Visualizer on Button Click

You can control when the Visualizer is shown or hidden by binding it to a button click event. Let’s modify integration:

<button id="show-visualizer">Show Visualizer</button>
<button id="hide-visualizer">Hide Visualizer</button>
<div id="visualizer-container"></div>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const visualizer = WizartDeploymentKit.createVisualizer({
            token: 'YOUR_WEB_TOKEN',
            targetElement: document.getElementById('visualizer-container')
        });

        visualizer.load().then(() => {

            // Add event listeners to the buttons to show and hide the Visualizer
            document.getElementById('show-visualizer').addEventListener('click', () => {
                visualizer.show();
                console.log('Visualizer is now visible!');
            });
            document.getElementById('hide-visualizer').addEventListener('click', () => {
                visualizer.hide();
                console.log('Visualizer is hidden now!');
            });
        }).catch(error => {
            console.error('Failed to load the Visualizer:', error);
        });
    });
</script>

For detailed API references and advanced options, check out our DeploymentKit documentation.