thoughtspot · sastaachar · Jun 15, 2025 · Jun 15, 2025 · Jun 15, 2025 · Jun 17, 2025
diff --git a/visual-embed/embed-events/route-change/.codesandbox/tasks.json b/visual-embed/embed-events/route-change/.codesandbox/tasks.json
@@ -0,0 +1,21 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Installing Dependencies",
+      "command": "npm install"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "npm run dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 3000
+      }
+    } 
+  }
+}
diff --git a/visual-embed/embed-events/route-change/.env b/visual-embed/embed-events/route-change/.env
@@ -0,0 +1,3 @@
+VITE_THOUGHTSPOT_HOST=https://training.thoughtspot.cloud
+VITE_THOUGHTSPOT_USERNAME=code-sandbox
+VITE_THOUGHTSPOT_PASSWORD="3mbed+#3xplz" 
diff --git a/visual-embed/embed-events/route-change/.gitignore b/visual-embed/embed-events/route-change/.gitignore
@@ -0,0 +1 @@
+!.env
diff --git a/visual-embed/embed-events/route-change/README.md b/visual-embed/embed-events/route-change/README.md
@@ -0,0 +1,55 @@
+# Route Change Embed Event
+
+This example demonstrates how to handle route changes in ThoughtSpot embeds using React. It shows how to:
+
+1. Listen for route changes in embedded ThoughtSpot components
+2. Extract liveboard IDs from URLs
+3. Fetch liveboard metadata using the ThoughtSpot API
+4. Display toast notifications for user feedback
+
+## Demo
+
+Open in [Codesandbox](https://githubbox.com/thoughtspot/developer-examples/tree/main/visual-embed/embed-events/route-change)
+
+## Documentation
+
+- [Visual Embed SDK](https://developers.thoughtspot.com/docs/VisualEmbedSdk)
+- [Route Change Embed Event](https://developers.thoughtspot.com/docs/Enumeration_EmbedEvent#_routechange)
+- [Metadata API](https://developers.thoughtspot.com/docs/rest-apiv2-search#_search_metadata)
+
+## Run locally
+
+```bash
+$ git clone https://github.com/thoughtspot/developer-examples
+$ cd visual-embed/embed-events/route-change
+```
+
+```bash
+$ npm i
+```
+
+```bash
+$ npm run dev
+```
+
+## Preview
+
+<p align="center">
+    <img src="preview.png" width="800" alt="Route Change Handler Preview" />
+</p>
+
+### Environment Variables
+
+Update the `.env` file in the root directory with the following variables to use your own ThoughtSpot instance:
+
+```
+VITE_THOUGHTSPOT_HOST=your-thoughtspot-host
+VITE_THOUGHTSPOT_USERNAME=your-username
+VITE_THOUGHTSPOT_PASSWORD=your-password
+```
+
+### Technology labels
+
+- React
+- TypeScript
+- Web
diff --git a/visual-embed/embed-events/route-change/index.html b/visual-embed/embed-events/route-change/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/ts-logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ThoughtSpot Route Change Handler Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>