# Embed the Liveboard view

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

Source: https://developers.thoughtspot.com/docs/tutorials/spottercode-embed/embed-liveboard-view

# Embed the Liveboard view

With `init()` in place, the first goal is to render a host’s listing-performance Liveboard inside the SpotStay portal. Write a specific prompt rather than a vague one:

```text
"I want to embed a ThoughtSpot Liveboard showing listing performance in my React app.
Use the available tools to get this information and generate the embed code."
```

Your browser does not support the video tag.

What SpotterCode needs to complete the task:

-   The ThoughtSpot host URL (already set in `init()`)
    
-   The Liveboard GUID (retrieved from the Developer Playground)
    
-   Confirmation of the authentication type you’re already using
    

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

const HostDashboard = () => {
    const embedRef = useEmbedRef();

    return (
        <LiveboardEmbed
            ref={embedRef}
            liveboardId="<your-spotstay-listing-liveboard-guid>"
        />
    );
};

export default HostDashboard;
```

## Make it host-specific

A shared Liveboard shows every listing on the platform. You need each host to see only their own. Prompt for a runtime filter scoped to the logged-in host:

```text
"Show a code example for embedding a Liveboard with a runtime filter where host_id equals
the logged-in user's ID, using the Visual Embed SDK for React."
```

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

const HostDashboard = ({ hostId }) => {
    const embedRef = useEmbedRef();

    const onLiveboardRendered = () => {
        embedRef.current.trigger(HostEvent.UpdateRuntimeFilters, [
            {
                columnName: 'host_id',
                operator: RuntimeFilterOp.EQ,
                values: [hostId],
            },
        ]);
    };

    return (
        <LiveboardEmbed
            ref={embedRef}
            liveboardId="spotstay-listing-performance-lb"
            onLiveboardRendered={onLiveboardRendered}
        />
    );
};

export default HostDashboard;
```

> **NOTE:** Your prompt has to carry business context ("the logged-in user’s ID") that isn’t in any documentation. SpotterCode generates the mechanism; you supply the SpotStay-specific meaning.

Your browser does not support the video tag.

[← Previous]({{navprefix}}/tutorials/spottercode-embed/set-up-spottercode) [Next →]({{navprefix}}/tutorials/spottercode-embed/embed-spotter)