Embed a Liveboard

Embed a Liveboard

This page explains how to embed a ThoughtSpot Liveboard in your Web page, portal, or application.

A ThoughtSpot Liveboard is an interactive dashboard that presents a collection of visualizations pinned by a user.

Import the LiveboardEmbed package🔗

Import the LiveboardEmbed SDK library to your application environment:

npm

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

ES6

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

Initialize the SDK🔗

Initialize the SDK and define authentication attributes.

Create an instance of the LiveboardEmbed class🔗

const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardId: '<%=liveboardGUID%>',
    fullHeight: true,
    visibleVizs: [],
    runtimeFilters: [{
    columnName: '<column-name>',
    operator: <RuntimeFilterOp>
    values: ['value']
   }],
});

For more information Liveboard embed object, classes, methods, interface properties, and enumeration members, see the following pages:

Register, handle, and trigger events🔗

Register event listeners.

liveboardEmbed.on(EmbedEvent.init, showLoader)
liveboardEmbed.on(EmbedEvent.load, hideLoader)

For more information about events, see the following pages:

Render the embedded Liveboard🔗

Render the embedded Liveboard.

liveboardEmbed.render();

Test your embedding🔗

  1. Load the embedded object in your app. If the embedding is successful, you will see a Liveboard page with visualizations.

    Liveboard embed

  2. Explore the charts and tables, and verify if objects render and show the desired data.

Liveboard experience modes🔗

ThoughtSpot Liveboards support the following modes:

  • New experience mode (Default)

  • Classic experience mode

    The new Liveboard experience can be turned off or on using the liveboardV2 parameter in the LiveboardEmbed SDK. By default, the new Liveboard experience is enabled in the SDK and this setting takes precedence over the setting applied at the cluster level in the Admin tab.

The new Liveboard experience provides an improved interface with several new features and enhancements. The following figure shows the menu actions available on a Liveboard page in each mode:

Liveboard experience comparison

Note the following enhancements in the new New Experience mode:

  • Liveboard edit
    To edit a Liveboard in the new experience mode, click the Edit button on the Liveboard page. For example, to delete a visualization on a Liveboard, the user must click Edit, and then navigate to the Delete option on a visualization.

  • Filter application in the new experience mode
    To apply filters, the application users must switch to the edit mode. Only users with edit access to the Liveboard can apply filters. When a user creates a copy of a Liveboard, the filters applied on its visualizations are also copied. For more information about Liveboard filters, see Liveboard filter configuration options.

  • Actions
    The following actions are deprecated in the new experience mode:

    • The Copy embed link and Copy link menu actions in the More the more options menu menu of a Liveboard

    • The edit title icon on visualization tiles

    • The Share button on visualizations

Liveboard tabs🔗

The new Liveboard experience allows you to organize your visualizations into tabs. Liveboard tabs allow you to logically group visualization into specific categories and allow users to access them easily.

To create, edit, or move visualizations to a tab, you require edit access to a Liveboard.

  • To add a tab, click Edit and then click Add tab on the Liveboard page.

  • To add a visualization to a tab on a Liveboard, click Move to tab from the More the more options menu menu.

    You can also pin a visualization to a Liveboard tab using the Pin action on the Answer page.

Set a tab as an active tab🔗

By default, the first tab created on a Liveboard is set as the home tab. You can set any tab as an active tab using the activeTabId property in the Visual Embed SDK as shown in the example here:

const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardV2: true,
    liveboardId: "d7a5a08e-a1f7-4850-aeb7-0764692855b8",
    activeTabId: "05406350-44ce-488e-abc5-5e8cdd65cf3c",
});
Note

The activeTabId property is available only in the LiveboardEmbed package and is not supported in the full application embed mode.

Note tiles🔗

You can add a Liveboard Note tile with custom text, images, and links on an embedded Liveboard.

  • Only users with edit access to a Liveboard can add a Note tile.

  • Users require Can upload data privilege can upload an image to the note tile.

  • If you are adding links and images from an external site, or embedding multimedia or web page in an iFrame, make sure the URLs are added to CORS and CSP allowlists. For more information, see Security settings.

Additional resources🔗