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🔗

The following is a quick set of steps to embed from the sign up for a Free Trial or your own ThoughtSpot instance.

Please see the embedding components guide for the full documentation to all of the capabilities of the Visual Embed SDK.

Let’s embed a simple Liveboard with charts and tables.

Liveboard

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,
});

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🔗

Now that you’re ready with a basic embed, explore the additional capabilities that would provide you more control over your embedded application.

Help and support🔗