# Get the base Liveboard rendering

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

Source: https://developers.thoughtspot.com/docs/tutorials/embed-data-driven-app/base-liveboard-rendering

# Get the base Liveboard rendering

Your first real milestone is getting the bookings Liveboard to render inside the portal. Grab the Liveboard ID from the Developer Playground and drop it straight in.

## Step 1: Import the LiveboardEmbed component

Find the file you want to embed the Liveboard in and import the `LiveboardEmbed` component:

```javascript
import { LiveboardEmbed } from '@thoughtspot/visual-embed-sdk/react';
```

Your browser does not support the video tag.

## Step 2: Render the Liveboard

First, decide which Liveboard you want to embed:

1.  In the ThoughtSpot UI, go to **Develop** > **Visual Embed SDK Playground**.
    
2.  Select **Liveboard Embed**, then select the Liveboard you want to embed.
    
3.  The **Code snippet** section updates with the generated code. Copy it directly into your file, or extract only the Liveboard ID.
    

```javascript
function renderLiveboard() {
    const liveboardEmbed = new LiveboardEmbed(container, {
        frameParams: { width: '100%', height: '100%' },
        liveboardId: '<%=liveboardGUID%>', // from the Playground
    });

    liveboardEmbed.on(EmbedEvent.LiveboardRendered, () => {
        console.log('Liveboard rendered');
    });

    liveboardEmbed.render();
}
```

Your browser does not support the video tag.

[← Previous]({{navprefix}}/tutorials/embed-data-driven-app/into-developer-portal) [Next →]({{navprefix}}/tutorials/embed-data-driven-app/make-it-conversational)