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!
Create React App
Start by creating a simple React app using create-react-app or a React + Typescript code sandbox like I did above.
$ npx create-react-app my-appInstall 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-sdkInitialize 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.
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.
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.
For a complete list of options, look at the API reference for search.
And just like that, you now have ThoughtSpotembedded into your application.
Listening to Events
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:
You can check out the complete list of events emitted by the ThoughtSpot Everywhere embed objects here.
Custom Actions
One of the coolest features of ThoughtSpotEverywhere 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.
Thats all, folks!
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.
