# Customize home page experience > For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt) Source: https://developers.thoughtspot.com/docs/customize-homepage-experience # Customize home page experience Developers can customize the home page experience in full application embedding to show either the V3 modular layout or the V4 focused home page. > **IMPORTANT:** Starting from Visual Embed SDK 1.51.0, the classic v1 and v2 navigation and homepage experience are deprecated. Deployments using full application embed will be upgraded to the V3 navigation and home page experience. When your application is switched to V3 experience, you can choose to use the HomePage.ModularWithStylingChanges (V3) or HomePage.Focused (V4) experience. ## Home page layout In the classic (V1) experience, the home page has a static layout and does not support SDK modular customization settings. The SDK provides the [homePage]({{navprefix}}/{{HomePage}}) attribute to set the desired home page layout: - `homePage: HomePage.Focused` Early Access Enables the V4 home page experience. - `homePage: HomePage.ModularWithStylingChanges` Enables the V3 modular home page experience with customizable components, styling options, and enhanced layout. This experience includes charts in the **Watchlist** module that are arranged horizontally. Each chart includes menu actions to remove the KPI charts from the watchlist and create alerts, and allows drag-and-drop reordering. ### V4 focused home page experience The V4 focused home page (`HomePage.Focused`) provides a contemporary experience designed to highlight the most relevant content immediately. It provides quick access to the Spotter interface and consolidates the **Watchlist KPIs** and **Recents** sections into a unified, focused layout. The following example shows how to enable the V4 focused home page experience: ```javascript import { AppEmbed, PrimaryNavbarVersion, // Enum for V3 navigation experience HomePage, // Enum for home page experience settings HomepageModule // Enum for home page modules } from '@thoughtspot/visual-embed-sdk'; const embed = new AppEmbed("#embed", { // Enable V3 navigation and V4 home page experience discoveryExperience: { primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enable V3 navigation experience homePage: HomePage.Focused, // Enable V4 focused home page experience }, showPrimaryNavbar: true, //... other embed view configuration attributes }); ``` ## Customization settings for home page The following customization settings are available for the modular home page in the V3 and V4 experience modes. | Feature | V3 experience | `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 | ## Control the visibility of home page modules In the V3 experience mode, the home page includes sections such as **Watchlist**, **Favorites**, **Library**, **Trending** charts, and more. You can hide a specific section of the home page and reorder these modules as needed using the [hiddenHomepageModules]({{navprefix}}/{{AppViewConfig}}#_hiddenhomepagemodules) and [reorderedHomepageModules]({{navprefix}}/{{AppViewConfig}}#_reorderedhomepagemodules) configuration options in the embed SDK. The `hiddenHomepageModules` and `reorderedHomepageModules` attributes support the following settings: ### `hiddenHomepageModules` ```TypeScript hiddenHomepageModules?: HomepageModule[]; ``` Hides specific modules on the home page. Applies to V3 (`HomePage.ModularWithStylingChanges`) and V4 (`HomePage.Focused`) home page experiences. ### `reorderedHomepageModules` ```TypeScript reorderedHomepageModules?: HomepageModule[]; ``` Reorders modules on the home page. Applies to V3 (`HomePage.ModularWithStylingChanges`) only. ### `homePageModules` ```TypeScript homePageModules?: HomepageModule[]; ``` Specifies which modules to show on the home page. Applies to V3 (`HomePage.ModularWithStylingChanges`) only. ## `HomepageModule` enum values | Value | Description | | --- | --- | | `HomepageModule.Watchlist` | The **Watchlist** module showing pinned objects. | | `HomepageModule.MyLibrary` | The **My Library** module showing user’s content. | | `HomepageModule.Learning` | The **Learning** module with onboarding content. | | `HomepageModule.Trending` | The **Trending** module showing trending content. | | `HomepageModule.Answers` | The **Answers** module showing recent Answers. | ## `HomeLeftNavItem` enum values Use `HomeLeftNavItem` to customize the left navigation panel items on the home page. Applies to V3 (`HomePage.ModularWithStylingChanges`) and V4 (`HomePage.Focused`) home page experiences. | Value | Description | | --- | --- | | `HomeLeftNavItem.Home` | The Home item in the left navigation panel. | | `HomeLeftNavItem.Liveboards` | The Liveboards item in the left navigation panel. | | `HomeLeftNavItem.Answers` | The Answers item in the left navigation panel. | | `HomeLeftNavItem.SpotIQ` | The SpotIQ item in the left navigation panel. | | `HomeLeftNavItem.MonitorAlerts` | The Monitor Alerts item in the left navigation panel. | ### Customize home page modules in the V3 experience The following example shows the configuration properties for customizing the home page modules: ```javascript import { AppEmbed, // Main class to embed the full ThoughtSpot app PrimaryNavbarVersion, // Enum for V3 experience setting HomePage, // Enum for home page experience settings HomepageModule // Enum for home page modules } from '@thoughtspot/visual-embed-sdk'; const embed = new AppEmbed("#embed", { // Enable V3 navigation and home page experience discoveryExperience: { primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enables V3 experience homePage: HomePage.ModularWithStylingChanges, // Enables V3 home page }, // Hide modules from the home page hiddenHomepageModules: [ HomepageModule.Learning, HomepageModule.Trending ], // Custom order for visible modules reorderedHomepageModules: [ HomepageModule.Search, HomepageModule.Favorite, HomepageModule.Watchlist, HomepageModule.MyLibrary ], //... other view configuration properties }); ``` ### Customize the search experience on home page You can set the search experience on the home page to function as an object search bar that allows finding popular objects, or as an AI search interface that allows natural language queries or Spotter sessions. You can also choose to hide it from the home page. To configure your preference, specify the following values in the `homePageSearchBarMode` attribute. | Search bar mode | Description | | --- | --- | | `HomePageSearchBarMode.AI_ANSWER` | Sets the natural language search bar that allows queries in natural language. If Spotter is enabled on your instance, you can use this setting to set the Spotter search bar on the home page. | | `HomePageSearchBarMode.OBJECT_SEARCH` | Enables object search that allows users to find objects from the library. | | `HomePageSearchBarMode.NONE` | Hides the search bar on the home page. Note that it only hides the Search bar on the **Home** page and doesn’t affect the Object Search bar visibility on the top navigation bar. To hide the search bar on the home page, you can also use the [homepageModule: HomepageModule.Search]({{navprefix}}/{{customize-homepage-full-embed}}#_control_the_visibility_of_home_page_modules) setting. | > **NOTE:** If your instance is using the Classic (v1) experience and if the homePageSearchBarMode parameter does not set the search context defined in the attribute, set isUnifiedSearchExperienceEnabled to false. #### Examples The following examples show code snippets to set the home page search bar mode to Spotter or AI search in different experience modes: V3 experience ```javascript import { AppEmbed, PrimaryNavbarVersion, // Enum for V3 navigation experience HomePage, // Enum for home page experience settings HomePageSearchBarMode // Import the enum for search bar mode options } from '@thoughtspot/visual-embed-sdk'; const embed = new AppEmbed("#embed", { discoveryExperience: { primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enable V3 experience homePage: HomePage.ModularWithStylingChanges // Enable V3 home page experience }, // Set the home page search bar to show the Spotter / AI search bar homePageSearchBarMode: HomePageSearchBarMode.AI_ANSWER // Other view configuration attributes }); ``` V4 experience ```javascript import { AppEmbed, PrimaryNavbarVersion, // Enum for V3 navigation experience HomePage, // Enum for home page experience settings HomePageSearchBarMode // Import the enum for search bar mode options } from '@thoughtspot/visual-embed-sdk'; const embed = new AppEmbed("#embed", { discoveryExperience: { primaryNavbarVersion: PrimaryNavbarVersion.Sliding, // Enable V3 experience homePage: HomePage.Focused, // Enable V4 home page experience }, // Set the home page search bar to show the Spotter / AI search bar homePageSearchBarMode: HomePageSearchBarMode.AI_ANSWER // Other view configuration attributes }); ``` ## Additional resources See also: - [Embed full application]({{navprefix}}/{{full-embed}}) - [Customize full application embed]({{navprefix}}/{{full-app-customize}}) - [AppViewConfig reference page]({{navprefix}}/{{AppViewConfig}}) - [Host events]({{navprefix}}/{{HostEvent}}) - [Embed Events]({{navprefix}}/{{EmbedEvent}}) - [Actions]({{navprefix}}/{{Action}})