ThoughtSpot Visual Embed SDK
 !npm (scoped with tag)  !npm !npm bundle size (scoped)

SDK to embed ThoughtSpot into your web apps. You need a ThoughtSpot account to use the SDK, click here to start a free trial.

* Installation
* Live Playground
* Full API Reference
* Quick Start
* Embedded Search
* Embedded Liveboard & Visualization
* Embedded Full App
* Triggering and Listening to events
* React Components
* Search Component
* Triggering events on React components
* Contributing

Installation

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,...

`js
// ESM via NPM
import * as TsEmbedSDK from '@thoughtspot/visual-embed-sdk';
// OR
import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk';

// NPM ;
// Makes the SDK available on global namespace window.tsembed

// ES6 from web
import {
LiveboardEmbed,
AuthType,
init,
} from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
`




Live Playground

Visit our code playground.


Start a free trial on your own data.




Full API Reference

- Thoughtspot Embedded Docs
- Please visit our API reference docs.
- Comprehensive CodeSandbox




Quick Start

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

$3

`js
// NPM
import { SearchEmbed, AuthType, init } from '@thoughtspot/visual-embed-sdk';
// or ES6
// import { SearchEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

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

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

searchEmbed.render();
`

$3

`js
// NPM
import { LiveboardEmbed, AuthType, init } from '@thoughtspot/visual-embed-sdk';
// or ES6
// import { LiveboardEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

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

const liveboardEmbed = new LiveboardEmbed(
document.getElementById('ts-embed'),
{
frameParams: {
width: '100%',
height: '100%',
},
liveboardId: '<%=liveboardGUID%>',
vizId: '<%=vizGUID%>',
},
});

liveboardEmbed.render();
`

$3

`js
// NPM
import { AppEmbed, Page, AuthType, init } from '@thoughtspot/visual-embed-sdk';
// or ES6
// import { AppEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

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

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

appEmbed.render();
`

$3


`js
// NPM
import { LiveboardEmbed, Page, AuthType, init, EmbedEvent, HostEvent } from '@thoughtspot/visual-embed-sdk';

// .. Do init and create a liveboardEmbed object as above.

liveboardEmbed.render();

liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => {
liveboardEmbed.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
});
`

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 convention.



Checkout a comprehensive working demo here

$3

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

// If you are using Webpack 4 (which is the default when using create-react-app v4), you would need to import
// the React components using the below:
import { SearchEmbed } from '@thoughtspot/visual-embed-sdk/lib/src/react';

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

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

return (
dataSources={dataSources}
onCustomAction={onCustomAction}
/>
);
};
`

$3

`jsx
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 (
ref={embedRef}
liveboardId=""
onLiveboardRendered={onLiveboardRendered}
/>
);
};
`

###




Contributing

$3

How to run the local vite server to test out the sdk.

`
$ npm run build
`

`
$ npm run dev
`

Goto http://localhost:2343/local to check the output.

Look at local/index.html and local/index.ts` for some starter code.

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