Integrations
Connect GoodData.UI to your application environment: authentication, embedding, theming, and framework support.
Guides for integrating GoodData.UI into your application: authentication and cross-origin access, embedding dashboards and visualizations, theming, interactivity, the context hooks, Web Components, and framework guides for Angular, Next.js, and Vue.
On a new project, start with Integrate into an existing application and Authenticate to the backend; everything else builds on them. The other sections can be adopted independently as your application grows.
To show a saved dashboard in an existing page without installing any SDK code, embed a dashboard in an iframe. It works in any framework, supports basic customization through URL query parameters, and talks to the host page over postMessage.
Integrate into an existing application
Add GoodData.UI to an existing React application by installing packages and styles, configuring backend and workspace contexts, CORS, and authentication.
Authentication
Pick how your GoodData.UI application authenticates against GoodData Cloud or GoodData.CN — the GoodData session cookie, a JWT from your own portal, or an API token — and set it up.
Renew the session without a redirect
Build an authentication provider that renews an expired GoodData session in a hidden iframe, so users keep their place in the app instead of being sent to the login page.
Cross-origin issues
Resolve CORS errors between your app and GoodData Cloud or GoodData.CN by proxying the API through your dev server or allowing your origin in production.
Embedding
Embed GoodData content at different levels — full dashboards, individual visualizations, or custom visualizations using your own charting library — and apply theming.
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.
Framework guides
Use GoodData.UI in Angular, Next.js, and Vue apps — framework-specific setup via React components or the Web Components wrapper.
Interactivity
Handle user interactions with visualizations, from drill events to loading and error states.
Hooks
Choose the matching React hook to read an SDK provider context or load a plugin-enhanced dashboard.
Platform
Evaluate whether a GoodData.UI version and integration approach are suitable for your application and production environment.