embed-pinboard.adoc

Embed a Liveboard

Table of Contents

• Overview
• Import the LiveboardEmbed package
• Initialize the SDK
• Create an instance of the LiveboardEmbed class
• Register, handle, and trigger events
• Render the embedded Liveboard
• Test your embedding

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

Overview

A ThoughtSpot Liveboard is an interactive dashboard that presents a collection of visualizations pinned by a user. ThoughtSpot Liveboards are available the following modes:

• Classic experience mode

• New experience mode

  The new Liveboard experience can be turned off or on using the liveboardV2 parameter in the LiveboardEmbed SDK.

Liveboard layout in embedded mode

In the new Liveboard experience mode, the embedded Liveboard resizes to one-column layout if the screen width is 1024px or less. In classic experience mode, the embedded Liveboard adjusts its layout to two-column or one-column view to fit the screen width and orientation of the user’s device.

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:

• LiveboardEmbed

• LiveboardViewConfig

• Actions

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:

• HostEvent

• EmbedEvent

• Events and app integration

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.

   

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