Build interactive analytics in your React App with ThoughtSpot Everywhere

ThoughtSpot has revolutionized access to analytics for business users through search and AI. In addition to being a general purpose analytics tool that allows unprecedented access to business users, product builders can now use ThoughtSpot to deliver search-based analytics to customers.

Today, we are launching a brand new SDK that allows you to embed ThoughtSpot into your own web app in literally minutes. To show you how it works, I’ll walk you through an app built using React + Typescript, but you can use whatever framework works best for you!

1. Create React app

Start by creating a simple React app using create-react-app or a React + Typescript code sandbox like I did above.

2. Install ThoughtSpot visual embed SDK

The new ThoughtSpot visual embed SDK allows you to control the embedded search or visualization component.

$ npm i @thoughtspot/visual-embed-sdk

3. Initialize embed SDK

Embed SDK needs to point to a ThoughtSpot instance. For this example, I am using a public ThoughtSpot demo instance for a sample retail banking dataset. This sample data is also available to you when you enter the Developer Portal. If you’re interested in experimenting with your own data, you’ll need to sign up for a free trial. 

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

init({
  thoughtSpotHost: "https://try-everywhere.thoughtspot.cloud", // Your instance here.
  authType: AuthType.None // Your Auth scheme, SAML or AuthToken
});

export const App = ...

You’ll also notice I am using AuthType.None since the public demo instance is open and does not require authorization. For other TSE authentication capabilities, read the Developer Guide.

4. Create a search component

Now it’s time to create a simple wrapper to house the ThoughtSpot search component. The SDK will initialize and embed ThoughtSpot into the component you provide.

import { SearchEmbed } from "@thoughtspot/visual-embed-sdk";

export const Search = () => {
  ...
  React.useEffect(() => {
    const tsSearch = new SearchEmbed("#tse" /* The DOM element reference */, {
      hideDataSources: true
      // Other Options go here.
    });
    tsSearch.render();
  }, []);
  
  return <div id="tse" />
}

For a complete list of options, look at the API reference for search.

And just like that, you now have ThoughtSpot embedded into your application.

5. Customize app experiences for users

ThoughtSpot Everywhere emits events which your application can use to create an experience for your users.

Below is a simple use case for how you can show a spinner to your user while ThoughtSpot components are loading:

import { SearchEmbed, EmbedEvent } from "@thoughtspot/visual-embed-sdk";

...

React.useEffect(() => {
  ...
  tsSearch
    .on(EmbedEvent.Init, () => setIsLoading(true)) // Listen to `init` event.
    .on(EmbedEvent.Load, () => setIsLoading(false)) // Listen to 'load` event.
    .render();
}, []);

...

You can check out the complete list of events emitted by the ThoughtSpot Everywhere embed objects here.

6. Trigger custom actions

One of the coolest features of ThoughtSpot Everywhere is the ability to push insights from ThoughtSpot into your app. One way to achieve this is via custom actions. When a user clicks on an action created by you, a callback is called into your app with the analysis data.

This allows users to send data to third party tools and make their insights actionable.

import { SearchEmbed, EmbedEvent } from "@thoughtspot/visual-embed-sdk";
...
React.useEffect(() => {
  ...
  tsSearch
    .on(EmbedEvent.CustomAction, (payload: any) => {
        const data = payload.data;
        if(data.id === 'send-email') {
          sendEmail(data); // Call your own method here.
        }
    })
    .render();
}, []);

...

Getting started with ThoughtSpot Everywhere

All the above code is available at this CodeSandbox. And also on github. The SDK is framework agnostic, so please bring your own framework.

ThoughtSpot has also released a swanky new developer playground, where you can play with everything ThoughtSpot Everywhere has to offer.