# Customize the Spotter embed view

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/customize-spotter-embed

# Customize the Spotter embed view

The Visual Embed SDK provides a vast set of configuration settings and object properties to customize the Spotter UI and chat experience for your embedding application users.

## Spotter interface in the embedded view

When you [embed Spotter]({{navprefix}}/{{embed-spotter}}) in your application, you’ll notice that the embedded component loads an initial page with a prompt interface. The look and feel of this page varies depending on the Spotter version used for embedding.

### Default experience

The default experience in embedded view is the classic Spotter interface with an initial page that includes a prompt bar for user input, a data source selector, and the UI options to preview data and reset a Spotter session.

\+ If Spotter 2 is enabled on your ThoughtSpot instance, additional controls such as Quick search and Deep analysis toggle switch, and the automatic data model selection option are available.

+

![Default Spotter interface](/docs/doc-images/images/spotter-default-interface.png)

### Spotter 3 experience

If your ThoughtSpot instance has Spotter 3 experience enabled, you can enable the same experience in your embed, which includes additional options to add files, connectors, and improved conversational experience. To enable Spotter 3 experience, set `updatedSpotterChatPrompt` to `true` in the SDK.

```JavaScript
const spotterEmbed = new SpotterEmbed(document.getElementById('ts-embed'), {
    worksheetId: '<datasource-guid>', // Replace with GUID of the data source
    // Enable the updated Spotter chat prompt experience.
    updatedSpotterChatPrompt: true,
    // Show chat history panel
    spotterSidebarConfig: {
        enablePastConversationsSidebar: true,
      },
    // ...other embed configuration attributes
});
```

![Spotter 3 experience](/docs/doc-images/images/spotter3-interface.png)

### New Spotter 3 visual experience

On instances with ThoughtSpot Cloud 26.9.0.cl, the new redesigned Spotter experience is enabled by default. The new Spotter experience includes the updated conversation layout and starter-prompt pills. To enable the new visual experience, set `updatedSpotterExperience` to `true` in the `SpotterEmbed` configuration.

```JavaScript
const spotterEmbed = new SpotterEmbed('#ts-embed', {
    worksheetId: '<datasource-guid>', // Replace with GUID of the data source
    // Enable Spotter 3 chat experience.
    updatedSpotterChatPrompt: true,
    // Enable new Spotter visual experience
    updatedSpotterExperience: true,
    // Show chat history panel
    spotterSidebarConfig: {
        enablePastConversationsSidebar: true,
      },
    // ...other embed configuration attributes
});
```

![New Spotter experience](/docs/doc-images/images/spotter-new-experience.png)

In the new experience, the + icon displays a menu with the following options:

-   **Add files** from local directory
    
-   **Connectors** to select available connectors
    
-   **Deep analysis** toggle to switch between the quick search and research mode.
    

You can customize the chat panel and conversational experience further. For more information, see [Customizing the Spotter chat experience]({{navprefix}}/{{customize-spotter-chat-experience}}).

## Customizing Spotter experience

If you want to customize specific features or UI elements, refer to the following documentation:

-   [Customizing the Spotter chat experience]({{navprefix}}/{{customize-spotter-chat-experience}})  
    For information on customizing the chat panel, data model selection, starter prompts, file uploads, MCP connectors, and Spotter branding.
    
-   [Customizing the Spotter sidebar panel]({{navprefix}}/{{customize-spotter-sidebar}})  
    For information on customizing the sidebar panel and the chat history panel, including menu actions and app interactions.
    
-   [Customizing Spotter conversation sharing]({{navprefix}}/{{customize-spotter-sharing}})  
    For information on customizing the conversation sharing experience, sharing links, and app interactions.
    
-   [Customizing Spotter Analysts in the embedded view]({{navprefix}}/{{customize-spotter-analysts}})  
    For information on customizing the Spotter Analysts panel and dashboard.
    

## Customizing styles and interface elements using CSS variables

The Visual Embed SDK provides a comprehensive style customization framework for overriding icons, text strings, and the appearance of UI elements.

The `customizations` object allows you to add custom CSS definitions, replace text strings, and override icons. If your customization framework uses external sources or hosting servers, ensure they are added to the CSP allowlist. For more information, see the [CSS customization framework]({{navprefix}}/{{css-customization}}), [Customize text strings]({{navprefix}}/{{customize-text-strings}}), and [Customize icons]({{navprefix}}/{{customize-icons}}) sections.

### CSS variables for style customization

You can customize the background color of the conversation and prompt panels, button elements, and the components of the charts generated by Spotter using [CSS variables]({{navprefix}}/{{customize-css-styles}}).

If Theme Builder is enabled on your ThoughtSpot instance, you can find the variables for Spotter customization by navigating to **Develop** > **Customizations** > **Theme Builder** in the ThoughtSpot UI and downloading the CSS variables.

```JavaScript
// Initialize the SDK with CSS variables with custom style definitions
init({
  // ...
  customizations: {
    style: {
      // Use CSS variables to customize styles
      customCSS: {
        variables: {
          "--ts-var-button--primary-background": "#008000",
          "--ts-var-spotter-prompt-background": "#F0EBFF",
          "--ts-var-root-color": "#E3D9FC",
          "--ts-var-root-background": "#F7F5FF",
        },
      },
    },
  },
});
```

### Customizing text strings

To replace text strings, you can use the `stringIDs` and `strings` properties in the content customization object.

The following example shows how to replace "Spotter" and other text strings on the Spotter interface.

```JavaScript
// Initialize the SDK with custom text string replacements
init({
    // ...
    customizations: {
        content: {
            // Use the strings object to replace the visible UI text with custom labels.
            strings: {
                // Change all instances of "Spotter" to "dataAnalyzer"
                "Spotter": "dataAnalyzer",
            }
        }
    }
});
```

## Additional resources

-   [Customizing the Spotter chat experience]({{navprefix}}/{{customize-spotter-chat-experience}})
    
-   [Customizing the Spotter sidebar panel]({{navprefix}}/{{customize-spotter-sidebar}})
    
-   [Customizing Spotter conversation sharing]({{navprefix}}/{{customize-spotter-sharing}})
    
-   [Customizing Spotter Analysts in the embedded view]({{navprefix}}/{{customize-spotter-analysts}})
    
-   [SpotterEmbed classes and methods](https://developers.thoughtspot.com/docs/Class_SpotterEmbed)
    
-   [Configuration options for Spotter interface customization](https://developers.thoughtspot.com/docs/Interface_SpotterEmbedViewConfig)
    
-   [Developer examples](https://github.com/thoughtspot/developer-examples/tree/main/visual-embed/spotter/spotter-embed)
    
-   [Spotter Product Documentation](https://docs.thoughtspot.com/cloud/latest/spotter)