LLMs.txt: Complete documentation index for AI agents
Customize your full application embed
Cloud
26.9.0.clCloud (Latest)
26.8.0.clCloud
26.7.0.clCloud
Software
26.3.0.swSoftware (Latest)
10.10.0.swSoftware
10.1.0.swSoftware
GitHub

Customize your full application embed

ThoughtSpot supports the following experience modes in full application embedding:

  • V3 experience (HomePage.ModularWithStylingChanges)—The default home page experience as of ThoughtSpot Cloud 26.8.0.cl. Includes the left navigation panel, customizable modules, and styling changes.

  • V4 experience (HomePage.Focused)—An enhanced home page experience with a focused layout and additional customization options.

Important

The classic V1 and V2 navigation and homepage experience modes are deprecated as of ThoughtSpot Cloud 26.8.0.cl. Starting from this release, all embedded sessions render in the V3 navigation experience by default.

UI experience modes🔗

ThoughtSpot supports V3 and V4 home page and navigation experiences for full application embedding.

FeatureV3 experience
HomePage.ModularWithStylingChanges		V4 experience
HomePage.Focused

hideHomepageLeftNav
Hides the left navigation panel on the home page.

✓ Supported

✓ Supported

hiddenHomepageModules
Hides specific modules on the home page.

✓ Supported

✓ Supported

reorderedHomepageModules
Reorders modules on the home page.

✓ Supported

x Not supported

homePageModules
Specifies which modules to show on the home page.

✓ Supported

x Not supported

Left navigation panel customization

✓ Supported

✓ Supported

Custom reordering of left nav items

✓ Supported

✓ Supported

V3 navigation and home page experience

V3 UI experience

V4 home page experience

V4 homepage experience

Customize the embedded application UI for your users🔗

Before updating the UI experience, review the key features, limitations, and available SDK controls for customizing navigation and the home page.

For more information about the layout and UI elements in the V3 experience, refer to the ThoughtSpot Product Documentation.

Upgrade to the V3 experience🔗

If you are using the classic (V1) experience in your embed, ThoughtSpot recommends migrating directly to the V3 experience for an improved user interface, enhanced home page customization options, and navigation controls.

Before you begin:

  • Verify if your ThoughtSpot instance has the V3 experience enabled at the cluster level.

  • Ensure that your embedding environment has the latest version of the Visual Embed SDK. The minimum supported version for the V3 experience is v1.40.0.

  • If you are using direct CSS selectors for style customization, test your customization in the Playground.

  • If your embed uses action customization and the SDK events for app interactions, test your customizations for compatibility across different UI experiences to ensure seamless migration.

V3 experience settings in the SDK🔗

To enable the V3 experience, you must use the discoveryExperience object in the SDK. This object supports the following properties:

  • primaryNavbarVersion
    Enables the V3 experience. The valid value is PrimaryNavbarVersion.Sliding.

  • homePage
    Enables the modular or focused home page experience. Valid values include:

    • HomePage.ModularWithStylingChanges (Recommended for V3)
      Enables the V3 modular home page experience. You must include primaryNavbarVersion to update the UI experience to the V3 home page.

    • HomePage.Focused Early Access
      Enables the V4 focused home page experience, which consolidates the Watchlist and Recents sections into a single, focused view.

Enable the V4 focused home page experience🔗

The V4 focused home page experience is available with Visual Embed SDK v1.50.0 and ThoughtSpot Cloud 26.7.0.cl. This experience consolidates the Watchlist and Recents sections into a unified, focused view designed to surface the most relevant content for users.

Important

The focused home page experience is an Early Access feature and is disabled by default. To enable this feature, contact your ThoughtSpot administrator.

To enable the V4 focused home page, set homePage to HomePage.Focused in the discoveryExperience object:

// Import required components and enums
import {
    AppEmbed,
    HomePage, // Enum for home page experience settings
    PrimaryNavbarVersion // Enum for V3 navigation experience
} from '@thoughtspot/visual-embed-sdk';

const embed = new AppEmbed("#embed", {
     discoveryExperience: {
         primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enable V3 navigation experience
         homePage: HomePage.Focused, // Enable V4 focused home page experience
     },
     showPrimaryNavbar: true,
     //... other embed view configuration attributes
});

Customize navigation experience🔗

For information about the navigation elements in each UI experience mode and the related customization settings in the SDK, see Customize navigation experience.

Customize home page experience🔗

For information about the home page components and the related customization settings in the SDK, see Customize home page experience.

Customize the default loading page and navigation routes🔗

In full application embedding, the home page is set as the default landing page when the embedded app loads. You can customize the default landing page settings using the pageId or path attribute.

Customize list page experience🔗

A list page in ThoughtSpot refers to a page that displays a list of objects, such as Answers, Liveboards, and Liveboard schedules. The list pages include columns for sorting, filtering, tagging, sharing, or deleting objects.

List layouts🔗

If your embed has the V3 navigation and homepage experience enabled, the ListPage V3 experience is enabled by default.

The list layouts in full app embedding typically include columns such as Name, Author, Favorites, Tags, Last Viewed and more. For Liveboard lists, a Verified column is available to filter the list by verified objects. In addition to these columns, the ListPage V3 experience includes the Views column and the following enhancements:

  • Sorting options for Name, Author, and Views columns.

  • Filter addition by clicking the column header without opening the filter modal. This option is available for Favorites, Views columns, and Verified columns.

Include or exclude columns from list layouts🔗

To customize the columns in list pages such as Liveboards and Answers, use the hiddenListColumns attribute with the following List page IDs:

  • ListPageColumns.Author to show or hide the Author column.

  • ListPageColumns.DateSort to show or hide the Last modified column.

  • ListPageColumns.Favorites to show or hide the Favorites column.

  • ListPageColumns.Share to show or hide the Share links in the column.

  • ListPageColumns.Tags to show or hide the Tags column.

  • ListPageColumns.Verified to show or hide the Verified column in Liveboard lists.

The following example hides specific columns using the hiddenListColumns array:

import {
    AppEmbed, // Main class to embed the full ThoughtSpot app
    ListPageColumns // Enum for columns on list pages
} from '@thoughtspot/visual-embed-sdk';

const embed = new AppEmbed("#embed", {
    // hide Author, Share, and Tags columns on Answers and Liveboards listing pages
    hiddenListColumns: [
        ListPageColumns.Author,
        ListPageColumns.Share,
        ListPageColumns.Tags
    ],
    //... other view config attributes

});
Note

The hiddenListColumns: [ListPageColumns.Share] hides the Share column, but doesn’t remove the Share button that appears above the list on selecting an object. To hide both the column and the Share button, use Action.Share in the hiddenActions array.

Additional customization controls🔗

CSS customization allows overriding default styles in ThoughtSpot application pages. You can also use Theme Builder to explore the available CSS variables.

If there is a page element you cannot hide using ThoughtSpot or Visual Embed SDK options, you can use a CSS selector to target the element and apply CSS properties such as display: none, visibility: hidden, or height: 0px to hide it from the UI. To find the appropriate selector, use your browser’s Inspect tool to examine the style element in the Elements section of the browser’s Developer Tools.

.bk-data-scope .left-pane .header-lt {
  display: none !important;
  visibility: hidden !important;
}

An example of using direct selectors in a file is available in the complete.css sample on the ThoughtSpot GitHub repository.

You can also declare direct selectors using the rules property in the Visual Embed SDK configuration. This is useful for real-time testing, especially in the Visual Embed SDK playground. Note the required format for encoding CSS rules as JavaScript objects.

Additional resources🔗

Related resources🔗

© 2026 ThoughtSpot Inc. All Rights Reserved.