> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown. # 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. GoodData Cloud and GoodData.CN host a Web Components library that your application loads to embed dashboards, individual visualizations, and the AI Assistant. The library is a thin wrapper around the [`InsightView`](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/insightview/index.md), [`Dashboard`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.dashboard/index.md), and [`GenAIAssistant`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-gen-ai/sdk-ui-gen-ai.genaiassistant/index.md) components. Embedding stays simple, and the host application can still integrate closely with the embedded content. In the simplest form, an integration looks like this: ```html

``` > **Note:** > The Web Components library runs GoodData.UI under the hood. It loads React and the other dependencies it needs, in an isolated scope that doesn't conflict with other JavaScript in your app. ## [Choosing the right embedding option](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#choosing-the-right-embedding-option) GoodData offers several ways to embed analytics: iframe embedding for dashboards, and the GoodData.UI React library for dashboards and visualizations. The Web Components library sits between the two. It's more flexible than an iframe and simpler to integrate than the React library. ### [When to use the Web Components library](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#when-to-use-the-web-components-library) - You don't want iframe embedding, because of the overhead it creates or because of your company's security and compliance requirements. - You want to embed a single visualization; iframe embedding works only for a complete dashboard. - Your host application uses Angular, Vue, or another non-React framework. - Your application uses a React version that GoodData.UI doesn't support. - You can't or don't want to install packages from npm, for example on a GoodData.CN deployment in a restricted network. Your GoodData.CN instance serves the library itself; see [How the library loads](#load-the-library). ### [When to use an iframe instead](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#when-to-use-an-iframe-instead) If you want the simplest possible dashboard embedding and don't need deep integration between the host application and the dashboard, an iframe is enough. An iframe also fits when you want dashboard plugins but can't provide a Module Federation runtime, which `gd-dashboard-embed` needs to load plugins linked to the dashboard. The legacy `gd-dashboard` element doesn't load plugins at all. ### [When to use the GoodData.UI React library instead](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#when-to-use-the-gooddataui-react-library-instead) If the host application is already written in React, use the GoodData.UI React components. They are more flexible, and you avoid loading a second copy of React and ReactDOM. ## [How the library loads](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#load-the-library) The library is a JavaScript module that your GoodData instance serves at `/components/.js`. You load it with a ` ``` ## [Prerequisites and limitations](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#prerequisites-and-limitations) ### [Supported web browsers](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#supported-web-browsers) The library needs a browser that supports custom elements; it doesn't work in older browsers such as Internet Explorer. See the [Custom Elements browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry#browser_compatibility) table on MDN. ### [Cross-origin requests](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#cross-origin-requests) The script makes requests from your application's origin to the GoodData host, so the organization must allow your origin. See [Allow your origin in production](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/cross-origin-issues/index.md#allow-your-origin-in-production). ### [Content Security Policy (CSP)](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#content-security-policy-csp) If your server sends [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) headers, add the GoodData host to the `script-src`, `style-src`, `font-src`, and `img-src` policies. For a GoodData host at `example.gooddata.com`, the policy could look like this: ```text script-src 'self' 'unsafe-inline' example.gooddata.com; img-src 'self' data: blob: example.gooddata.com; style-src 'self' 'unsafe-inline' example.gooddata.com; font-src 'self' data: example.gooddata.com; ``` ### [Third-party cookie blocking](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#third-party-cookie-blocking) The script authenticates its requests to the GoodData host with the GoodData session cookie. When your application runs on a different site than GoodData, the browser treats that cookie as a third-party cookie, and browsers that block third-party cookies make the requests fail even though the user signed in. Serve GoodData from the same site as your application, for example `https://analytics.example.com` next to `https://example.com`. [Cookies across sites](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/authentication/index.md#cookies-across-sites) explains the problem and the other fixes. ### [Dashboard plugins](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#dashboard-plugins) The legacy `gd-dashboard` element doesn't load dashboard plugins. The `gd-dashboard-embed` element does; see [Dashboard plugins](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/embed-custom-elements/index.md#dashboard-plugins). Plugins linked to the dashboard on the server need the `moduleFederationIntegration` property; without it, only the plugins you pass through `extraPlugins` load. If you can provide neither, embed the dashboard with an iframe or the React [`Dashboard`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-dashboard/sdk-ui-dashboard.dashboard/index.md) component. ### [CSS class name collisions](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/web-components/web-components-overview/#css-class-name-collisions) The script adds a CSS `` to the `` of your page when it loads. The library's CSS class names can, rarely, collide with your own. If that happens, [open a GitHub issue](https://github.com/gooddata/gooddata-ui-sdk/issues/new).