@thoughtspot/visual-embed-sdk v1.28.3
ThoughtSpot Visual Embed SDK
SDK to embed ThoughtSpot into your web apps. You need to have a ThoughtSpot account to use the SDK, click here to start a trial.
Installation
The SDK is compatible with ThoughtSpot SW version >= 7.1 and ThoughtSpot Cloud.
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 via NPM
import * as TsEmbedSDK from '@thoughtspot/visual-embed-sdk';
// OR
import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk';
// NPM <script>
<script src="https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.js"></script>;
// 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.
Embedded Search
// 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();
Embedded Liveboard & Visualization
// 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();
Embedded Full App
// 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();
Triggering and Listening to events
// 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<EventName>
convention.
Checkout a comprehensive working demo here
Search Component
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 (
<SearchEmbed
dataSources={dataSources}
onCustomAction={onCustomAction}
/>
);
};
Triggering events on React components (> version 1.9.2)
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}
/>
);
};
Visual-Embed-SDK, © ThoughtSpot, Inc. 2023
1 day ago
4 days ago
8 days ago
16 days ago
16 days ago
20 days ago
21 days ago
21 days ago
22 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
5 months ago
5 months ago
5 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
7 months ago
8 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago