Tutorials

.env.sample

@@ -3,3 +3,5 @@ GATSBY_ALGOLIA_SEARCH_KEY=
 ALGOLIA_ADMIN_KEY=
 GATSBY_CLOUDFLARE_URL=
 BUILD_ENV=LOCAL
+
+

modules/ROOT/pages/common/nav-embedding.adoc

@@ -119,7 +119,7 @@ Customize and integrate
 ** link:{{navprefix}}/prefetch[Prefetch static resources]
 * link:{{navprefix}}/troubleshoot-errors[Troubleshoot errors]
 
-
+////
 [.sidebar-title]
 Embedding tutorials
 
@@ -143,7 +143,7 @@ Embedding tutorials
 ** link:{{navprefix}}/tutorials/react-components/lesson-03[03 - Menus and navigation elements]
 ** link:{{navprefix}}/tutorials/react-components/lesson-04[04 - Event handling]
 * link:{{navprefix}}/tutorials/spotter/integrate-into-chatbot[Integrate Spotter into your Chatbot]
-
+////
 
 [.sidebar-title]
 Reference guides and changelog

modules/ROOT/pages/common/nav-release-notes.adoc

@@ -0,0 +1,17 @@
+
+:page-pageid: nav-release-notes
+:page-description: Release notes and changelogs
+
+[navSection]
+
+[.sidebar-title]
+Release notes and changelogs
+
+* link:{{navprefix}}/whats-new[What's new]
+* Changelog
+** link:{{navprefix}}/embed-sdk-changelog[Visual Embed SDK changelog]
+** link:{{navprefix}}/mobile-sdk-changelog[Mobile Embed SDK changelog]
+** link:{{navprefix}}/rest-v2-changelog[REST API v2 changelog]
+** link:{{navprefix}}/mcp-server-changelog[Spotter MCP Server changelog]
+* link:{{navprefix}}/deprecated-features[Deprecation announcements]
+

modules/ROOT/pages/common/nav-rest-api.adoc

@@ -50,13 +50,15 @@ REST API SDK
 * link:{{navprefix}}/rest-api-sdk-csharp[C# SDK]
 * link:{{navprefix}}/rest-apiv2-js[REST API v2.0 in JavaScript]
 
+////
 [.sidebar-title]
 REST API Tutorials
 
 * link:{{navprefix}}/tutorials/rest-api/intro[REST API Tutorials]
 * 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]
+////
 
 [.sidebar-title]
 REST API v1 (DEPRECATED)

modules/ROOT/pages/common/nav-tutorials.adoc

@@ -0,0 +1,50 @@
+
+:page-pageid: nav-tutorials
+:page-description: Tutorials navigation
+
+[navSection]
+
+[.sidebar-title]
+ThoughtSpot Embedding fundamentals
+
+* link:{{navprefix}}/tutorials/tse-fundamentals/intro[Introduction]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-01[Overview of ThoughtSpot Embedded]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-02[Setting up for the course]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-03[Security Setting]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-04[Start Coding]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-05[Embed Search]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-06[Embed Natural Language Search]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-07[Embed Liveboard]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-08[Embed Liveboard Visualization]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-09[Embed Application]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-10[Styling ThoughtSpot]
+* link:{{navprefix}}/tutorials/tse-fundamentals/lesson-11[Summary and Next Steps]
+
+[.sidebar-title]
+ThoughtSpot UI elements and style customization
+
+* link:{{navprefix}}/tutorials/style-customization/intro[Introduction]
+* link:{{navprefix}}/tutorials/style-customization/step-01[Getting started]
+* link:{{navprefix}}/tutorials/style-customization/step-02[Large component elements]
+* link:{{navprefix}}/tutorials/style-customization/step-03[CSS styles]
+* link:{{navprefix}}/tutorials/style-customization/step-04[Text strings and icon replacement]
+* link:{{navprefix}}/tutorials/style-customization/step-05[Menu items]
+* link:{{navprefix}}/tutorials/style-customization/step-06[Conclusion]
+
+[.sidebar-title]
+ThoughtSpot REST API tutorials
+** link:{{navprefix}}/tutorials/rest-api/intro[Introduction]
+** link:{{navprefix}}/tutorials/rest-api/lesson-01[REST API overview]
+** link:{{navprefix}}/tutorials/rest-api/lesson-02[Simple Python implementation]
+** link:{{navprefix}}/tutorials/rest-api/lesson-03[Complex REST API workflows]
+** link:{{navprefix}}/tutorials/rest-api/lesson-04[Browser JavaScript REST API implementation]
+
+[.sidebar-title]
+ThoughtSpot React Components Tutorial
+** link:{{navprefix}}/tutorials/react-components/intro[Introduction]
+** link:{{navprefix}}/tutorials/react-components/lesson-01[Initializing ThoughtSpot Embed SDK]
+** link:{{navprefix}}/tutorials/react-components/lesson-02[ThoughtSpot component pages]
+** link:{{navprefix}}/tutorials/react-components/lesson-03[Menus and other navigation elements]
+** link:{{navprefix}}/tutorials/react-components/lesson-04[Event handling]
+
+* link:{{navprefix}}/tutorials/spotter/integrate-into-chatbot[Integrate Spotter into your chatbot]

modules/ROOT/pages/common/nav-walkthroughs.adoc

@@ -0,0 +1,24 @@
+
+:page-pageid: nav-walkthroughs
+:page-description: Guided Walkthroughs navigation
+
+[.sidebar-title]
+Get started
+
+* Build a Data-Driven App with ThoughtSpot Embedded
+** link:{{navprefix}}/tutorials/embed-data-driven-app/intro[Introduction]
+** link:{{navprefix}}/tutorials/embed-data-driven-app/step-00[Get into the Developer Portal]
+** link:{{navprefix}}/tutorials/embed-data-driven-app/step-02[Get the base Liveboard rendering]
+** link:{{navprefix}}/tutorials/embed-data-driven-app/step-03[Make it conversational]
+** link:{{navprefix}}/tutorials/embed-data-driven-app/step-04[Style it to match the portal]
+** link:{{navprefix}}/tutorials/embed-data-driven-app/step-05[Wire in a custom action]
+** link:{{navprefix}}/tutorials/embed-data-driven-app/troubleshooting[When it doesn't just work]
+** link:{{navprefix}}/tutorials/embed-data-driven-app/summary[Where to go from here]
+
+* Build It Faster: Embedding ThoughtSpot with SpotterCode
+** link:{{navprefix}}/tutorials/spottercode-embed/intro[Introduction]
+** link:{{navprefix}}/tutorials/spottercode-embed/step-01[Set up SpotterCode, your pair programmer]
+** link:{{navprefix}}/tutorials/spottercode-embed/step-02[Embed the Liveboard view]
+** link:{{navprefix}}/tutorials/spottercode-embed/step-03[Embed Spotter: Extend it to conversational analytics]
+** link:{{navprefix}}/tutorials/spottercode-embed/step-04[Troubleshooting]
+** link:{{navprefix}}/tutorials/spottercode-embed/summary[Where to go from here]

modules/ROOT/pages/common/nav.adoc

@@ -5,15 +5,18 @@
 [navSection]
 
 [.sidebar-title]
-Release notes and changelogs
+Hands-on Guides
 
-* link:{{navprefix}}/whats-new[What's new]
-* Changelog
-** link:{{navprefix}}/embed-sdk-changelog[Visual Embed SDK changelog]
-** link:{{navprefix}}/mobile-sdk-changelog[Mobile Embed SDK changelog]
-** link:{{navprefix}}/rest-v2-changelog[REST API v2 changelog]
-** link:{{navprefix}}/mcp-server-changelog[Spotter MCP Server changelog]
-* link:{{navprefix}}/deprecated-features[Deprecation announcements]
+* link:{{navprefix}}/tutorials/walkthroughs[Walkthroughs]
+
+[.sidebar-title]
+Quickstarts
+
+* link:{{navprefix}}/getting-started[Embed ThoughtSpot]
+* link:{{navprefix}}/SpotterCode[SpotterCode]
+* link:{{navprefix}}/rest-apis[REST APIs]
+* link:{{navprefix}}/ai-analytics-integration[AI analytics integration]
+* link:{{navprefix}}/mcp-integration[MCP Server integration]
 
 [.sidebar-title]
 Live Playgrounds
@@ -27,69 +30,59 @@ Live Playgrounds
 * +++<a href="https://try-everywhere.thoughtspot.cloud/v2/#/everywhere/playground/theme-builder" target="_blank">Theme Builder</a>+++
 ** link:{{navprefix}}/theme-builder-doc[How to use]
 
-
 [.sidebar-title]
-Get started
+Reference Guides
 
-* link:{{navprefix}}/getting-started[Embed ThoughtSpot]
-* link:{{navprefix}}/SpotterCode[SpotterCode]
-* link:{{navprefix}}/rest-apis[REST APIs]
-* link:{{navprefix}}/ai-analytics-integration[AI analytics integration]
-* link:{{navprefix}}/mcp-integration[MCP Server integration]
-//** link:{{navprefix}}/tutorials/tutorials-overview[Tutorials]
 * link:{{navprefix}}/VisualEmbedSdk[SDK and API reference]
-** link:{{navprefix}}/VisualEmbedSdk[Visual Embed SDK]
-** link:{{navprefix}}/rest-apiv2-reference[REST API]
-** link:{{navprefix}}/mcp-tool-reference[MCP tools]
+* link:{{navprefix}}/rest-apiv2-reference[REST API]
+* link:{{navprefix}}/mcp-tool-reference[MCP tools]
+
+[.sidebar-title]
+Integration Guides
 
+* link:{{navprefix}}/webhooks-overview[Overview]
+** link:{{navprefix}}/webhooks-ui[Webhooks UI]
+** link:{{navprefix}}/webhooks-comm-channel[Webhook communication channels]
+** link:{{navprefix}}/webhooks-lb-schedule[Webhook connection for Liveboard scheduled events]
+** link:{{navprefix}}/webhooks-s3-integration[AWS S3 storage integration for webhook delivery]
+** link:{{navprefix}}/webhooks-gcs-storage[GCS storage integration for webhook delivery]
+** link:{{navprefix}}/webhooks-lb-payload[Webhook response payload]
+** link:{{navprefix}}/webhooks-kpi[Webhook connection for KPI alerts]
+
+* link:{{navprefix}}/external-tool-script-integration[External tools and scripts]
+* link:{{navprefix}}/pendo-integration[Pendo integration with embed]
+* link:{{navprefix}}/sf-integration[Integration with Salesforce]
+* link:{{navprefix}}/vercel-integration[Vercel integration]
 
 [.sidebar-title]
-Build and deploy
+Deployment guides
 
-** link:{{navprefix}}/thoughtspot-objects[ThoughtSpot objects]
-** link:{{navprefix}}/timezone-aware-filtering[Timezone-aware keywords and filters]
-** link:{{navprefix}}/variables[Variables]
-** link:{{navprefix}}/parameterize-metadata[Parameterize metadata]
+* link:{{navprefix}}/thoughtspot-objects[ThoughtSpot objects]
+* link:{{navprefix}}/timezone-aware-filtering[Timezone-aware keywords and filters]
+* link:{{navprefix}}/variables[Variables]
+* link:{{navprefix}}/parameterize-metadata[Parameterize metadata]
 * link:{{navprefix}}/development-and-deployment[Development and deployment]
-** link:{{navprefix}}/deploy-with-tml-apis[Deploy with TML APIs]
-*** link:{{navprefix}}/git-provider-integration[Git provider integration]
-*** link:{{navprefix}}/modify-tml[TML modification]
+* link:{{navprefix}}/deploy-with-tml-apis[Deploy with TML APIs]
+** link:{{navprefix}}/git-provider-integration[Git provider integration]
+** link:{{navprefix}}/modify-tml[TML modification]
 * link:{{navprefix}}/publish-data-overview[Publish content to Orgs]
 ** link:{{navprefix}}/publish-to-orgs[Publish objects to Orgs]
 * link:{{navprefix}}/git-integration[Deploy with GitHub APIs (legacy)]
 ** link:{{navprefix}}/git-configuration[Configure GitHub integration]
 ** link:{{navprefix}}/git-api[GitHub REST APIs]
 ** link:{{navprefix}}/guid-mapping[GUID mapping]
-
-[.sidebar-title]
-Multi-tenancy
-
 * link:{{navprefix}}/multi-tenancy[Overview]
-* link:{{navprefix}}/orgs[Multi-tenancy with Orgs]
+** link:{{navprefix}}/orgs[Multi-tenancy with Orgs]
 ** link:{{navprefix}}/orgs-api-op[Org administration]
 ** link:{{navprefix}}/multitenancy-within-an-org[Multi-tenancy within an Org]
 ** link:{{navprefix}}/single-tenant-data-models[Single-tenant data models with Orgs]
 * link:{{navprefix}}/tse-cluster[Cluster maintenance and upgrade]
 
 [.sidebar-title]
-Webhooks
+Tutorials
 
-* link:{{navprefix}}/webhooks-overview[Overview]
-* link:{{navprefix}}/webhooks-ui[Webhooks UI]
-* link:{{navprefix}}/webhooks-comm-channel[Webhook communication channels]
-* link:{{navprefix}}/webhooks-lb-schedule[Webhook connection for Liveboard scheduled events]
-* link:{{navprefix}}/webhooks-s3-integration[AWS S3 storage integration for webhook delivery]
-* link:{{navprefix}}/webhooks-gcs-storage[GCS storage integration for webhook delivery]
-* link:{{navprefix}}/webhooks-lb-payload[Webhook response payload]
-* link:{{navprefix}}/webhooks-kpi[Webhook connection for KPI alerts]
-
-[.sidebar-title]
-Integration with external tools
+* link:{{navprefix}}/tutorials/tutorials-overview[Overview]
 
-** link:{{navprefix}}/external-tool-script-integration[External tools and scripts]
-** link:{{navprefix}}/pendo-integration[Pendo integration with embed]
-** link:{{navprefix}}/sf-integration[Integration with Salesforce]
-** link:{{navprefix}}/vercel-integration[Vercel integration]
 
 [.sidebar-title]
 Additional resources

modules/ROOT/pages/style-customization.adoc

@@ -29,7 +29,7 @@ Custom CSS allows developers to override the default styles and UI element speci
 +
 To customize themes and variables in the CSS file, developers must know the basics of HTML and CSS framework and how to build custom themes. For more information, see xref:css-customization.adoc[Advanced customization with custom CSS]. 
 
-A xref:style-customization_tutorial.adoc[hands-on tutorial] is also available to learn how to test style customization capabilities using Visual Embed Playground.
+A xref:style-customization_tutorial-intro.adoc[hands-on tutorial] is also available to learn how to test style customization capabilities using Visual Embed Playground.
 
 == Scope of customization
 

modules/tutorials/pages/embed-data-driven-app/build-data-driven-app-with-tse-intro.adoc

@@ -0,0 +1,63 @@
+= Build a data-driven app with ThoughtSpot Embedded
+:toc!:
+:linkattrs:
+:sectanchors:
+:page-title: Build a Data-Driven App with ThoughtSpot Embedded
+:page-pageid: embed-data-driven-app__intro
+:page-description: A hands-on guide to embedding a ThoughtSpot Liveboard and Spotter in a host application, built around one real embedding project.
+
+A hands-on guide, built around one real embedding project.
+
+== The scenario
+
+Imagine you're a full-stack developer at SpotStay, a short-term rental company.
+Your team runs an internal portal that hosts use every day to check bookings, occupancy, and maintenance status across their listings.
+Right now, if a host wants to know why occupancy dropped for a listing, they file a ticket and wait for the data team to pull a report.
+
+[div videoContainer]
+--
+video::./images/mktng-tutorials/frame-video.mp4[width=100%,options="autoplay,loop"]
+--
+
+*Your mandate*: give hosts a self-serve view inside the portal they already use.
+
+* Embed a Liveboard so hosts see booking volume, occupancy rate, and average daily rate at a glance.
+* Embed Spotter so hosts can ask follow-up questions in plain language, such as "why did occupancy drop for our Austin listings this week?" without you building a custom query interface for every possible question.
+* Style and lock it down so it feels like part of the portal, not a third-party iframe bolted on the side.
+
+[NOTE]
+====
+Liveboard is an AI augmented dashboard within ThoughtSpot.
+====
+
+This guide follows the build end to end, the same path you'd follow for your own app, and lines up with the SpotStay example on GitHub if you want to follow along in code.
+
+== Before you start
+
+* Confirm access to a ThoughtSpot instance (trial or org instance) with Developer or Admin privilege.
+* Add your app domain to the CSP and CORS allowlist (*Develop* > *Customizations* > *Security Settings*).
+* Confirm content exists to embed: a connected data warehouse, a data model, and a Liveboard.
+* Confirm Spotter is enabled on your instance. This is on by default for most Cloud instances. If you don't see it, ask your ThoughtSpot administrator to enable it.
+
+[NOTE]
+====
+Trial users: sample data is pre-connected. No data setup is required.
+====
+
+== Steps in this tutorial
+
+* xref:build-data-driven-app-with-tse-step-00.adoc[Get into the Developer Portal]
+//* xref:build-data-driven-app-with-tse-step-01.adoc[Set up the project]
+* xref:build-data-driven-app-with-tse-step-02.adoc[Get the base dashboard rendering]
+* xref:build-data-driven-app-with-tse-step-03.adoc[Make it conversational]
+* xref:build-data-driven-app-with-tse-step-04.adoc[Style it to match the portal]
+* xref:build-data-driven-app-with-tse-step-05.adoc[Wire in a custom action]
+//* xref:build-data-driven-app-with-tse-step-06.adoc[Lock it down]
+* xref:build-data-driven-app-with-tse-troubleshooting.adoc[When it doesn't just work]
+* xref:build-data-driven-app-with-tse-summary.adoc[Where to go from here]
+
+++++
+<div class="tutorial-pagination">
+<a class="tutorial-pagination__btn tutorial-pagination__next" href="{{navprefix}}/tutorials/embed-data-driven-app/step-00">Next &rarr;</a>
+</div>
+++++