Quickstart Guide

Quickstart Guide

ThoughtSpot provides Visual Embed SDK, a Javascript library to help you embed ThoughtSpot components such as charts and tables, Liveboards, Search functionality, or the full ThoughtSpot experience in your app.

Let’s get started with embedding a ThoughtSpot component in your application.

Before you embed🔗

Check if you have access to a ThoughtSpot instance. If you don’t have a ThoughtSpot application instance, sign up for a Free Trial.

Important

You must add your embedding application domain(s) to the CSP and CORS allowlist on the Develop > Customizations > Security Settings page in ThoughtSpot. To configure CORS and CSP settings, you need admin or developer privilege (Has Developer privilege).

Create content in ThoughtSpot🔗

Building content in ThoughtSpot for embedding is done through ThoughtSpot’s UI, following the same process for an internal business use case.

The basic sequence involves the following steps:

  • Log in to your ThoughtSpot instance.

  • Connect your instance to a Data Warehouse.
    If you’re using the Free Trial instance, note that it is already connected to a sample data warehouse.

  • Create the objects required for embedding. For example, charts, tables, and Liveboard.

To learn more about data connections, data models and objects, and how to search data and create Liveboards, see ThoughtSpot product documentation.

Get started with embedding🔗

This section provides a set of steps to quickly embed a Liveboard from the Free Trial or your own ThoughtSpot application instance. The following figure shows a sample Liveboard with charts and a table:

Liveboard

If you want to embed other ThoughtSpot components and explore the additional capabilities of the Visual Embed SDK, see the embedding components guide or the resources listed in the Explore more section.

Step 1: Install the Visual Embed SDK🔗

The latest version of the Visual Embed SDK is available at https://www.npmjs.com/package/@thoughtspot/visual-embed-sdk.

npm install @thoughtspot/visual-embed-sdk

Step 2: Import the SDK into your project🔗

Import the SDK package into your application environment. Let’s import the LiveboardEmbed SDK package to embed a Liveboard.

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

Step 3: Initialize the SDK🔗

To initialize the SDK, the following information is required:

  • thoughtSpotHost
    The hostname of your ThoughtSpot application instance. For example, team2.thoughtspot.cloud. See FAQs to know how to find the hostname of your application instance.

  • authType
    Authentication type. ThoughtSpot supports a variety of Authentication types. For testing purposes, you can use AuthType.None. For other authentication options, see Authentication.

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

Ensure that you call init before render().

Step 4: Add the component🔗

Each embedding option requires you to define the properties of the component you want to embed. For example, to embed a Liveboard, you must specify the GUID of the Liveboard.

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

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

const lb = new LiveboardEmbed('#container', {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardId: '22e79c21-eec4-40bf-997b-7454c6e3a2a5',
});

// Do not forget to call render.
lb.render();

The #container in the above example is a selector for the DOM node which the code assumes is already attached to DOM. The SDK will render the ThoughtSpot component inside this container element.

Note

  • If you don’t know the GUID of Liveboard, open the Liveboard in the ThoughtSpot UI and copy the GUID from the URL. You can also use the Visual Embed Playground to view the GUID of the Liveboard.

  • If you are a free trial user, use 22e79c21-eec4-40bf-997b-7454c6e3a2a5.

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

const App = () => {
    const embedRef = useEmbedRef();
    const onLiveboardRendered = () => {
        embedRef.current.trigger(HostEvent.UpdateRuntimeFilters, [
            {
                columnName: 'item type',
                operator: RuntimeFilterOp.EQ,
                values: ['Jackets'],
            },
        ]);
    };
    return (
        <LiveboardEmbed
            ref={embedRef}
            liveboardId="22e79c21-eec4-40bf-997b-7454c6e3a2a5"
            onLiveboardRendered={onLiveboardRendered}
        />
    );
};

For more information about events, see HostEvent and EmbedEvent.

Step 5: Verify the embedded object🔗

Load the application page with the embedded object in your app.

The following figure shows an embedded view of the Liveboard object.

Liveboard embed

Explore more🔗

In addition to this quickstart guide, a comprehensive hands-on embedding fundamentals tutorial is available.

To explore the additional capabilities that would provide you more control over your embedded application, see the following pages:

Help and support🔗