Embed Spotter experience

import {
    SpotterEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';

<script type = 'module'>
    import {
        SpotterEmbed,
        AuthType,
        init,
        prefetch,
        EmbedEvent,
        HostEvent
    }
from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/index.js';

init({
    thoughtSpotHost: 'https://your-thoughtspot-host', // Replace with your ThoughtSpot application URL
    authType: AuthType.None, // Use the appropriate AuthType for your setup
});

const spotterEmbed = new SpotterEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    worksheetId: '<%=datasourceGUID%>', // ID of the data source object. To use the Auto mode, set the ID to '_spotter_data_source_discovery_id',
    //... other attributes
});

import {
    SpotterEmbed,
    AuthType,
    init,
    EmbedEvent,
    HostEvent
} from '@thoughtspot/visual-embed-sdk';
// Initialize the ThoughtSpot Visual Embed SDK with your ThoughtSpot URL and authentication type.
init({
    thoughtSpotHost: 'https://your-thoughtspot-host', // Replace with your ThoughtSpot application URL
    authType: AuthType.None, // Use the appropriate AuthType for your setup
});

//Define event handler to show a loading indicator when the embed is initializing.
function showLoader() {
    // Show loading indicator
}

// Define event handler to hide the loading indicator when the embed has loaded.
function hideLoader() {
    // Hide loading indicator
}

// Find the container element in your HTML where the SpotterEmbed will be rendered.
const container = document.getElementById('ts-embed');
if (container) {
    // Create and configure the SpotterEmbed
    const spotterEmbed = new SpotterEmbed(container, {
        frameParams: {
            height: '100%', // Set the height of the embedded frame
            width: '100%', // Set the width of the embedded frame
        },
        worksheetId: 'your-worksheet-id', // ID of the data source object to query data from
        //... other configuration attributes
    });

    // Register event listeners
    spotterEmbed.on(EmbedEvent.Init, showLoader); // Show loader when initialization starts
    spotterEmbed.on(EmbedEvent.Load, hideLoader); // Hide loader when embed is fully loaded

    // Render the SpotterEmbed in the container.
    spotterEmbed.render();
    // Example: Add a host event to reset the Spotter conversation
    document.getElementById('resetBtn').addEventListener('click', () => {
        spotterEmbed.trigger(HostEvent.ResetSpotterConversation);
    });
}

import {
    SpotterEmbed,
    AuthType,
    init,
    EmbedEvent,
    HostEvent
} from '@thoughtspot/visual-embed-sdk';
// Initialize the ThoughtSpot Visual Embed SDK with your ThoughtSpot URL and authentication type.
init({
    thoughtSpotHost: 'https://your-thoughtspot-host', // Replace with your ThoughtSpot application URL
    authType: AuthType.None, // Use the appropriate AuthType for your setup
});

//Define event handler to show a loading indicator when the embed is initializing.
function showLoader() {
    // Show loading indicator
}

// Define event handler to hide the loading indicator when the embed has loaded.
function hideLoader() {
    // Hide loading indicator
}

// Find the container element in your HTML where the SpotterEmbed will be rendered.
const container = document.getElementById('ts-embed');
if (container) {
    // Create and configure the SpotterEmbed
    const spotterEmbed = new SpotterEmbed(container, {
        frameParams: {
            height: '100%', // Set the height of the embedded frame
            width: '100%', // Set the width of the embedded frame
        },
        worksheetId: 'your-worksheet-id', // ID of the data source object to query data from. For automatic model discovery and selection (Auto mode), specify '_spotter_data_source_discovery_id'
        updatedSpotterChatPrompt: true, // Enable new chat interface
        enablePastConversationsSidebar: true, // Enable chat history
        //... other configuration attributes
    });

    // Register event listeners
    spotterEmbed.on(EmbedEvent.Init, showLoader); // Show loader when initialization starts
    spotterEmbed.on(EmbedEvent.Load, hideLoader); // Hide loader when embed is fully loaded

    // Render the SpotterEmbed in the container.
    spotterEmbed.render();
    // Example: Add a host event to reset the Spotter conversation
    document.getElementById('resetBtn').addEventListener('click', () => {
        spotterEmbed.trigger(HostEvent.ResetSpotterConversation);
    });
}