...
Step 2: Add the DeploymentKit Library to Your Website
To start, include find the DeploymentKit library latest library version link DeploymentKit documentation and include it by adding the following <script> tag in your HTML file. Place it before your integration script to ensure the library is loaded.
| Code Block |
|---|
<script src="https://cdnd18jpdcj6p6zg6.wizartcloudfront.ainet/wizart-deployment-kit/latest/deployment-kit.min.js-v..."></script> |
Step 3: Add the Target Element to Your HTML
...
| Code Block |
|---|
<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> |
...
| Code Block |
|---|
<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> |
...