Embed full application

Table of Contents

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

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.

UI experience🔗

The ThoughtSpot UI and navigation experience is available in two modes:

Classic experience (default)
New navigation and homepage experience Early Access

By default, the New navigation and homepage experience is turned off on ThoughtSpot embedding applications. To enable the new experience for your embedding application users, set modularHomeExperience to true.

For more information about new navigation and homepage experience and customization controls for full application embedding, see Customize full application embedding.

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

The AppEmbed component allows you to embed a specific application page or the entire application experience. If you are embedding full application, you can choose to show a specific page when embedded content loads using the pageId or path property. The AppEmbed component also provides several customization controls to customize full application experience in an embedded view. For more information, 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.

Classic experience

New home page experience
Explore the charts and tables, and verify if objects render and show the desired data.