Embed full application

Embed full application

The full app embedding allows you to embed the full ThoughtSpot application or the individual application pages in your app.

Full app embedding gives you all the features of ThoughtSpot, with the ability to use additional features and customization from the Visual Embed SDK, such as custom actions and CSS styling rules.

The basic layout and feature set of the various pages of the ThoughtSpot application in full app embedding is relatively fixed, so if you need more control, use the SearchEmbed and LiveboardEmbed components. You can control/customize navigation within your web application using the full app or other embed components.


We do not recommend mixing full app embedding with the SearchEmbed and LiveboardEmbed components.

To embed the full ThoughtSpot application in your app, website, or product, complete the steps described in the following sections.

Import the AppEmbed package🔗

Import the AppEmbed SDK library to your application environment:


import {
from '@thoughtspot/visual-embed-sdk';


<script type = 'module'>
    import {
from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';

Initialize the SDK🔗

Initialize the SDK and define authentication attributes.

Create an instance of the AppEmbed object🔗

Create an instance of the AppEmbed object and pass parameters to set a page view.

const appEmbed = new AppEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    pageId: Page.Home,
    showPrimaryNavbar: false,
    disableProfileAndHelp: true,
    tag: '<tag-name>',

Sets the width and height dimensions to render the pages in the web application. You can set the width and height attribute values in pixels or as a percentage.


The unique identifier for the ThoughtSpot application page. The value specified in the pageId attribute will be set as the active tab, which is displayed by default when the embedded ThoughtSpot UI loads. You can also use this attribute to embed a specific ThoughtSpot application page.

Valid values for this attribute are:

  • Page.Home for the ThoughtSpot Home page

  • Page.Search for the ThoughtSpot Search page

  • Page.Answers for the Answers page

  • Page.Liveboards for the Liveboards page

  • Page.Data for the Data page

  • Page.SpotIQ for the SpotIQ analyses page

Try it out

String. The URL path of the ThoughtSpot application page that you want to embed. You can use this parameter to navigate your users to a specific page on your embedded instance. For example, to navigate your users to the Monitor page or a saved Answer, you can specify the path as shown here:

path: 'monitor'
path: 'saved-answer/96a1cf0b-a159-4cc8-8af4-1a297c492ff9'

To try it out on Playground, select the Navigate to URL checkbox and define the URL path.


When both path and pageId attributes are defined, the path definition takes precedence.

For more information full application embed object, classes, methods, interface properties, and enumeration members, see the following pages:

Register, handle, and trigger events🔗

Register event listeners.

appEmbed.on(EmbedEvent.init, showLoader)
appEmbed.on(EmbedEvent.load, hideLoader)

For more information about events, see the following pages:

Test your embedding🔗

  1. Load the embedded object in your app. If the embedding is successful, you will see the ThoughtSpot application page.

    Full application embed
  2. Explore the charts and tables, and verify if objects render and show the desired data.