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.

Note

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:

npm

import {
    AppEmbed,
    Page,
    AuthType,
    init,
    prefetch,
    EmbedEvent
}
from '@thoughtspot/visual-embed-sdk';

ES6

<script type = 'module'>
    import {
        AppEmbed,
        Page,
        AuthType,
        init,
        prefetch,
        EmbedEvent
    }
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>',
});
pageId

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

path

String. The URL path of the ThoughtSpot application page that you want your embed application users to navigate to. When both path and pageId attributes are defined, the path definition takes precedence.

The following examples show the valid strings for path:

Answers list page
path: 'answers'
Saved Answer
path: 'saved-answer/96a1cf0b-a159-4cc8-8af4-1a297c492ff9'
Liveboards list page
path: 'pinboards'
Liveboard
path: 'pinboard/96a1cf0b-a159-4cc8-8af4-1a297c492ff9'
SpotIQ page
path: 'insights'
SpotIQ insights
path: 'insight/7a02eb76-5963-4c51-a7d3-d95d312d7259'
Data page
path: 'data/tables/'
Worksheet, Table, or View
path: 'data/tables/cd252e5c-b552-49a8-821d-3eadaa049cca'
Monitor page
path: 'monitor'
Note

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.