Code samples

Table of Contents

Visual Embed SDK
Embed Natural Language Search
Embed ThoughtSpot Search bar
Event trigger
Event trigger on React components
Trusted authentication
Custom actions
Additional resources

This page contains code samples to help you embed ThoughtSpot features and data and build your applications.

Visual Embed SDK🔗

You can use the following code snippets to build your code and embed ThoughtSpot content in your host application.

Embed a Liveboard🔗

import {
    LiveboardEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.EmbeddedSSO,
});
const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardId: 'f4a4e205-3b43-4b77-8ec0-8723da49ce1d',
});
liveboardEmbed.render();

Embed charts and tables🔗

import {
    LiveboardEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.EmbeddedSSO,
});
const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardId: '6294b4fc-c289-412a-b458-073fcf6e4516',
    vizId: '28b73b4a-1341-4535-ab71-f76b6fe7bf92',
});
liveboardEmbed.render();

Embed full application🔗

import {
    AppEmbed,
    Page,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: '<%=tshost%>',
    authType: AuthType.EmbeddedSSO,
});
const appEmbed = new AppEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    pageId: Page.Data,
});
appEmbed.render();

Embed ThoughtSpot Search🔗

The following example shows how to embed the ThoughtSpot Search page:

import {
    SearchEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: "<%=tshost%>",
    authType: AuthType.EmbeddedSSO,
});
const searchEmbed = new SearchEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    dataSources: ['4f289824-e301-4001-ad06-8888f69c4748'],
    searchOptions: {
        searchTokenString: '[quantity purchased] [region]',
        executeSearch: true,
    },
});
searchEmbed.render();

Embed Natural Language Search🔗

The following example shows how to embed ThoughtSpot search bar:

import {
    SageEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: "<%=tshost%>",
    authType: AuthType.EmbeddedSSO,
});
const sageEmbed = new SageEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    dataSources: ['4f289824-e301-4001-ad06-8888f69c4748'],
    searchOptions: {
        searchQuery: 'average sales by country and product type',
        executeSearch: true,
    },
});
sageEmbed.render();

Embed ThoughtSpot Search bar🔗

The following example shows how to embed ThoughtSpot search bar:

import {
    SearchBarEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent,
    HostEvent
}
from '@thoughtspot/visual-embed-sdk';
// If not using npm, use the following for an ES6 standard import:
// from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
init({
    thoughtSpotHost: "<%=tshost%>",
    authType: AuthType.EmbeddedSSO,
});
const searchBarEmbed = new SearchBarEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    dataSources: ['4f289824-e301-4001-ad06-8888f69c4748'],
    searchOptions: {
        searchTokenString: '[quantity purchased] [region]',
        executeSearch: true,
    },
});
searchBarEmbed.render();

Event trigger🔗

The following example shows how to trigger an event from the embedded ThoughtSpot interface:

searchEmbed.on(EmbedEvent.VizPointDoubleClick, (payload) => {
   console.log(payload);
   const clickedPoint = payload.data.clickedPoint;
   const selectedPoint = payload.data.selectedPoints;
   console.log('>>> called', clickedPoint);
   embed.trigger(HostEvent.DrillDown, {
      points: {
         clickedPoint,
         selectedPoints: selectedPoint
      },
      autoDrillDown: true,

   })
})

Event trigger on React components🔗

import { HostEvent } from '@thoughtspot/visual-embed-sdk';
import { LiveboardEmbed, useEmbedRef } from '@thoughtspot/visual-embed-sdk/react';

const MyComponent = () => {
    const embedRef = useEmbedRef();
    const onLiveboardRendered = () => {
        embedRef.current.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
    };

    return (
        <LiveboardEmbed
            ref={embedRef}
            liveboardId="<liveboard-guid>"
            onLiveboardRendered={onLiveboardRendered}
        />
    );
};