Get the base Liveboard rendering

Your first real milestone is getting the bookings Liveboard to render inside the portal. Grab the Liveboard ID from the Developer Playground and drop it straight in.

Step 1: Import the LiveboardEmbed component🔗

Find the file you want to embed the Liveboard in and import the LiveboardEmbed component:

import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react';

Step 2: Render the Liveboard🔗

First, decide which Liveboard you want to embed:

In the ThoughtSpot UI, go to Develop > Visual Embed SDK Playground.
Select Liveboard Embed, then select the Liveboard you want to embed.
The Code snippet section updates with the generated code. Copy it directly into your file, or extract only the Liveboard ID.

function renderLiveboard() {
    const liveboardEmbed = new LiveboardEmbed(container, {
        frameParams: { width: '100%', height: '100%' },
        liveboardId: '<%=liveboardGUID%>', // from the Playground
    });

    liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => {
        console.log('Liveboard rendered');
    });

    liveboardEmbed.render();
}

← Previous Next →