diff --git a/modules/ROOT/pages/ask-docs.adoc b/modules/ROOT/pages/ask-docs.adoc
index b61f4651d..94a0326a1 100644
--- a/modules/ROOT/pages/ask-docs.adoc
+++ b/modules/ROOT/pages/ask-docs.adoc
@@ -1,7 +1,7 @@
= Ask Docs
:toc: true
-:page-title: Ask TSE Docs
+:page-title: Ask Visual Embed SDK Docs
:page-pageid: ask-docs
:page-description: ThoughtSpot Embed SDK docs GPT Q&A
diff --git a/modules/ROOT/pages/best-practices.adoc b/modules/ROOT/pages/best-practices.adoc
index 9f3a2751f..1f0cd1161 100644
--- a/modules/ROOT/pages/best-practices.adoc
+++ b/modules/ROOT/pages/best-practices.adoc
@@ -62,7 +62,7 @@ appEmbed.render();
== Related resources
-* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank]
+* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]
* link:https://github.com/thoughtspot/visual-embed-sdk/blob/main/README.md[Visual Embed SDK GitHub repository, window=_blank]
* link:https://github.com/thoughtspot/ts_everywhere_resources[ThoughtSpot Everywhere Resources on GitHub, window=_blank]
* link:https://developers.thoughtspot.com/guides[Visual Embed Tutorials]
diff --git a/modules/ROOT/pages/code-samples.adoc b/modules/ROOT/pages/code-samples.adoc
index d4d0509c2..724c65a40 100644
--- a/modules/ROOT/pages/code-samples.adoc
+++ b/modules/ROOT/pages/code-samples.adoc
@@ -319,7 +319,7 @@ See the following pages:
* xref:home.adoc[Developer documentation] +
* xref:rest-api-reference.adoc[REST API Reference Guide] +
* link:https://developers.thoughtspot.com/guides[Tutorials, window=_blank] +
-* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank] +
+* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide] +
* link:https://github.com/thoughtspot/visual-embed-sdk/blob/main/README.md[Visual Embed SDK GitHub respository, window=_blank] +
* link:https://github.com/thoughtspot/ts_rest_api_and_tml_tools[REST API and TML Python library and examples, window=_blank] +
* link:https://github.com/thoughtspot/ts_everywhere_resources[Visual Embed SDK examples, window=_blank] +
diff --git a/modules/ROOT/pages/common/nav.adoc b/modules/ROOT/pages/common/nav.adoc
index 07970f795..5c3872fe6 100644
--- a/modules/ROOT/pages/common/nav.adoc
+++ b/modules/ROOT/pages/common/nav.adoc
@@ -4,7 +4,7 @@
[navSection]
-* link:{{navprefix}}/ask-docs[AskDocs ^New^]
+* link:{{navprefix}}/ask-docs[AskDocs ^Beta^]
* link:{{navprefix}}/whats-new[What's New]
** link:{{navprefix}}/whats-new[New features]
@@ -29,16 +29,16 @@
* link:{{navprefix}}/getting-started[Embed ThoughtSpot]
** link:{{navprefix}}/getting-started[Get started]
-** Embed with Visual Embed SDK
-** link:{{navprefix}}/embed-liveboard[Embed a ThoughtSpot components]
-*** link:{{navprefix}}/embed-liveboard[Embed a Liveboard]
-**** link:{{navprefix}}/Liveboard-new-experience[Embed a Liveboard]
-*** link:{{navprefix}}/embed-a-viz[Embed a visualization]
-*** link:{{navprefix}}/full-embed[Embed full application]
-*** link:{{navprefix}}/search-embed[Embed search page]
-**** link:{{navprefix}}/search-assist[Enable Search Assist]
-*** link:{{navprefix}}/embed-searchbar[Embed search bar]
-** link:{{navprefix}}/react-app-embed[Embed in a React app]
+** Embed using Visual Embed SDK
+*** link:{{navprefix}}/embed-liveboard[Embed a ThoughtSpot components]
+**** link:{{navprefix}}/embed-liveboard[Embed a Liveboard]
+***** link:{{navprefix}}/Liveboard-new-experience[Liveboard new experience]
+**** link:{{navprefix}}/embed-a-viz[Embed a visualization]
+**** link:{{navprefix}}/full-embed[Embed full application]
+**** link:{{navprefix}}/search-embed[Embed search page]
+***** link:{{navprefix}}/search-assist[Enable Search Assist]
+**** link:{{navprefix}}/embed-searchbar[Embed search bar]
+*** link:{{navprefix}}/react-app-embed[Embed in a React app]
** link:{{navprefix}}/VisualEmbedSdk[Visual Embed SDK Reference]
*** Embed components
**** link:{{navprefix}}/Class_SearchEmbed[SearchEmbed]
diff --git a/modules/ROOT/pages/embed-pinboard.adoc b/modules/ROOT/pages/embed-pinboard.adoc
index 698b007b0..679b88cab 100644
--- a/modules/ROOT/pages/embed-pinboard.adoc
+++ b/modules/ROOT/pages/embed-pinboard.adoc
@@ -267,8 +267,3 @@ liveboardEmbed.render();
image::./images/embed-lb.png[Liveboard embed]
. Explore the charts and tables, and verify if objects render and show the desired data.
-
-== Additional resources
-
-* For code examples, see xref:code-samples.adoc[Code samples].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].
diff --git a/modules/ROOT/pages/embed-search.adoc b/modules/ROOT/pages/embed-search.adoc
index 630c2dba6..629b62917 100644
--- a/modules/ROOT/pages/embed-search.adoc
+++ b/modules/ROOT/pages/embed-search.adoc
@@ -304,9 +304,4 @@ image::./images/embed-search.png[Search embed]
The following figure shows a chart created from search query on an embedded Search page:
+
[.bordered]
-image::./images/searchembed-with-chart.png[Search page embed]
-
-== Additional resources
-
-* For code examples, see xref:code-samples.adoc[Code samples].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].
+image::./images/searchembed-with-chart.png[Search page embed]
\ No newline at end of file
diff --git a/modules/ROOT/pages/embed-ts-react-app.adoc b/modules/ROOT/pages/embed-ts-react-app.adoc
index 1df38238f..32ab7f7f4 100644
--- a/modules/ROOT/pages/embed-ts-react-app.adoc
+++ b/modules/ROOT/pages/embed-ts-react-app.adoc
@@ -702,7 +702,13 @@ export default App;
== Additional resources
-* For information about events, see xref:embed-events.adoc[Interact with events].
-* For information about Action enumerations, see xref:embed-actions.adoc[Show or hide UI actions].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].
+* xref:LiveboardEmbed.adoc[LiveboardEmbed]
+* xref:LiveboardViewConfig.adoc[LiveboardViewConfig]
+* xref:SearchEmbed.adoc[SearchEmbed]
+* xref:SearchViewConfig.adoc[SearchViewConfig]
+* xref:AppEmbed.adoc[AppEmbed]
+* xref:AppViewConfig.adoc[LiveboardViewConfig]
+* xref:HostEvent.adoc[HostEvent]
+* xref:EmbedEvent.adoc[EmbedEvent]
+* xref:Actions.adoc[Actions]
* For Javascript code examples, see link:https://github.com/thoughtspot/quickstarts/tree/main/react-starter-app[Code samples, window=_blank].
diff --git a/modules/ROOT/pages/enable-liveboardv2.adoc b/modules/ROOT/pages/enable-liveboardv2.adoc
index f5a9c38d8..b6020fad6 100644
--- a/modules/ROOT/pages/enable-liveboardv2.adoc
+++ b/modules/ROOT/pages/enable-liveboardv2.adoc
@@ -167,4 +167,4 @@ For more information, see link:https://docs.thoughtspot.com/cloud/latest/liveboa
* For information about how to embed a Liveboard, see xref:embed-pinboard.adoc[Embed a Liveboard].
* For code examples, see xref:code-samples.adoc[Code samples].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].
+* For more information about the SDK APIs and attributes, see xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide].
diff --git a/modules/ROOT/pages/faqs.adoc b/modules/ROOT/pages/faqs.adoc
index 737a1d2f0..c65843027 100644
--- a/modules/ROOT/pages/faqs.adoc
+++ b/modules/ROOT/pages/faqs.adoc
@@ -337,7 +337,7 @@ To learn more about the SDK, see the following resources: +
* xref:visual-embed-sdk.adoc[Visual Embed SDK] in Developer Documentation
* link:https://developers.thoughtspot.com/guides[Quick starts and tutorials, window=_blank]
-* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank]
+* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]
====
.Where can I find code samples for Visual Embed SDK?
diff --git a/modules/ROOT/pages/full-embed.adoc b/modules/ROOT/pages/full-embed.adoc
index e5db51b1a..3b33682a4 100644
--- a/modules/ROOT/pages/full-embed.adoc
+++ b/modules/ROOT/pages/full-embed.adoc
@@ -317,8 +317,3 @@ For more information about events, see the following pages:
image::./images/appEmbed.png[Full application embed]
. Explore the charts and tables, and verify if objects render and show the desired data.
-
-== Additional resources
-
-* For code examples, see xref:code-samples.adoc[Code samples].
-* For more information about the SDK APIs and attributes, see xref:sdk-reference.adoc[Visual Embed SDK Reference].
diff --git a/modules/ROOT/pages/getting-started.adoc b/modules/ROOT/pages/getting-started.adoc
index f7e244581..82099cb4a 100644
--- a/modules/ROOT/pages/getting-started.adoc
+++ b/modules/ROOT/pages/getting-started.adoc
@@ -61,13 +61,13 @@ import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk';
// NPM ;
-// Makes the SDK available on global namespace window.tsembed
+// Make the SDK available on global namespace window.tsembed
// ES6 from web
import {
-LiveboardEmbed,
-AuthType,
-init,
+ LiveboardEmbed,
+ AuthType,
+ init,
} from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
----
@@ -107,23 +107,20 @@ Use the **SearchBarEmbed** component to embed only the ThoughtSpot Search bar an
++++
[#initSdk]
-=== Initialize the SDK
+== Initialize the SDK
-After importing the package, specify the hostname or IP address of your ThoughtSpot application instance and the authentication type.
+After importing the package, specify the hostname or IP address of your ThoughtSpot application instance and the authentication type. For other supported authentication methods, see xref:embed-authentication.adoc[Authentication].
[source,JavaScript]
----
init({
thoughtSpotHost: "https://:",
- authType: AuthType.EmbeddedSSO,
+ authType: ,
+ ... // other authType dependent properties.
});
----
-thoughtSpotHost::
-_String_. Hostname or IP address of the ThoughtSpot application.
-For other supported authentication methods, see xref:embed-authentication.adoc[Authentication].
-
-== Define the object instance and properties
+=== Define the object instance and properties
Create an object instance and define object properties. This example shows the code sample for a Liveboard object:
[source,JavaScript]
@@ -142,11 +139,19 @@ const liveboardEmbed = new LiveboardEmbed(
== Register events
-Subscribe and listen to events triggered when the embedded object interacts with your app.
+Subscribe and listen to events triggered when the embedded object interacts with your app. The following example registers `LiveboardRendered` and `SetVisibleVizs` events. The `LiveboardRendered` embed event is emitted when the embedding application renders the Liveboard and triggers the `SetVisibleVizs` event to show specific visualizations on the Liveboard.
+
+[source,JavaScript]
+----
+liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => {
+ liveboardEmbed.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
+});
+----
* xref:HostEvent.adoc[HostEvent]
* xref:EmbedEvent.adoc[EmbedEvent]
+
== Render the embedded object
Render the embedded application.
@@ -159,35 +164,71 @@ liveboardEmbed.render();
== Code sample
[source,Javascript]
----
-// NPM
-import { LiveboardEmbed, AuthType, init } from '@thoughtspot/visual-embed-sdk';
-// or ES6
-// import { LiveboardEmbed, AuthType, init } from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
-
-init({
- thoughtSpotHost: '<%=tshost%>',
- authType: AuthType.None,
+import {
+ LiveboardEmbed,
+ EmbedEvent,
+ HostEvent,
+} from '@thoughtspot/visual-embed-sdk';
+
+const lb = new LiveboardEmbed('#container', {
+ frameParams: {
+ width: '100%',
+ height: '100%',
+ },
+ liveboardId: '<%=liveboardGUID%>',
+ runtimeFilters: [],
+});
+// [Optional]: Register event listeners.
+lb.on(EmbedEvent.LiveboardRendered, (e) => {
+ /* handler */
});
-const liveboardEmbed = new LiveboardEmbed(
- document.getElementById('ts-embed'),
+// Do not forget to call render.
+lb.render();
+
+// [Optional]: Trigger events on the lb
+lb.trigger(HostEvent.UpdateRuntimeFilters, [
{
- frameParams: {
- width: '100%',
- height: '100%',
- },
- liveboardId: '<%=liveboardGUID%>',
- vizId: '<%=vizGUID%>',
+ columnName: 'col1',
+ operator: RuntimeFilterOp.EQ,
+ values: ['val1'],
},
-});
+]);
+----
-liveboardEmbed.render();
+`#container` is a selector for the DOM node which the code assumes is already attached to DOM. The SDK will render the ThoughtSpot component inside this container element.
-liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => {
- liveboardEmbed.trigger(HostEvent.SetVisibleVizs, ['viz1', 'viz2']);
-});
+
+== Embed in a React app
+ThoughtSpot provides React components for embedding Search, Liveboard, and the full ThoughtSpot application in a React app. The following code sample shows how to embed a Liveboard component in a React app:
+
+[source,TypeScript]
+----
+import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react';
+
+const App = () => {
+ const embedRef = useEmbedRef();
+ const onLiveboardRendered = () => {
+ embedRef.current.trigger(HostEvent.UpdateRuntimeFilters, [
+ {
+ columnName: 'col1',
+ operator: RuntimeFilterOp.EQ,
+ values: ['val1'],
+ },
+ ]);
+ };
+ return (
+
+ );
+};
----
+For more information, see xref:embed-ts-react-app.adoc[Embed ThoughtSpot in a React app].
+
////
=== Embed ThoughtSpot objects
After you initialize the SDK, create embed object classes and define object properties. +
@@ -208,4 +249,3 @@ For more information about embedding ThoughtSpot app or its objects using SDK, s
* link:https://github.com/thoughtspot/visual-embed-sdk/blob/main/README.md[Visual Embed SDK GitHub repository, window=_blank]
* link:https://github.com/thoughtspot/ts_everywhere_resources[ThoughtSpot Everywhere Resources on GitHub, window=_blank]
* link:https://developers.thoughtspot.com/guides[Visual Embed Tutorials, window=_blank]
-
diff --git a/modules/ROOT/pages/rel-page-sw.adoc b/modules/ROOT/pages/rel-page-sw.adoc
index 4c459f2ab..3cd625dfc 100644
--- a/modules/ROOT/pages/rel-page-sw.adoc
+++ b/modules/ROOT/pages/rel-page-sw.adoc
@@ -39,7 +39,7 @@ The minimum SDK version required for embedding ThoughtSpot Software in your app
You can upgrade to a later version if required. However, you must exercise caution before upgrading to a new version because the new versions may introduce breaking changes. The new version may also include APIs, methods, and attributes for features that are not yet available on your ThoughtSpot Software release.
-For more information about the SDK versions, supported methods and classes, see xref:api-changelog.adoc[Visual Embed Changelog] and link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank].
+For more information about the SDK versions, supported methods and classes, see xref:api-changelog.adoc[Visual Embed Changelog] and xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide].
== REST API
diff --git a/modules/ROOT/pages/sdk-reference.adoc b/modules/ROOT/pages/sdk-reference.adoc
index 5649a2ea6..8b711e38b 100644
--- a/modules/ROOT/pages/sdk-reference.adoc
+++ b/modules/ROOT/pages/sdk-reference.adoc
@@ -24,8 +24,7 @@ For more specific information on Embed options and functions, see the link:http
* link:{{visualEmbedSDKPrefix}}/classes/SearchEmbed.html[SearchEmbed, window=_blank]
* link:{{visualEmbedSDKPrefix}}/classes/SearchBarEmbed.html[SearchBarEmbed, window=_blank]
-For more specific information on Embed options and functions, see the link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank].
-
+For more specific information on Embed options and functions, see the xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide].
== Additional resources
diff --git a/modules/ROOT/pages/visual-embed-sdk.adoc b/modules/ROOT/pages/visual-embed-sdk.adoc
index b5dc429b6..25ab1b2c5 100644
--- a/modules/ROOT/pages/visual-embed-sdk.adoc
+++ b/modules/ROOT/pages/visual-embed-sdk.adoc
@@ -98,7 +98,7 @@ Learn how to xref:embed-ts-react-app.adoc[Embed ThoughtSpot in a React app].
[div boxDiv boxFullWidth]
--
-* link:{{visualEmbedSDKPrefix}}/modules.html[Visual Embed SDK Reference Guide, window=_blank]
+* xref:VisualEmbedSdk.adoc[Visual Embed SDK Reference Guide]
* link:https://developers.thoughtspot.com/guides[Visual Embed Tutorials]
* link:https://github.com/thoughtspot/visual-embed-sdk[Visual Embed SDK GitHub repository, window=_blank]
* link:https://github.com/thoughtspot/ts_everywhere_resources[ThoughtSpot Everywhere Resources on GitHub, window=_blank]