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.
Web Components overview
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
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
Embed a dashboard with gd-dashboard, configure its workspace, locale, and read-only mode, and subscribe to dashboard events.
Visualization custom element
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
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
Authenticate Web Components against GoodData using the auth=sso script parameter for automatic SSO or setContext for a programmatic flow.