Integrating Brainfish Widgets with HTML
1min read
The intro, "Quick Start", "Installation", "Configuration", "User Identification", "Custom Triggers", and "Troubleshooting" sections all stay exactly as they are live today.
The body should end with the corrected "Complete Example" section below, and nothing after it.
Complete Example
Here is a complete, production-ready HTML page that initializes the Brainfish widget, identifies the signed-in user, and adds a custom trigger button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<!-- Brainfish widget -->
<script type="module">
import Brainfish from "https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js";
// 1) Initialize the widget
Brainfish.Widgets.init({
widgetKey: "bf_agent_YOUR_KEY_HERE"
});
// 2) Identify the signed-in user (optional but recommended)
Brainfish.Widgets.identify({
userId: "12345",
email: "john.doe@example.com",
properties: {
teamId: "team_67890",
subscription: "premium",
isAdmin: true
}
});
// 3) Wire up custom trigger buttons after the widget is ready
window.addEventListener("onBrainfishReady", () => {
console.log("Brainfish is ready");
});
</script>
</head>
<body>
<h1>Welcome</h1>
<!-- Custom trigger button -->
<button class="brainfish-trigger-button"
onclick="Brainfish.Widgets.open()">
Need help?
</button>
</body>
</html>
Replace bf_agent_YOUR_KEY_HERE with your actual widget key from the Brainfish
dashboard.
Notes
widgetKeyis required; everything else is optional.identify()can be called as soon as the widget is loaded; if your user is already signed in at page load, call it directly afterinit().- For framework-specific guides (React, Vue, Angular, Salesforce LWC), see the matching articles in the Widgets & Deployment section.