Implementing Brainfish Popup Agent With Custom Button
1min read
Overview
This document provides step-by-step instructions to integrate Brainfish pop up widget with custom button into your project. Make sure to hide the button on agent configuration page before your start
Step 1: Include Brainfish in Your Webpage
To integrate Brainfish, add the following script to your HTML document inside the <head> section.
<script type="module">
import Brainfish from "https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js";
// Initialize Brainfish widget
Brainfish.Widgets.init({
widgetKey: "your_brainfish_widget_key"
});
</script>
Replace your_brainfish_widget_key with your actual Brainfish widget key.
Step 2: Adding a Floating Action Button (FAB)
To trigger the Brainfish widget, you can use a custom floating action button:
<button id="brainfish-button" class="brainfish-trigger-button">
<i class="ph ph-chat-circle-dots"></i>
</button>
And apply the following CSS for styling:
.brainfish-trigger-button {
position: fixed;
bottom: 10px;
right: 20px;
width: 60px;
height: 60px;
background-color: #2C4BFF;
color: #fff;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
Step 3: Toggle Brainfish Widget Programmatically
You can control the Brainfish widget programmatically using JavaScript:
<script>
let isWidgetOpen = false;
function toggleBrainfishWidget() {
if (isWidgetOpen) {
Brainfish.Widgets.close();
} else {
Brainfish.Widgets.open();
}
isWidgetOpen = !isWidgetOpen;
}
document.addEventListener("DOMContentLoaded", () => {
const button = document.getElementById("brainfish-button");
if (button) {
button.addEventListener("click", toggleBrainfishWidget);
}
});
</script>
Step 4: Listening to Widget Events
Available Events
- onBrainfishReady: Triggered when the widget is fully initialized.
- onBrainfishWidgetOpen: Triggered when the widget is opened.
- onBrainfishWidgetClose: Triggered when the widget is closed.
You can listen to Brainfish widget events for better tracking and analytics:
<script>
window.addEventListener("onBrainfishWidgetOpen", () => {
console.log("Brainfish widget opened");
});
window.addEventListener("onBrainfishWidgetClose", () => {
console.log("Brainfish widget closed");
});
</script>
Demo
https://codepen.io/Ajain-Vivek/pen/ZYEKmJZ
Troubleshooting & Support
If you encounter any issues:
- Ensure your
widgetKeyis correct. - Check for JavaScript console errors.
- Confirm that the Brainfish CDN is accessible.
- Contact Brainfish support for further assistance.