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:
<script type="module">
import Brainfish from "https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js";
Brainfish.Widgets.init({ widgetKey: "bf_agent_YOUR_KEY" });
</script>
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 <head> |
| 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
- Implementing Brainfish Popup Agent With Custom Button
- Brainfish Widget - Contextual Help
- Brainfish Widget Overrides Guide
Framework guides
- Integrating Brainfish Widgets with HTML
- Integrating Brainfish Widgets with React
- Integrating Brainfish Widgets with Vue
- Integrating Brainfish Widgets with Angular
- Integrating Brainfish Widgets with Salesforce Lightning Web Components (LWC)
Deployment patterns
- Installing Brainfish in Micro-UI Architectures
- How to Integrate Brainfish Widgets with Google Tag Manager: A Step-by-Step Guide
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 — configure the agent before you embed it.
- Help Center — the alternative to embedding: host on Brainfish.
- Handoffs & Actions — wire up live chat, ticketing, or custom callbacks after answers.