--- title: "Widgets & embedding" description: "Brainfish web agents (Search bar, Sidebar, Popup) install as a small JavaScript module in your product or website. This section covers everything a developer needs to embed Brainfish, including framework guides, deployment patterns, custom triggers, and CSP/cache considerations." canonical_url: "https://help.brainfi.sh/articles/widgets-deployment-wZPkxMx6q0" md_url: "https://help.brainfi.sh/articles/widgets-deployment-wZPkxMx6q0.md" --- # Widgets & embedding Brainfish web agents (Search bar, Sidebar, Popup) install as a small JavaScript module in your product or website. This section covers everything a developer needs to embed Brainfish, including framework guides, deployment patterns, custom triggers, and CSP/cache considerations. ## How embedding works A Brainfish web agent is a JavaScript module loaded from `https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js`. You initialize it with a `widgetKey` and the rest is handled in the browser: ```html ``` You can also install via npm (`npm install @brainfish-ai/web-widget`) for bundled apps, design systems, and micro-frontend shells. ## Where the snippet goes | Architecture | Recommended install point | |----|----| | Single-page app (React, Vue, Angular) | App entry / root layout component | | Micro-frontend / federated UI | Shell or shared design system layer | | Server-rendered site | Layout template `` | | No-code / Tag Manager | Inject via Google Tag Manager (with the no-import workaround) | | Salesforce Lightning | Lightning Web Component using `loadScript` | Whichever entry point you choose, install **once** at the highest shared layer so every page inherits the agent automatically. ## Articles in this section ### Reference embeds * [Brainfish Search Bar & Pop-up Modal Guide](/articles/brainfish-search-bar-pop-up-modal-guide-W64i6xUVZG) * [Implementing Brainfish Popup Agent With Custom Button](/articles/implementing-brainfish-popup-agent-with-custom-button-bzjb4rFbFh) * [Brainfish Widget - Contextual Help](/articles/brainfish-widget-contextual-help-KITzgbolQh) * [Brainfish Widget Overrides Guide](/articles/brainfish-widget-overrides-guide-K96JtYxorD) ### Framework guides * [Integrating Brainfish Widgets with HTML](/articles/integrating-brainfish-widgets-with-html-hJIRbvspyM) * [Integrating Brainfish Widgets with React](/articles/integrating-brainfish-widgets-with-react-zzyuRXbFWH) * [Integrating Brainfish Widgets with Vue](/articles/integrating-brainfish-widgets-with-vue-Hxftjzoajs) * [Integrating Brainfish Widgets with Angular](/articles/integrating-brainfish-widgets-with-angular-DBGpDomtga) * [Integrating Brainfish Widgets with Salesforce Lightning Web Components (LWC)](/articles/integrating-brainfish-widgets-with-salesforce-lightning-web-components-lwc-KY4yuFtfgU) ### Deployment patterns * [Installing Brainfish in Micro-UI Architectures](/articles/installing-brainfish-in-micro-ui-architectures-hUtyDYOuK8) * [How to Integrate Brainfish Widgets with Google Tag Manager: A Step-by-Step Guide](/articles/how-to-integrate-brainfish-widgets-with-google-tag-manager-a-step-by-step-guide-5KShJpWwaU) ## Content Security Policy (CSP) If your site enforces CSP, allow these Brainfish domains: ``` frame-src https://app.brainfi.sh https://agent.brainfi.sh connect-src wss://analytic.brainfi.sh ``` See the framework guides for full examples. ## Related sections * [Agents](/articles/agents-ryGZuSEuZJ) — configure the agent before you embed it. * [Help Center](/articles/help-center-Cf6kyAsfiT) — the alternative to embedding: host on Brainfish. * [Handoffs & Actions](/articles/handoffs-actions-wATQD30VGo) — wire up live chat, ticketing, or custom callbacks after answers.