Quickstart Guide

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

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

init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.None,
});

import {
    LiveboardEmbed, // Import the class to embed a ThoughtSpot Liveboard
    AuthType,       // Import authentication type constants
    init,           // Import the SDK initialization function
} from '@thoughtspot/visual-embed-sdk';

// Initialize the ThoughtSpot Visual Embed SDK with the host and authentication type.

init({
    thoughtSpotHost: '<%=tshost%>', // Replace <%=tshost%> with your ThoughtSpot instance URL.
    authType: AuthType.None, // no authentication (for testing purposes only).
});

// Create a new LiveboardEmbed instance.
// '#container' is the selector for the DOM element where the Liveboard will be rendered.

const lb = new LiveboardEmbed('#container', {
// frameParams sets the iframe width and height to fill the container.
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardId: '22e79c21-eec4-40bf-997b-7454c6e3a2a5', // GUID of the Liveboard to embed.
});

// Render the embedded Liveboard inside the specified container.
// This step is required to display the Liveboard.
lb.render();

// Import the LiveboardEmbed React component from the ThoughtSpot Visual Embed SDK
import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react';

const App = () => {
    // Create a ref to interact with the embedded Liveboard instance
    const embedRef = useEmbedRef();

    // Event handler called when the Liveboard has finished rendering
    const onLiveboardRendered = () => {
        // Trigger a HostEvent to update runtime filters on the embedded Liveboard
        // This filter sets the 'item type' column to only show rows where the value is 'Jackets'
        embedRef.current.trigger(HostEvent.UpdateRuntimeFilters, [
            {
                columnName: 'item type',
                operator: RuntimeFilterOp.EQ,
                values: ['Jackets'],
            },
        ]);
    };

    // Render the LiveboardEmbed component with the specified Liveboard ID and event handler
    return (
        <LiveboardEmbed
            ref={embedRef} // Attach the ref for programmatic control
            liveboardId="22e79c21-eec4-40bf-997b-7454c6e3a2a5" // The GUID of the Liveboard to embed
            onLiveboardRendered={onLiveboardRendered} // Register the event handler
        />
    );
};