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 begin🔗

  • Log in to your ThoughtSpot instance.
    If you don’t have access to a ThoughtSpot application instance, sign up for a Free Trial.

  • Connect your instance to a Data Warehouse.
    If you’re using the Free Trial instance, don’t worry! We have already connected a sample data warehouse for you.

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

  • Add your embedding application domain 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).

Get started with embedding🔗

Embedding a ThoughtSpot component in your app is easy and requires only a few steps. ThoughtSpot supports several embed options such as Liveboard Embed, Natural Language Search Embed, Visualisation Embed, and Full Application Embed.

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.

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🔗