Page Comparison

<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 = new WizartDeploymentKit.createVisualizerVisualizer({
            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>

<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 = new WizartDeploymentKit.createVisualizerVisualizer({
            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>