# Embed a visualization

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

Source: https://developers.thoughtspot.com/docs/embed-a-viz

# Embed a visualization

This article explains how to embed a single ThoughtSpot visualization in your Web page, portal, or application.

A visualization is a single answer pinned to a Liveboard. Pinned visualizations appear without the search bar or other options to change the visualization.

You cannot embed a saved answer as an individual visualization. Saved answers can be used in the **SearchEmbed** component, where they will load with the search bar and other options available with ThoughtSpot search. Any visualization you want to embed using **LiveboardEmbed** must exist on a Liveboard object in ThoughtSpot.

> **NOTE:** If you want to display multiple charts or tables that have been saved in a Liveboard, try to embed a single Liveboard rather than multiple individual visualizations. This helps in improving your application performance. If you must embed multiple visualizations, prefetch static resources before loading the page. We recommend that you limit the page to display not more than four visualizations at a time.

## Import the LiveboardEmbed package

Import the visualization SDK library to your application environment:

**npm**

```JavaScript
import {
    LiveboardEmbed,
    AuthType,
    init,
    prefetch,
    EmbedEvent
}
from '@thoughtspot/visual-embed-sdk';
```

**ES6**

```JavaScript
<script type = 'module'>
    import {
        LiveboardEmbed,
        AuthType,
        init,
        prefetch
    }
from 'https://cdn.jsdelivr.net/npm/@thoughtspot/visual-embed-sdk/dist/tsembed.es.js';
```

## Initialize the SDK

[Initialize the SDK]({{navprefix}}/{{getting-started}}#initSdk) and define authentication attributes.

## Create an instance of the LiveboardEmbed class

```JavaScript
const liveboardEmbed = new LiveboardEmbed(document.getElementById('ts-embed'), {
    frameParams: {
        width: '100%',
        height: '100%',
    },
    liveboardId: '<%=liveboardGUID%>',
    vizId: '<%=vizGUID%>',
});
```

For more information about the visualization embed object, classes, methods, interface properties, and enumeration members, see the following pages:

-   [LiveboardEmbed]({{navprefix}}/{{LiveboardEmbed}})
    
-   [LiveboardViewConfig]({{navprefix}}/{{LiveboardViewConfig}})
    
-   [Actions]({{navprefix}}/{{Action}})
    

## Register, handle, and trigger events

Register event listeners:

```JavaScript
liveboardEmbed.on(EmbedEvent.init, showLoader)
liveboardEmbed.on(EmbedEvent.load, hideLoader)
```

For more information about events, see the following pages:

-   [HostEvent]({{navprefix}}/{{HostEvent}})
    
-   [EmbedEvent]({{navprefix}}/{{EmbedEvent}})
    
-   [Events and app integration]({{navprefix}}/{{embed-events}})
    

## Render the embedded visualization

Construct the URL for the embedded visualization and render the embedded content:

```javaScript
liveboardEmbed.render();
```

## Test your embedding

1.  Load the embedded visualization in your app.
    
    ![Visualization embed](/docs/doc-images/images/embed-viz.png)
    
2.  Explore the visualization, and verify if objects render and show the desired data.
    

## Additional resources

-   For code examples, see [Code samples]({{navprefix}}/{{code-samples}}).
    
-   For more information about the SDK APIs and attributes, see [Visual Embed SDK Reference Guide]({{navprefix}}/{{VisualEmbedSdk}}).