Skip to content
4 changes: 2 additions & 2 deletions modules/ROOT/pages/api-changelog.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,9 @@ For more information, see xref:full-app-customize.adoc#_search_components[Search
|====
|[tag greenBackground]#NEW FEATURE# a| You can now embed the following ThoughtSpot Spotter components in your app:

* `ConversationEmbed` +
* `SpotterEmbed` +
Embeds Spotter conversation interface in your app
* `BodylessConversation` +
* `SpotterAgentEmbed` +
Creates a conversation component without the body, which can be integrated into chatbots or other conversational apps.

For more information, see xref:embed-spotter.adoc[Embed Spotter] and xref:spotter-in-custom-chatbot.adoc[Integrate Spotter into your chatbot].
Expand Down
2 changes: 1 addition & 1 deletion modules/ROOT/pages/developer-playground.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -435,7 +435,7 @@ For more information about the configuration settings and parameters, see the fo

* xref:SearchViewConfig.adoc[SearchViewConfig]
* xref:SageViewConfig.adoc[SageViewConfig]
* xref:BodylessConversationViewConfig.adoc[BodylessConversationViewConfig]
* xref:SpotterAgentEmbedViewConfig.adoc[SpotterAgentEmbedViewConfig]
* xref:LiveboardViewConfig[LiveboardViewConfig]
* xref:AppViewConfig.adoc[AppViewConfig]

Expand Down
50 changes: 25 additions & 25 deletions modules/ROOT/pages/embed-action-ref.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -241,24 +241,24 @@ The following action IDs are available for the Spotter component:
[options='header']
|=====
|Action string in SDK| Required SDK library|Action label in the UI
|xref:Action.adoc#_previewdataspotter[`Action.PreviewDataSpotter`] | `ConversationEmbed` +
|xref:Action.adoc#_previewdataspotter[`Action.PreviewDataSpotter`] | `SpotterEmbed` +
`AppEmbed` |*Preview data* action on the Spotter conversation panel.
Shows the underlying data used for Spotter queries.
|xref:Action.adoc#_resetspotterchat[`Action.ResetSpotterChat`] |`ConversationEmbed` +
|xref:Action.adoc#_resetspotterchat[`Action.ResetSpotterChat`] |`SpotterEmbed` +
`AppEmbed` | *Preview data* action on the Spotter conversation panel.
Shows the underlying data used for Spotter queries.
|xref:Action.adoc#_editpreviousprompt[`Action.EditPreviousPrompt`] |`ConversationEmbed` +
|xref:Action.adoc#_editpreviousprompt[`Action.EditPreviousPrompt`] |`SpotterEmbed` +
`AppEmbed` | The edit icon on the Spotter prompt panel.
Allows editing the prompt sent to Spotter.
|xref:xref:Action.adoc#_deletepreviousprompt[`Action.DeletePreviousPrompt`] |`ConversationEmbed` +
|xref:xref:Action.adoc#_deletepreviousprompt[`Action.DeletePreviousPrompt`] |`SpotterEmbed` +
`AppEmbed` | The delete icon on the Spotter prompt panel.
Allows deleting the prompt sent to Spotter.
|xref:xref:Action.adoc#_spotterfeedback[`Action.SpotterFeedback`] |`ConversationEmbed` +
|xref:xref:Action.adoc#_spotterfeedback[`Action.SpotterFeedback`] |`SpotterEmbed` +
`AppEmbed` | The Spotter feedback widget in the generated Answer.
Allows sending feedback about the response received from Spotter.
|=====

For information about the action IDs available for Answers generated from Spotter (`ConversationEmbed`), see xref:embed-action-ref#answer-actions[Answers].
For information about the action IDs available for Answers generated from Spotter (`SpotterEmbed`), see xref:embed-action-ref#answer-actions[Answers].

[#answer-actions]
== Answers
Expand All @@ -268,38 +268,38 @@ The following actions are available on saved Answers and the Answers generated b
[options='header']
|=====
|Action string in SDK| Required SDK library|Action label in the UI
|xref:Action.adoc#_choosedatasources[`Action.ChooseDataSources`]| `ConversationEmbed` +
|xref:Action.adoc#_choosedatasources[`Action.ChooseDataSources`]| `SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`SearchBarEmbed` +
`AppEmbed`|The *Choose sources* option in the Search page and Spotter conversation panel. +
Allows selecting data sources to query data. +
|xref:Action.adoc#_addformula[`Action.AddFormula`]| `ConversationEmbed` +
|xref:Action.adoc#_addformula[`Action.AddFormula`]| `SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`SearchBarEmbed` +
`AppEmbed`| *Create formula* option on the data panel of an Answer page +
Allows adding formulas to a search query. +
|xref:Action.adoc#_addparameter[`Action.AddParameter`]|`ConversationEmbed` +
|xref:Action.adoc#_addparameter[`Action.AddParameter`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed`| *Add Parameters* option in the data panel on a Search page +
Allows adding parameters to an Answer.

|xref:Action.adoc#_answerchartswitcher[`Action.AnswerChartSwitcher`]|`ConversationEmbed` +
|xref:Action.adoc#_answerchartswitcher[`Action.AnswerChartSwitcher`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` | Chart toggle icon +
Allows switching to the table or chart mode.
|xref:Action.adoc#_edit[`Action.Edit`]| `ConversationEmbed` +
|xref:Action.adoc#_edit[`Action.Edit`]| `SpotterEmbed` +
`AppEmbed` | *Edit* action on charts and tables generated from a Spotter query.
Opens a table or chart in the edit mode.
|xref:Action.adoc#_pin[`Action.Pin`]| `ConversationEmbed` +
|xref:Action.adoc#_pin[`Action.Pin`]| `SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` | *Pin* action on the visualization generated from a Spotter query.
Allows adding a visualization generated from Spotter to a Liveboard.
|xref:Action.adoc#_save[`Action.Save`]| `ConversationEmbed` +
|xref:Action.adoc#_save[`Action.Save`]| `SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` | *Save* action on the visualization generated from a Spotter query
Expand All @@ -320,7 +320,7 @@ Allows generating SpotIQ analyses. Available as a primary button and contextual
`AppEmbed`|*Share* +
Allows you to share an Answer with another user or group.

|xref:Action.adoc#_querydetailsbuttons[`Action.QueryDetailsButtons`]| `ConversationEmbed` +
|xref:Action.adoc#_querydetailsbuttons[`Action.QueryDetailsButtons`]| `SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed`
Expand All @@ -329,7 +329,7 @@ a|The *Query visualizer* and *Query SQL* buttons in *Query details* on the Answe
* The *Query visualizer* button displays the tables and filters used in a search query. +
* The *Query SQL* button displays the SQL statements used in a search query to fetch data. +

|xref:Action.adoc#_download[`Action.Download`]|`ConversationEmbed` +
|xref:Action.adoc#_download[`Action.Download`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` a|*Download* +
Expand All @@ -345,28 +345,28 @@ If you are using Visual Embed SDK version 1.21.0 or later to embed Liveboard, Se
** `Action.DownloadAsXlsx` +
** `Action.DownloadAsPng`

|xref:Action.adoc#_downloadascsv[`Action.DownloadAsCsv`]|`ConversationEmbed` +
|xref:Action.adoc#_downloadascsv[`Action.DownloadAsCsv`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` |*Download* > *CSV* +
Downloads the answer data in the CSV file format.
|xref:Action.adoc#_downloadasxlsx[`Action.DownloadAsXLSX`]|`ConversationEmbed` +
|xref:Action.adoc#_downloadasxlsx[`Action.DownloadAsXLSX`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` |
*Download* > *XLSX* +
Downloads the answer data in the XLSX file format.
|xref:Action.adoc#_downloadaspdf[`Action.DownloadAsPdf`]|`ConversationEmbed` +
|xref:Action.adoc#_downloadaspdf[`Action.DownloadAsPdf`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` |*Download* > *PDF* +
Downloads the answer data as a PDF file. Available only for tables.
|xref:Action.adoc#_downloadaspng[`Action.DownloadAsPng`]|`ConversationEmbed` +
|xref:Action.adoc#_downloadaspng[`Action.DownloadAsPng`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` |*Download* > *PNG* +
Downloads the chart as a PNG file. Available only for charts.
|xref:Action.adoc#_showunderlyingdata[`Action.ShowUnderlyingData`]|`ConversationEmbed` +
|xref:Action.adoc#_showunderlyingdata[`Action.ShowUnderlyingData`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed`|*Show underlying data* +
Expand All @@ -385,7 +385,7 @@ Allows creating a sync to send data to external business apps such as Slack, Sal
`SearchEmbed` +
`AppEmbed`| The *Manage pipelines* action in the **More** actions menu. +
Allows managing data sync pipelines to external business apps set as sync destinations in ThoughtSpot.
|xref:Action.adoc#_exporttml[`Action.ExportTML`]|`ConversationEmbed` +
|xref:Action.adoc#_exporttml[`Action.ExportTML`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` | *Export TML* +
Expand All @@ -405,24 +405,24 @@ The following actions are available in the contextual menu of an Answer:
[options='header']
|=====
|Action string in SDK| Required SDK library|Action label in the UI
|xref:Action.adoc#_drillexclude[`Action.DrillExclude`]|`ConversationEmbed` +
|xref:Action.adoc#_drillexclude[`Action.DrillExclude`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed`|*Exclude* +
Allows you to exclude a specific data point when drilling down on an Answer.
|xref:Action.adoc#_drillinclude[`Action.DrillInclude`]|`ConversationEmbed` +
|xref:Action.adoc#_drillinclude[`Action.DrillInclude`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` |*Include* +
Allows you to include a specific data point during drill down on an Answer.

|xref:Action.adoc#_drilldown[`Action.DrillDown`]|`ConversationEmbed` +
|xref:Action.adoc#_drilldown[`Action.DrillDown`]|`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed` |*Drill down* +
Allows you to drill down the data for additional details and granular information. Available as a contextual menu action.

|xref:Action.adoc#_copytoclipboard[`Action.CopyToClipboard`] |`ConversationEmbed` +
|xref:Action.adoc#_copytoclipboard[`Action.CopyToClipboard`] |`SpotterEmbed` +
`SageEmbed` +
`SearchEmbed` +
`AppEmbed`|*Copy to clipboard* +
Expand Down
32 changes: 16 additions & 16 deletions modules/ROOT/pages/embed-spotter.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@

:page-title: Embed Spotter
:page-pageid: embed-spotter
:page-description: You can use the ConversationEmbed SDK library to embed Conversational analytics experience in your application.
:page-description: You can use the SpotterEmbed SDK library to embed Conversational analytics experience in your application.

ThoughtSpot supports Natural Language Search queries and AI-generated Answers. With ThoughtSpot Spotter, this experience is further enhanced to a full conversational interface that users can interact with, ask follow-up questions, and get insights.

Visual Embed SDK offers several options to seamlessly embed conversational analytics within your applications and customize the interface and experience as per your organization's branding guidelines.

To integrate Spotter capabilities into your application environment, the following components are available:

* `ConversationEmbed` +
* `SpotterEmbed` +
Allows embedding the full Spotter interface with a conversation panel and body.
* `BodylessConversation` +
* `SpotterAgentEmbed` +
Allows integrating xref:spotter-in-custom-chatbot.adoc[Spotter capabilities into a chatbot].

Additionally, you can also use xref:spotter-apis.adoc[REST APIs to create a conversation session, ask follow-up questions, and generate Answers].
Expand All @@ -23,7 +23,7 @@ This article describes how to embed Spotter with a conversation panel and body i

=== Spotter components

The `ConversationEmbed` package adds the following components to your embedding application:
The `SpotterEmbed` package adds the following components to your embedding application:

* A conversation panel and prompt button to interact with Spotter.
* The data source selector that allows application users to select a data source for Spotter analysis.
Expand All @@ -41,13 +41,13 @@ Before you begin, check the following:

== Import the SDK package

Import the `ConversationEmbed` SDK library to your application environment:
Import the `SpotterEmbed` SDK library to your application environment:

**npm**
[source,JavaScript]
----
import {
ConversationEmbed,
SpotterEmbed,
AuthType,
init,
prefetch,
Expand All @@ -60,7 +60,7 @@ from '@thoughtspot/visual-embed-sdk';
----
<script type = 'module'>
import {
ConversationEmbed,
SpotterEmbed,
AuthType,
init,
prefetch,
Expand All @@ -85,13 +85,13 @@ init({
});
----

== Create an instance of ConversationEmbed object
== Create an instance of SpotterEmbed object

Create an instance of the `ConversationEmbed` object and specify the data source ID. Optionally, you can specify the search query string to generate a chart or table at load time.
Create an instance of the `SpotterEmbed` object and specify the data source ID. Optionally, you can specify the search query string to generate a chart or table at load time.

[source,JavaScript]
----
const conversation = new ConversationEmbed(document.getElementById('ts-embed'), {
const conversation = new SpotterEmbed(document.getElementById('ts-embed'), {
frameParams: {
width: '100%',
height: '100%',
Expand All @@ -105,7 +105,7 @@ const conversation = new ConversationEmbed(document.getElementById('ts-embed'),

[source,JavaScript]
----
const conversation = new ConversationEmbed(document.getElementById('ts-embed'), {
const conversation = new SpotterEmbed(document.getElementById('ts-embed'), {
frameParams: {
width: '100%',
height: '100%',
Expand Down Expand Up @@ -135,10 +135,10 @@ Hides sample questions that appear on the default Spotter page.

== Customize your embed (Optional)

To customize the Spotter interface, use the configuration attributes and properties available for `ConversationEmbed` in the SDK.
To customize the Spotter interface, use the configuration attributes and properties available for `SpotterEmbed` in the SDK.

* link:https://developers.thoughtspot.com/docs/Interface_ConversationViewConfig[ConversationViewConfig]
* link:https://developers.thoughtspot.com/docs/Interface_BodylessConversationViewConfig[BodylessConversationViewConfig]
* link:https://developers.thoughtspot.com/docs/Interface_SpotterEmbedViewConfig[SpotterEmbedViewConfig]
* link:https://developers.thoughtspot.com/docs/Interface_SpotterAgentEmbedViewConfig[SpotterAgentEmbedViewConfig]

=== Customize style, icons, and text
To customize the look and feel of the Spotter page, you can use the `customizations` settings in the SDK. The `customizations` object allows you to add xref:customize-css-styles.adoc[custom CSS definitions], xref:customize-text-strings.adoc[text strings], and xref:customize-icons.adoc[icons].
Expand Down Expand Up @@ -260,8 +260,8 @@ The following figure shows the Spotter page with custom text strings:
image::./images/spotter-text-customization.png[Spotter customization]

== Additional resources
* link:https://developers.thoughtspot.com/docs/Class_ConversationEmbed[ConversationEmbed classes and methods]
* link:https://developers.thoughtspot.com/docs/Interface_ConversationViewConfig[Configuration options for Spotter interface customization]
* link:https://developers.thoughtspot.com/docs/Class_SpotterEmbed[SpotterEmbed classes and methods]
* link:https://developers.thoughtspot.com/docs/Interface_SpotterEmbedViewConfig[Configuration options for Spotter interface customization]

////
[NOTE]
Expand Down
20 changes: 10 additions & 10 deletions modules/ROOT/pages/embed-ts-react-app.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -497,21 +497,21 @@ const FullApp = () => {
////

== Embed Spotter for conversation analytics
To embed ThoughtSpot Spotter conversation interface [beta betaBackground]^Beta^ with or without a pre-defined search query string, use the `ConversationEmbed` component.
To embed ThoughtSpot Spotter conversation interface [beta betaBackground]^Beta^ with or without a pre-defined search query string, use the `SpotterEmbed` component.

=== Create a conversation component

In your React app project:

. Go to the **Components ** folder in your app directory and add a page for the embedded search object; for example, `conversation.tsx`.
. Import the `ConversationEmbed` component.
. Import the `SpotterEmbed` component.
+
[source,TypeScript]
----
import { AuthType, init, Action } from "@thoughtspot/visual-embed-sdk";

import {
ConversationEmbed,
SpotterEmbed,
useEmbedRef
} from "@thoughtspot/visual-embed-sdk/react'";
----
Expand All @@ -521,7 +521,7 @@ If you are using Webpack 4, import the React components as shown in this example
+
[source,TypeScript]
----
import { ConversationEmbed,
import { SpotterEmbed,
useEmbedRef } from '@thoughtspot/visual-embed-sdk/lib/src/react';
----

Expand All @@ -539,26 +539,26 @@ ts-data-app> npm start
=== Code sample
The following code sample shows additional attributes and properties:

* A `ConversationEmbed` function with a Worksheet ID passed as data source.
* A `SpotterEmbed` function with a Worksheet ID passed as data source.
* The `searchOptions` property to pass a search query string.
* Event handlers for `init` and `Load` Embed events.

+
[source,TypeScript]
----
import { AuthType, init, Action } from "@thoughtspot/visual-embed-sdk";
import { ConversationEmbed, useEmbedRef } from "@thoughtspot/visual-embed-sdk/react";
import { SpotterEmbed, useEmbedRef } from "@thoughtspot/visual-embed-sdk/react";

// If you are using Webpack 4 (which is the default when using create-react-app v4), you would need to import
// the React components using the below:
// import { ConversationEmbed } from "@thoughtspot/visual-embed-sdk/lib/src/react";
// import { SpotterEmbed } from "@thoughtspot/visual-embed-sdk/lib/src/react";

// Initialize ThoughtSpot
init({
thoughtSpotHost: "<%=tshost%>",
authType: AuthType.None,
});
const ConversationEmbed = () => {
const SpotterEmbed = () => {
// Define search options
const searchOptions = {
searchQuery: "sales by region" // Search query to execute
Expand All @@ -575,7 +575,7 @@ const ConversationEmbed = () => {
};

return (
<ConversationEmbed
<SpotterEmbed
frameParams={{
height: '720px'
}}
Expand All @@ -590,7 +590,7 @@ const ConversationEmbed = () => {

For more information, see the following pages:

* xref:ConversationEmbed.adoc[SageEmbed]
* xref:SpotterEmbed.adoc[SageEmbed]
* xref:EmbedEvent.adoc[EmbedEvent]
* xref:Action.adoc[Actions]

Expand Down
2 changes: 1 addition & 1 deletion modules/ROOT/pages/sf-integration.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ export default class TsEmbedTemplate extends LightningElement {

console.log('### Configuring ' + this.embedType + ' embed');

this.embedObj = new tsembed.ConversationEmbed(containerDiv, {
this.embedObj = new tsembed.SpotterEmbed(containerDiv, {
frameParams: {
height: 800,
},
Expand Down
Loading
Loading