thoughtspot · ShashiSubramanya · Nov 20, 2024 · Nov 13, 2024 · Nov 13, 2024 · Nov 13, 2024
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -43,7 +43,7 @@ exports.createPages = async function ({ actions, graphql }) {
         const pageId = e.node.pageAttributes.pageid;
         if (sourceName === 'tutorials'){
            const relPathSplit = relPath.split('/');
-           const pageIdSplit = pageId.split('_');
+           const pageIdSplit = pageId.split('__');
            let finalPageId = pageId;
            if( pageIdSplit.length > 1) {
                 finalPageId = pageIdSplit[1];
@@ -70,7 +70,7 @@ exports.createPages = async function ({ actions, graphql }) {
         if (sourceName === 'tutorials'){            
            // One-level of subdirectory part of stub
            const relPathSplit = relPath.split('/');
-           const pageIdSplit = pageId.split('_');
+           const pageIdSplit = pageId.split('__');
            let finalPageId = pageId;
            if( pageIdSplit.length > 1) {
                 finalPageId = pageIdSplit[1];

diff --git a/modules/ROOT/pages/common/nav.adoc b/modules/ROOT/pages/common/nav.adoc
@@ -40,12 +40,14 @@
 *** link:{{navprefix}}/tutorials/tse-fundamentals/lesson-09[09 - Embed full application]
 *** link:{{navprefix}}/tutorials/tse-fundamentals/lesson-10[10 - Style embedded app]
 *** link:{{navprefix}}/tutorials/tse-fundamentals/lesson-11[11 - Course summary]
+** link:{{navprefix}}/tutorials/style-customization/tutorial[Style customization]
 ** link:{{navprefix}}/tutorials/rest-api/intro[REST API]
 *** link:{{navprefix}}/tutorials/rest-api/lesson-01[01 - REST API overview]
 *** link:{{navprefix}}/tutorials/rest-api/lesson-02[02 - Simple Python implementation]
 *** link:{{navprefix}}/tutorials/rest-api/lesson-03[03 - Complex REST API workflows]
 *** link:{{navprefix}}/tutorials/rest-api/lesson-04[04 - Browser JavaScript REST API implementation]
-
+** Spotter
+*** link:{{navprefix}}/tutorials/spotter/integrate-into-chatbot[Integrate Spotter into your Chatbot]
 * link:{{navprefix}}/getting-started[Embed ThoughtSpot]
 ** link:{{navprefix}}/getting-started[Quickstart Guide]
 ** link:{{navprefix}}/tsembed[Embed a ThoughtSpot component]

diff --git a/modules/ROOT/pages/spotter-in-custom-chatbot.adoc b/modules/ROOT/pages/spotter-in-custom-chatbot.adoc
diff --git a/modules/tutorials/pages/rest-api/rest-api-intro.adoc b/modules/tutorials/pages/rest-api/rest-api-intro.adoc
@@ -3,7 +3,7 @@
 :toclevels: 3
 
 :page-title: ThoughtSpot REST API tutorials
-:page-pageid: rest-api_intro
+:page-pageid: rest-api__intro
 :page-description: This lesson covers the security setup necessary to embed ThoughtSpot into TSE applications.
 
 This tutorial is a hands-on guide to practically working with the ThoughtSpot V2.0 REST API.

diff --git a/modules/tutorials/pages/rest-api/rest-api_lesson-01.adoc b/modules/tutorials/pages/rest-api/rest-api_lesson-01.adoc
@@ -2,7 +2,7 @@
 :toc: true
 :toclevels: 3
 
-:page-pageid: rest-api_lesson-01
+:page-pageid: rest-api__lesson-01
 :description: Introduction to REST APIs and how ThoughtSpot defines the V2.0 REST API
 
 Before you begin this lesson, check if you have done all initial activities described in the xref:rest-api-intro.adoc[tutorial introduction].

diff --git a/modules/tutorials/pages/rest-api/rest-api_lesson-02.adoc b/modules/tutorials/pages/rest-api/rest-api_lesson-02.adoc
@@ -2,7 +2,7 @@
 :toc: true
 :toclevels: 3
 
-:page-pageid: rest-api_lesson-02
+:page-pageid: rest-api__lesson-02
 :description: A lesson on a simple implementation of the V2.0 using Python
 
 

diff --git a/modules/tutorials/pages/rest-api/rest-api_lesson-03.adoc b/modules/tutorials/pages/rest-api/rest-api_lesson-03.adoc
@@ -1,5 +1,5 @@
 = Complex REST API workflows
-:page-pageid: rest-api_lesson-03
+:page-pageid: rest-api__lesson-03
 :description: Complex REST API Workflows
 :toc: true
 :toclevels: 1

diff --git a/modules/tutorials/pages/rest-api/rest-api_lesson-04.adoc b/modules/tutorials/pages/rest-api/rest-api_lesson-04.adoc
@@ -2,7 +2,7 @@
 :toc: true
 :toclevels: 1
 
-:page-pageid: rest-api_lesson-04
+:page-pageid: rest-api__lesson-04
 :description: Browser JavaScript REST API implementation
 
 

diff --git a/modules/tutorials/pages/spotter/spotter-in-custom-chatbot.adoc b/modules/tutorials/pages/spotter/spotter-in-custom-chatbot.adoc
@@ -0,0 +1,86 @@
+= Integrate Spotter into your chatbot
+:toc: true
+:toclevels: 1
+
+:page-title: Integrate Spotter into your own Chatbot
+:page-pageid: spotter__integrate-into-chatbot
+:page-description: Tutorial to integrate Spotter into your own Chatbot
+
+
+In this article, we'll use ThoughtSpot's https://github.com/thoughtspot/visual-embed-sdk[Visual Embed SDK^] to add analytics and interactive data visualizations to your own chatbot. To view the full code used in this tutorial, visit our link:https://codesandbox.io/p/sandbox/bodyless-sample-doc-5q3dwr[CodeSandbox^].
+
+== Install Visual Embed SDK
+
+----
+ $ npm i @thoughtspot/visual-embed-sdk
+----
+
+== Configure security and authentication
+
+. Add the URL of the host application, which embeds ThoughtSpot visualizations, to the CSP allowlist. This includes adding the correct CORS and frame-ancestors CSP.
++
+For more information, see xref:security-settings.adoc#_add_domains_to_csp_and_cors_allowlists[Security settings].
+
+. Configure the authentication scheme that works best for your use case.
++
+Read the https://developers.thoughtspot.com/docs/embed-auth[Authentication documentation] and choose the scheme that best suits your implementation.
++
+In this tutorial, we'll use `AuthType.None`. We assume you are logged into your ThoughtSpot instance in a different browser tab.
+
+== Get the data model
+
+Make sure you have already connected your database and created a ThoughtSpot data model. Log into your instance to get the `id` of the data model you want to use.
+
+For this tutorial, we'll use the link:https://try-everywhere.thoughtspot.cloud/#/everywhere[demo^] Thoughtspot instance with a sample data model.
+
+== Initialize the SDK
+
+[source,javascript]
+----
+import {
+  BodylessConversation,
+  init,
+  AuthType,
+} from "@thoughtspot/visual-embed-sdk";
+
+init({
+  thoughtSpotHost: "https://<your-instance>.thoughtspot.cloud",
+  authType: AuthType.None, // Or your authentication scheme.
+});
+----
+
+== Create a conversation
+
+To use the Spotter conversational analytics, let's start by creating a new conversation. This conversation holds the context of all messages sent to ThoughtSpot by your bot. This enables a truly conversational experience for your chatbot users.
+
+[source,javascript]
+----
+const conversation = new BodylessConversation({
+    worksheetId: "<data-model-id>",
+  });
+----
+
+== Send messages and get interactive visualizations in response
+
+After creating a conversation, we'll use it to send messages to the ThoughtSpot Spotter AI. Spotter evaluates and generates data on your data model, and returns a visualization in response.
+
+[source,javascript]
+----
+// Get the response from ThoughtSpot Spotter
+const { container } = await conversation.sendMessage(message);
+
+// Create a new DOM element, to host the visualization returned above.
+const div = document.createElement("div");
+
+// Add any styling you might want to this element.
+div.classList.add("viz");
+// Add the container of the visualization as contents to this dom element.
+div.append(container);
+// insert the DOM into your application.
+app.insertAdjacentElement("beforeend", div);
+----
+
+== That's all!
+
+And that’s a wrap! This was a super quick tutorial on how to use Spotter embed APIs to integrate conversational analytics with your chatbot!
+Visit the link:https://codesandbox.io/p/sandbox/bodyless-sample-doc-5q3dwr[CodeSandbox^] to see it in action in a sample chatbot we created.
diff --git a/modules/tutorials/pages/style-customization/style-customization_intro.adoc b/modules/tutorials/pages/style-customization/style-customization_intro.adoc