Embedding ThoughtSpot with SpotterCode

You’re a full-stack developer at SpotStay, a short-term rental platform. Your goal is to give hosts a self-serve analytics view inside the SpotStay host portal, something hosts can open to see how their listings are performing, without filing a support ticket or waiting on a data team.

Two things are on your list:

Embed a Liveboard so hosts can see occupancy, revenue, and booking trends for their own listings.
Embed Spotter so hosts can ask follow-up questions in plain language, such as “why did my weekend bookings drop in March?”, without you building a custom query interface.

You already know the Visual Embed SDK. What you don’t want to do is keep tabbing out to documentation for every parameter, event, and configuration option. That’s the problem SpotterCode solves for any embedding task.

SpotterCode is the ThoughtSpot developer agent, purpose-built for embedded use cases. It answers from the current ThoughtSpot documentation and generates production-ready code tailored to your framework, so you spend less time moving between documentation and your IDE.

Note	Liveboard is an AI-augmented dashboard within ThoughtSpot.

Before you start: configure your ThoughtSpot instance🔗

Before any embed renders, two things must be true: your SpotStay portal domain is allowed to connect, and the SDK knows which ThoughtSpot cluster to use. Skipping this step is the most common reason a first embed shows a blank frame instead of a Liveboard.

1. Allowlist the portal domain🔗

In the ThoughtSpot UI, an admin or developer-privileged user navigates to Develop > Customizations > Security Settings and adds the SpotStay portal domain (for example, https://portal.spotstay.com) to the CSP and CORS allowlists. Without this, the browser blocks the embed regardless of how correct the code is.

Note	This is a one-time setup step. It’s an admin and configuration task, not something SpotterCode generates. Complete this before you write a single line of embed code, so you aren’t debugging a CORS error and assuming it’s your code.

2. Get the cluster hostname🔗

Your SpotStay ThoughtSpot instance lives at a specific hostname. For a Cloud instance, it looks like spotstay.thoughtspot.cloud. If you’re not sure where to find it, ask SpotterCode:

"How do I find the hostname of my ThoughtSpot application instance?"

3. Choose an authentication type🔗

The tutorial-friendly option is AuthType.None: it prompts for a ThoughtSpot login at runtime and is fine for local development. It is not what ships to production. Before you decide, ask SpotterCode to walk you through the real options:

"What authentication types does the Visual Embed SDK support, and which one is recommended for a production embed with external users?"

Here’s what you’ll get back: AuthType.None is for testing only. Trusted Authentication (server-side token exchange) is the recommended pattern for production. It suits external, non-ThoughtSpot-licensed users such as SpotStay’s hosts.

4. Initialize the SDK once, at the app root🔗

Prompt for the init call before touching any individual embed component:

"Show me how to initialize the Visual Embed SDK in a React app using Trusted Authentication, with a fallback note on AuthType.None for local development."

// Framework-agnostic. Call this once at your app entry point (React, Vue, or vanilla JS).

import { init, AuthType } from '@thoughtspot/visual-embed-sdk';

init({
    thoughtSpotHost: 'https://spotstay.thoughtspot.cloud',
    authType: AuthType.TrustedAuthTokenCookieless, // (1)
    // authType: AuthType.None,                    // (2)
});

Production: server-issued token. See Authentication for setup.
Local development only. Do not ship this.