> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# Embed visualizations

> Render a visualization saved in Analyze with InsightView by getting its identifier, importing the component and styles, and setting its insight prop.

API reference: [InsightView()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.insightview/index.md) (function)

To embed a visualization saved in [Analyze](https://www.gooddata.ai/docs/cloud/create-visualizations/), use the [`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/insightview/index.md) component.

> **Note:**
>  The term 'insight' is an obsolete expression for 'visualizations' but is still employed within the SDK's components and functions.

1. Get the identifier of the visualization. Copy it from the browser's address bar when the visualization is open in Analyze, or use the `Insights` constants that [catalog-export](https://www.gooddata.ai/docs/gooddata-ui/latest/data-layer/data-model/export-catalog/index.md) generates.

2. Render [`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.insightview/index.md) with that identifier, and import the styles of `@gooddata/sdk-ui-ext` once in your app:

    ```tsx
    import { InsightView } from "@gooddata/sdk-ui-ext";
    import "@gooddata/sdk-ui-ext/styles/css/main.css";

    export function MyVisualization() {
        return (
            <div style={{ height: 400 }}>
                <InsightView
                    insight="<visualization-id>"
                    config={{
                        colors: ["rgb(195, 49, 73)", "rgb(168, 194, 86)"],
                        legend: {
                            enabled: true,
                            position: "bottom",
                        },
                    }}
                />
            </div>
        );
    }
    ```

    [`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-ext/sdk-ui-ext.insightview/index.md) reads the backend and the workspace from [`BackendProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.backendprovider/index.md) and [`WorkspaceProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.workspaceprovider/index.md); pass the `backend` and `workspace` props to override them. See [Integrate into an existing application](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/backend-setup/index.md#provide-the-backend-and-workspace).

For every prop of the component, see [`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/insightview/index.md#props).