liveboard

liveboard-embed

This is a small example of how embed liveboard into your application.

Key Usage

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

// Initialize ThoughtSpot SDK
init({
  thoughtSpotHost: "https://your-instance.thoughtspot.cloud",
  authType: AuthType.Basic,
  username: "your-username",
  password: "your-password",
});

// Embed a liveboard
const embed = new LiveboardEmbed(document.getElementById("ts-embed"), {
  frameParams: { width: "100%", height: "100%" },
  liveboardId: "your-liveboard-id",

  // Show only specific actions in the toolbar
  visibleActions: [Action.DownloadAsPdf, Action.Share, Action.DrillDown],

  // Or hide specific actions instead
  // hiddenActions: [Action.Edit, Action.Delete],

  // Disable actions without hiding them
  // disabledActions: [Action.Edit],
});

// Listen to lifecycle events
embed.on(EmbedEvent.Load, () => console.log("Liveboard loaded"));
embed.on(EmbedEvent.Error, (e) => console.error("Error", e));

embed.render();

Demo

Open in Codesandbox

Documentation

• API Reference for embedding liveboard.

Environment

The .env file contains values for runing the demo.

Run locally

$ git clone https://github.com/thoughtspot/developer-examples
$ cd visual-embed/liveboard
$ create .env file using .env.sample

$ npm i

$ npm run dev

Structure

• src/pages Includes codes to embed liveboard with multiple options.

Demo

This example includes demos for below scenarios

• Basic Embedding
• Embedding with Full Height
• Embedding liveboard with multiple tabs
• Embedding using React component

Technology labels

• React
• Typescript