# Embed a Liveboard visualization

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/tutorials/tse-fundamentals/lesson-08

# Embed a Liveboard visualization

## Pre-conditions

It’s ideal if you’ve done all the lessons so far. Ensure that you have set up the environment and code, and have the `init` method working as described in [lesson 05]({{navprefix}}/{{tse-fundamentals-lesson-05}}).

## Add a nav link and function for the Liveboard visualization

In the `index.html` file add a new `<li>` for the separator and Liveboard visualization. Your code should look like the following. The links need to have an ID to add a listener.

```html
<div id="div-nav-links">
    <ul id="ul-nav-links">
        <li id="search-link">Search</li> <!-- lesson 05 -->
        <li>|</li>
        <li id="sage-link">Sage</li>  <!-- lesson 06 -->
        <li>|</li>
        <li id="liveboard-link">Liveboard</li>  <!-- lesson 07 -->
        <li>|</li>
        <li id="liveboard-viz-link">Visualization</li>  <!-- lesson 08 -->
    </ul>
</div>
```

Now run the application, and you should see the new links. It doesn’t do anything yet, but it’s always good to test code as we add functionality to find errors quickly. The UI could use some style work to make it easier to read, but this layout is sufficient to learn ThoughtSpot Embedded.

![Nav bar Liveboard visualization links](/docs/doc-images/images/tutorials/tse-fundamentals/lesson-08-new-viz-link.png)

## Add a listener for the Liveboard links

In `tse.js` add the following line of code. It adds a listener for the click events, so when the user clicks, it will call the `onVisualization` function. Go ahead and add this line after the one we added for the `liveboard-link`.

```javascript
document.getElementById('liveboard-viz-link').addEventListener('click', onVisualization);
```

Now we have to add the function to get called. After the close of the `onLiveboard` function, add the following function. Right now, it only shows a comment in the console, but that will tell you that it’s being called.

```javascript
const onVisualization = () => {
  console.log('visualization clicked');
}
```

Refresh the application and click on each link. You should see a message in the console window of the developer tools. If not, check for errors. You can also reference the example code (in the src folder).

![Console output](/docs/doc-images/images/tutorials/tse-fundamentals/lesson-08-visualization-console.png)

The Liveboard visualization uses the same LiveboardEmbed we used in the previous lesson, so no additional import is required.

## Generate a Liveboard visualization to embed

Navigate to the Visual Embed SDK playground and select **Liveboard** from the dropdown on the top left. As with the Liveboard, you will be prompted to select a Liveboard and visualization.

![Empty Liveboard page](/docs/doc-images/images/tutorials/tse-fundamentals/lesson-08-empty-visualization.png)

Since this uses the same `LiveboardEmbed` component, it has the same options as the Liveboard _except_ the `Full Height` option is not available. While you can set the full height flag, it will be ignored.

1.  Select a Liveboard from the dropdown  
    You will see a `liveboardId` added to the code.
    
2.  Click **Run**.  
    You should see the full Liveboard show up in the right-hand panel. That’s because we are using the `LiveboardEmbed` component and haven’t selected the visualization yet.
    
3.  Select a visualization from the dropdown.  
    This dropdown only shows the visualizations for the selected Liveboard.
    
4.  Click **Run**  
    You should see just the one visualization and none of the other Liveboard artifacts, such as the header.
    

![Liveboard selected in the playground](/docs/doc-images/images/tutorials/tse-fundamentals/lesson-08-liveboard-viz-selected.png)

## Embed the Liveboard visualization into the application

As with the previous embeds, we’ll just copy the code from the playground into the application. Copy the component creation section. Paste this code into the `onVisualization` function. Then update the embed ID and add the call to `render`. The following shows the complete function with comments removed.

```javascript
const onVisualization = () => {
  const embed = new LiveboardEmbed("#embed", {
    frameParams: {},
    liveboardId: "0dc92611-2643-4c3e-a7c3-e7e421af9fd1",
    vizId: "9bf48c6e-4d2a-4817-9417-e62c0cff184d",
  });

  embed.render();
};
```

## Test the Liveboard visualization embed

The last step is to test the embedded Liveboard. Refresh the application (with cache disabled), and then click the `Visualization` link. Your page should look like the following:

![Liveboard embed results](/docs/doc-images/images/tutorials/tse-fundamentals/lesson-08-visualization-embed-results.png)

## Activities

1.  Add the nav link and handler to your code
    
2.  Use the Playground to create the visualization embed
    
3.  Copy and paste the generated code (adding `render()`) into your application
    
4.  Test the code
    

If you run into problems, you can look at the code in the `src` folder in this section.

## Files changed

-   index.html
    
-   tse.js
    

[← Previous]({{navprefix}}/tutorials/tse-fundamentals/lesson-07) [Next →]({{navprefix}}/tutorials/tse-fundamentals/lesson-09)