# Visual Embed Playground > For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt) Source: https://developers.thoughtspot.com/docs/dev-playground # Visual Embed Playground The **Playground** allows developers to try Visual Embed APIs, play with the code, and view results instantly. You can explore the following SDK components in the Playground. - [Search]({{navprefix}}/{{developer-playground}}#playground-search) - [Spotter]({{navprefix}}/{{developer-playground}}#playground-spotter) - [Liveboards]({{navprefix}}/{{developer-playground}}#playground-liveboard) - [Visualizations]({{navprefix}}/{{developer-playground}}#playground-visualization) - [Full application]({{navprefix}}/{{developer-playground}}#playground-fullapp) ## Search To explore the Search embed function: 1. Go to **Playground** > **Search**. 2. Select a data source or a saved Answer. 3. Try out the following customization settings and click **Run** to preview the result.

Collapse data panel
Minimizes the data panel on the left navigation bar.

Hide data panel

Hides the default data panel. You can use this function to create a custom data panel when embedding the search module in your application.

Try it out

Display data as a table

Displays the Answer data generated from a query in the tabular format:

Try it out

Add search tokens

Allows passing search tokens as a query string and executing search.

The following example shows how to create a searchTokenString and execute search:

searchOptions: {
        searchTokenString: '[product][sales][date].daily',
        executeSearch: true,
    }

Try it out

Hide Search bar

Hides the Search bar and renders the Search page without the Search Bar. If you are using a saved Answer as a data source, the chart/table will be visible.

Try it out

Set runtime filters and parameters

Enables runtime filters and Parameters.

To apply runtime filters, pass the columnName, operator, and value parameters in the runtimeFilters object.

runtimeFilters: [{
        columnName: 'color',
        operator: RuntimeFilterOp.EQ,
        values: ['red']
    }]

To apply Parameters, pass the name and value attributes in the runtimeParameters object.

runtimeParameters: [{
        name: 'Date List Param',
        value: 1656914873
    }]

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options that appear in More … or the contextual menu.

NOTE: Use either visibleActions or hiddenActions to show or hide actions in the UI. The SDK does not support simultaneous execution of visibleActions and hiddenActions APIs.

To define visible actions, specify the action strings in the visibleActions attribute.
Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.Download,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu, specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.
To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.
```
hiddenActions: [Action.DownloadAsPDF]
```
NOTE: ThoughtSpot automatically assigns an action ID based on the name you assign to a custom action. For example, if you set the name of a custom action as Send Email, ThoughtSpot sets the ID for this action as send-email by default. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.
For more information, see Show or hide actions.

Try it out

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the data payload generated after a custom action is clicked.

Try it out

Use Host Event

Allows registering a host event. The registered event triggers an action in the embedded view when Try Event is clicked.

Try it out

Apply custom styles

Shows the code for interface customization. You can define custom styles and define CSS variables to change the look and feel of the embedded components. For more information about CSS variables, styles, and customizations options, see Customize CSS.

Try it out

## Spotter To explore the Spotter embedding features: 1. Go to **Playground** > **Spotter**. 2. Select a data source. 3. [Try out]({{previewPrefix}}/playground/sage) the following customization settings and click **Run** to preview the result.

Disable changing model

Disables data source selection.

Hide model selector
Hides the data source selector.

Add search query

Allows you to define search query.

searchOptions: {
    searchQuery: 'average sales by country and product type'
}

Set runtime filters and parameters

Enables runtime filters and Parameters.

To apply runtime filters, pass the columnName, operator, and value parameters in the runtimeFilters object.

runtimeFilters: [{
    columnName: 'color',
    operator: RuntimeFilterOp.EQ,
    values: ['red']
}]

To apply Parameters, pass the name and value attributes in the runtimeParameters object.

runtimeParameters: [{
    name: 'Date List Param',
    value: 1656914873
}]

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options that appear in More … or the contextual menu.

NOTE: Use either visibleActions or hiddenActions to show or hide actions in the UI. The SDK does not support simultaneous execution of visibleActions and hiddenActions APIs.

To define visible actions, specify the action strings in the visibleActions attribute.
Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.Download,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu, specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.
To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.
```
hiddenActions: [Action.DownloadAsPDF]
```
NOTE: ThoughtSpot automatically assigns an action ID based on the name you assign to a custom action. For example, if you set the name of a custom action as Send Email, ThoughtSpot sets the ID for this action as send-email by default. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.
For more information, see Show or hide actions.

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the data payload generated after a custom action is clicked.

Use Host Event

Allows registering a host event. The registered event triggers an action in the embedded view when Try Event is clicked.

Apply custom styles

## Visualization To explore the visualization embedding function: 1. Go to **Playground** > **Visualization**. 2. Select a Liveboard or visualization. 3. Try using any of the following customization settings and click **Run** to preview the result.

Set runtime filters and parameters

Enables runtime filters and Parameters.

To apply runtime filters, pass the columnName, operator, and value parameters in the runtimeFilters object.

runtimeFilters: [{
    columnName: 'color',
    operator: RuntimeFilterOp.EQ,
    values: ['red']
}]

To apply Parameters, pass the name and value attributes in the runtimeParameters object.

runtimeParameters: [{
    name: 'Date List Param',
    value: 1656914873
}]

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options that appear in More … or the contextual menu.

NOTE: Use either visibleActions or hiddenActions to show or hide actions in the UI. The SDK does not support simultaneous execution of visibleActions and hiddenActions APIs.

To define visible actions, specify the action strings in the visibleActions attribute.
Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.Download,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu, specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.
To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.
```
hiddenActions: [Action.DownloadAsPDF]
```
NOTE: ThoughtSpot automatically assigns an action ID based on the name you assign to a custom action. For example, if you set the name of a custom action as Send Email, ThoughtSpot sets the ID for this action as send-email by default. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.
For more information, see Show or hide actions.

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the data payload generated after a custom action is clicked.

Try it out

Use Host Event

Allows registering a host event. The registered event triggers an action in the embedded view when Try Event is clicked.

Try it out

Apply custom styles

Try it out

## Liveboard To explore the Liveboard embedding SDK functions: 1. Go to **Playground** > **Liveboard**. 2. Select a Liveboard. 3. Try using any of the following customization settings and click **Run** to preview the result.

Full Height

Dynamically resizes the embedded Liveboard frame according to the height of the Liveboard.

If the embedded Liveboard does not fit vertically within your application page, a second scroll bar may appear. When Full Height is selected, the embedded Liveboard container is automatically adjusted according to the height of the Liveboard.

Try it out

Customize Liveboard header

Allows customizing the Liveboard header. The following settings are available:

Show or hide Liveboard title and description
Show or hide the Liveboard header
Make the Liveboard header sticky as the user scrolls page
Show or hide tab panel
Show or hide specific tabs

Try it out

Set runtime filters and parameters

Enables runtime filters and Parameters.

To apply runtime filters, pass the columnName, operator, and value parameters in the runtimeFilters object.

runtimeFilters: [{
    columnName: 'color',
    operator: RuntimeFilterOp.EQ,
    values: ['red']
}]

To apply Parameters, pass the name and value attributes in the runtimeParameters object.

runtimeParameters: [{
    name: 'Date List Param',
    value: 1656914873
}]

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options that appear in More … or the contextual menu.

NOTE: Use either visibleActions or hiddenActions to show or hide actions in the UI. The SDK does not support simultaneous execution of visibleActions and hiddenActions APIs.

To define visible actions, specify the action strings in the visibleActions attribute.
Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.Download,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu, specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.
To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.
```
hiddenActions: [Action.DownloadAsPDF]
```
NOTE: ThoughtSpot automatically assigns an action ID based on the name you assign to a custom action. For example, if you set the name of a custom action as Send Email, ThoughtSpot sets the ID for this action as send-email by default. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.
For more information, see Show or hide actions.

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the data payload generated after a custom action is clicked.

Try it out

Use Host Event

Allows registering a host event. The registered event triggers an action in the embedded view when Try Event is clicked.

Try it out

Apply custom styles

Try it out

## Full application To explore the full ThoughtSpot embedding function: 1. Go to **Playground** > **Full app**. 2. Select a tab to set a default page view for embedded application users. 3. Try using any of the following customization settings and click **Run** to preview the result.

Customize app navigation
Allows customizing navigation controls. Applicable to new homepage and navigation experience only.

The following settings are available:

Show or hide the left navigation module and the application switcher
Show or hide the menu options in the left navigation panel
Show or hide the Org switcher
Show or hide the user profile and help icons

Customize home page modules
Allows customizing the visibility of modules on the home page. Applicable to new homepage and navigation experience only.

Navigate to URL

Allows you to define a specific URL path for loading a ThoughtSpot application page.

For example, you can set the path to a specific Liveboard page as shown here:

path: 'pinboard/d084c256-e284-4fc4-b80c-111cb606449a'

If both pageID and path attributes are defined, the path definition takes precedence.

Set runtime filters and parameters

Enables runtime filters and Parameters.

To apply runtime filters, pass the columnName, operator, and value parameters in the runtimeFilters object.

runtimeFilters: [{
    columnName: 'color',
    operator: RuntimeFilterOp.EQ,
    values: ['red']
}]

To apply Parameters, pass the name and value attributes in the runtimeParameters object.

runtimeParameters: [{
    name: 'Date List Param',
    value: 1656914873
}]

Try it out

Modify available actions

Allows you to show, hide, or disable the primary buttons and menu options that appear in More … or the contextual menu.

NOTE: Use either visibleActions or hiddenActions to show or hide actions in the UI. The SDK does not support simultaneous execution of visibleActions and hiddenActions APIs.

To define visible actions, specify the action strings in the visibleActions attribute.
Note that the UI displays only the actions specified in this attribute and does not show the other available actions. If you do not specify any actions and leave it as an empty array, no actions will appear in the UI.
```
visibleActions: [Action.Save,Action.ShowUnderlyingData,Action.Download,Action.DownloadAsPDF]
```
To disable an action, specify the action string in the disabledActions attribute. For example, to disable Download in the More menu, specify Action.Download in the disabledActions attribute. You can also set a tooltip for the disabled menu item in the disabledActionReason attribute.
To hide an action menu item, specify the action text string in the hiddenActions attribute. Use this attribute only if the visibleActions attribute is not defined.
```
hiddenActions: [Action.DownloadAsPDF]
```
NOTE: ThoughtSpot automatically assigns an action ID based on the name you assign to a custom action. For example, if you set the name of a custom action as Send Email, ThoughtSpot sets the ID for this action as send-email by default. To disable, hide, or show a custom action in the embedded UI, specify the custom action ID in the disabledActions, hiddenActions, and visibleActions array.
For more information, see Show or hide actions.

Handle custom actions

Allows you to view the code for a custom action event. If the embedded instance has a custom action, use this checkbox to view the data payload generated after a custom action is clicked.

Try it out

Use Host Event
Allows registering a host event. The registered event triggers an action in the embedded view when Try Event is clicked.

Try it out

Apply custom styles

Try it out

## SpotterCode panel If SpotterCode Agent for Visual Embed Playground is enabled on your instance, the Playground page displays the SpotterCode slideout panel on the right side of the Playground area. SpotterCode Agent is an AI-powered coding assistant built into the Visual SDK Playground to help developers build embedding code rapidly and iterate on embed configurations without writing boilerplate code manually. To open SpotterCode in the Playground: 1. Go to **Develop** > **Playground** > **Visual embed**. 2. Select the component you want to embed. 3. Click **SpotterCode** on the right side of the Playground to open the panel. The SpotterCode panel opens on the right. The header shows **SpotterCode** on the left and a collapse/expand control on the right. ### Quick starter prompts The SpotterCode panel displays a set of quick starter prompts for each embed component by default. | Embed component | Quick-starter prompts | | --- | --- | | **Search Data** | - Embed a search view with runtime filters - Display search results in a structured table with sorting enabled - Keep the data panel collapsed for a cleaner search view | | **Liveboard** | - Embed this Liveboard with default filters - Add a custom action to send Liveboard data to Slack - Apply runtime filters to this Liveboard | | **Visualization** | - Embed a single visualization from this Liveboard - Add a custom action to send this chart data to Slack - Apply runtime filters to this visualization | | **Full App** | - Embed full app with navigation enabled - Enable Spotter in the embedded app - Change the "Edit" label to "Modify" | | **Spotter** | - Embed Spotter as an AI assistant in my app - Configure Spotter to open in a side panel - Add a button to launch Spotter in the UI | When a user clicks a quick-starter prompt, a query is sent to SpotterCode. ### Response generation The chat interface includes the following options: - To get precise results: - Be specific about the component, configuration, and desired behavior. - Use one prompt per change. Break complex requests into smaller sequential steps. For prompt writing tips and examples, see [SpotterCode prompting guide]({{navprefix}}/{{spottercode-prompt-guide}}). - To edit a request, click the edit icon to modify your prompt and resend it. - To clear a chat and reset the conversation context, click **Reset chat**. - To cancel a request or stop code generation, click the pause button in the chat prompt. When SpotterCode processes your prompt, it: 1. generates the embed code for your request. 2. updates the code editor panel on the left with the generated code. 3. scrolls automatically to show new content in the chat panel. After SpotterCode updates the code editor: 1. Review the generated code in the left panel. If SpotterCode detects a conflict between the generated code and the existing code in the editor, it does not update the editor. Ensure that you review the current code in the editor, clear conflicting sections, and try your prompt again. 2. Click **Run** to execute the code and preview the embedded component in the preview panel. 3. Iterate by entering a follow-up prompt or editing the code directly. ## Additional resources For more information about the configuration settings and parameters, see the following pages: - [SearchViewConfig]({{navprefix}}/{{SearchViewConfig}}) - [SpotterAgentEmbedViewConfig]({{navprefix}}/{{SpotterAgentEmbedViewConfig}}) - [LiveboardViewConfig](#LiveboardViewConfig) - [AppViewConfig]({{navprefix}}/{{AppViewConfig}}) See the following pages for information on how to embed a ThoughtSpot component: - [Embed ThoughtSpot Search]({{navprefix}}/{{embed-search}}) - [Embed Spotter]({{navprefix}}/{{embed-spotter}}) - [Embed a visualization]({{navprefix}}/{{embed-a-viz}}) - [Embed a Liveboard]({{navprefix}}/{{embed-pinboard}}) - [Embed full application]({{navprefix}}/{{full-embed}})