![Liveboard](/docs/doc-images/images/lb-image.png)
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 embed🔗
Check if you have access to a ThoughtSpot instance. If you don’t have a ThoughtSpot application instance, sign up for a Free Trial.
Important
|
You must add your embedding application domain(s) 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). |
Create content in ThoughtSpot🔗
Building content in ThoughtSpot for embedding is done through ThoughtSpot’s UI, following the same process for an internal business use case.
The basic sequence involves the following steps:
-
Log in to your ThoughtSpot instance.
-
Connect your instance to a Data Warehouse.
If you’re using the Free Trial instance, note that it is already connected to a sample data warehouse. -
Create the objects required for embedding. For example, charts, tables, and Liveboard.
To learn more about data connections, data models and objects, and how to search data and create Liveboards, see ThoughtSpot product documentation.
Get started with embedding🔗
The following is a quick set of steps to embed from the sign up for a Free Trial or your own ThoughtSpot instance.
Please see the embedding components guide for the full documentation to all of the capabilities of the Visual Embed SDK.
Let’s embed a simple Liveboard with charts and tables.
![Liveboard](/docs/doc-images/images/lb-image.png)
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 useAuthType.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
|
|
- React
import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react';
const App = () => {
const embedRef = useEmbedRef();
const onLiveboardRendered = () => {
embedRef.current.trigger(HostEvent.UpdateRuntimeFilters, [
{
columnName: 'item type',
operator: RuntimeFilterOp.EQ,
values: ['Jackets'],
},
]);
};
return (
<LiveboardEmbed
ref={embedRef}
liveboardId="22e79c21-eec4-40bf-997b-7454c6e3a2a5"
onLiveboardRendered={onLiveboardRendered}
/>
);
};
For more information about events, see HostEvent and EmbedEvent.
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](/docs/doc-images/images/embed-lb.png)
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.
-
Leverage the power of Natural Language Search with ThoughtSpot’s Sage Embed.
-
Explore the other embedding options available with the SDK:
-
Create a custom action and assign it to an embedded Liveboard or Answer page generated from a search query.
-
Control the visibility of menu actions on the embedded page.
-
Register events that your app can listen to and respond with appropriate actions.
Create custom workflows using Host Events. -
Whitelabel and customize your ThoughtSpot embedded experience using style customization framework and custom CSS.
-
Explore the SDK and test your embedding in the Code sandbox.
-
To view the SDK files, visit the Visual Embed SDK GitHub repository.
Help and support🔗
-
Refer to FAQs and Troubleshooting guide.
-
Use the in-app Live Chat support for instant help.
This feature is available only on non-embedded ThoughtSpot instances. -
Contact ThoughtSpot Support and Community.
-
Join Discord to connect with developer assistance.