Embed full application

Table of Contents

Import the AppEmbed package
Initialize the SDK
Create an instance of the AppEmbed object
Register, handle, and trigger events
Test your embedding

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>',
});

frameParams: 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.

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

Try it out

path

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.

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🔗

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

For more information about events, see the following pages:

Test your embedding🔗

Load the embedded object in your app. If the embedding is successful, you will see the ThoughtSpot application page.
Explore the charts and tables, and verify if objects render and show the desired data.