---
title: "Implementing Brainfish Popup Agent With Custom Button"
description: "Overview"
canonical_url: "https://help.brainfi.sh/articles/implementing-brainfish-popup-agent-with-custom-button-bzjb4rFbFh"
md_url: "https://help.brainfi.sh/articles/implementing-brainfish-popup-agent-with-custom-button-bzjb4rFbFh.md"
---
# Implementing Brainfish Popup Agent With Custom Button
## 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 `` section.
```javascript
```
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:
```html
```
And apply the following CSS for styling:
```css
.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:
```html
```
---
## 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:
```html
```
---
## Demo
[https://codepen.io/Ajain-Vivek/pen/ZYEKmJZ](https://codepen.io/Ajain-Vivek/pen/ZYEKmJZ)
## Troubleshooting & Support
If you encounter any issues:
* Ensure your `widgetKey` is correct.
* Check for JavaScript console errors.
* Confirm that the Brainfish CDN is accessible.
* Contact Brainfish support for further assistance.