ThoughtSpot Visual Embed SDK

SDK to embed ThoughtSpot into your web apps.

Usage

Install the Visual Embed SDK from NPM:

npm i @thoughtspot/visual-embed-sdk

The SDK is written in TypeScript and is also provided both as ES Module (ESM) and Universal Module Definition (UMD) modules, allowing you to use it in a variety of environments. For example,...

// ESM
import * as TsEmbedSDK from '@thoughtspot/visual-embed-sdk';

// <script>
<script src='https://unpkg.com/@thoughtspot/visual-embed-sdk/dist/tsembed.js'></script>

Live Playground

Visit our code playground.

Full API Reference

• Detailed developer guide.
• Please visit our API reference docs.

Quick Start

The ThoughtSpot Embed SDK allows you to embed the ThoughtSpot search experience, pinboards, visualizations or the even full app version.

Embedded Search

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

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

const searchEmbed = new SearchEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
});

searchEmbed.render();

Embedded Pinboard & Visualization

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

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

const pinboardEmbed = new PinboardEmbed(
    document.getElementById('ts-embed'),
    {
        frameParams: {
            width: '100%',
            height: '100%',
        },
        pinboardId: '<%=pinboardGUID%>',
        vizId: '<%=vizGUID%>',
    },
});

pinboardEmbed.render();

Embedded Full App

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

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

const appEmbed = new AppEmbed(
    document.getElementById('ts-embed'),
    {
        frameParams: {
            width: '100%',
            height: '100%',
        },
        pageId: Page.Data,
    });

appEmbed.render();

React Components

All the above flavors of embedding are also provided as React components for your convenience. The constructor options are passed as props and the event listeners can be attached using on<EventName> convention.

Search Component

import { init } from '@thoughtspot/visual-embed-sdk';
import { SearchEmbed } from '@thoughtspot/visual-embed-sdk/react';

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

const MyComponent = ({ dataSources }) => {
    const onCustomAction = (actionEvent) => {
        // Do something with actionEvent.
    };
    
    return <SearchEmbed dataSources={dataSources} onCustomAction={onCustomAction} />
}

Visual-Embed-SDK, © ThoughtSpot, Inc. 2021