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

# Web Components

> Custom HTML elements that embed GoodData dashboards, visualizations, and the AI assistant in any framework or vanilla HTML, without a direct React dependency.

Custom HTML elements (`gd-dashboard-embed`, `gd-insight-embed`, `gd-ai-assistant`, and others) that work in any framework or in plain HTML. A single `<script>` tag loads the runtime and sets the workspace context.

Web Components suit hosts that don't use React, or use a React version GoodData.UI doesn't support. In a React app, use the GoodData.UI React components instead. For new integrations, use `gd-dashboard-embed` and `gd-insight-embed`; the legacy `gd-dashboard` and `gd-insight` stay for existing integrations.

## Pages

- [Web Components overview](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/index.md): Understand what the Web Components library is, when to choose it over an iframe or the React library, how it loads, and what limits it has.
- [Embed elements](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/embed-custom-elements/index.md): Embed a dashboard or a saved visualization with gd-dashboard-embed and gd-insight-embed, and drive them through properties, methods, and events.
- [Dashboard custom element](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/dashboard-custom-element/index.md): Embed a dashboard with gd-dashboard, configure its workspace, locale, and read-only mode, and subscribe to dashboard events.
- [Visualization custom element](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/insight-custom-element/index.md): Embed a saved visualization with the legacy gd-insight element, set its workspace, locale, title, filters, and size, and subscribe to its events.
- [AI Assistant custom element](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/ai-assistant-custom-element/index.md): Embed the AI Assistant with gd-ai-assistant, set its workspace and locale, subscribe to its chat events, and compose the chat from several elements.
- [Web Components authentication](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-auth/index.md): Authenticate Web Components against GoodData using the auth=sso script parameter for automatic SSO or setContext for a programmatic flow.