Customize the Spotter embed view

Table of Contents

Spotter interface in the embedded view
Customizing Spotter experience
Customizing styles and interface elements using CSS variables
- CSS variables for style customization
- Customizing text strings
Additional resources

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 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.

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.

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

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.

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

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.

Customizing Spotter experience🔗

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

Customizing the 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
For information on customizing the sidebar panel and the chat history panel, including menu actions and app interactions.
Customizing Spotter conversation sharing
For information on customizing the conversation sharing experience, sharing links, and app interactions.
Customizing Spotter Analysts in the embedded view
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, Customize text strings, and 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.

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.

// 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.

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