# Customize your full application embed > For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt) Source: https://developers.thoughtspot.com/docs/full-app-customize # 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. | Feature | V3 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](/docs/doc-images/images/v3-experience.png) **V4 home page experience** ![V4 homepage experience](/docs/doc-images/images/v4-homepage-experience.png) ## Customize the embedded application UI for your users Before updating the UI experience, review the [key features, limitations]({{navprefix}}/{{full-app-customize}}#_ui_experience_modes), and available SDK controls for customizing [navigation]({{navprefix}}/{{customize-nav-full-embed}}) and the [home page]({{navprefix}}/{{customize-homepage-full-embed}}). For more information about the layout and UI elements in the V3 experience, refer to the [ThoughtSpot Product Documentation](https://docs.thoughtspot.com/cloud/latest/thoughtspot-homepage). ### 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: ```JavaScript // 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]({{navprefix}}/{{customize-nav-full-embed}}). ## Customize home page experience For information about the home page components and the related customization settings in the SDK, see [Customize home page experience]({{navprefix}}/{{customize-homepage-full-embed}}). ## 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]({{navprefix}}/{{set-default-page}}) 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]({{navprefix}}/{{AppViewConfig}}#_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: ```javascript 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]({{navprefix}}/{{css-customization}}) allows overriding default styles in ThoughtSpot application pages. You can also use [Theme Builder]({{navprefix}}/{{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. ```css .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](https://github.com/thoughtspot/custom-css-demo/blob/main/complete.css) on the ThoughtSpot GitHub repository. You can also declare direct selectors using the [rules]({{navprefix}}/{{css-customization}}#_css_rules_using_selectors) 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 - [Embed full application]({{navprefix}}/{{full-embed}}) - [Create dynamic menus and navigation]({{navprefix}}/{{page-navigation}}) - [AppViewConfig reference page]({{navprefix}}/{{AppViewConfig}}) - [Host events]({{navprefix}}/{{HostEvent}}) - [Embed Events]({{navprefix}}/{{EmbedEvent}}) ## Related resources - [Customize the navigation for full application embedding]({{navprefix}}/{{customize-nav-full-embed}}) - [Customize the home page for full application embedding]({{navprefix}}/{{customize-homepage-full-embed}}) - [Embed full application]({{navprefix}}/{{full-embed}}) - [AppViewConfig reference](https://developers.thoughtspot.com/docs/typedoc/interfaces/AppViewConfig.html)