---
title: "Brainfish Search Bar & Pop-up Modal Guide"
description: "This guide details how to implement a \"Search Bar Pop-up\" pattern on your website."
canonical_url: "https://help.brainfi.sh/articles/brainfish-search-bar-pop-up-modal-guide-W64i6xUVZG"
md_url: "https://help.brainfi.sh/articles/brainfish-search-bar-pop-up-modal-guide-W64i6xUVZG.md"
---
# Brainfish Search Bar & Pop-up Modal Guide
This guide details how to implement a **"Search Bar Pop-up"** pattern on your website.
Unlike a standard floating chat widget, this implementation places a **mock search bar** directly on your page. When users click this bar to type, it immediately triggers a centralized **pop-up modal** containing the active Brainfish search interface.
Here’s an example of how it can look:
## Prerequisites
* Access to your website's HTML head and body.
* Your unique **Brainfish Widget Key**.
## Step 1: Add the Brainfish Configuration
Place the following code inside the tag of your website. This initializes the Brainfish logic in the background so it's ready when the modal opens.
**Important:** Replace YOUR_WIDGET_KEY_HERE with your actual Brainfish widget key.
```javascript
```
## Step 2: Add the Styles (CSS)
Add the following CSS to your website. These styles define two main elements:
1. **The Mock Search Bar:** Styled to look like a text input but functions as a button.
2. **The Pop-up Modal:** A centered overlay that houses the actual Brainfish widget.
```javascript
/* --- Brainfish Integration Styles --- */
.bf-widget-wrapper {
font-family: system-ui, -apple-system, sans-serif;
box-sizing: border-box;
}
/* 1. Mock Search Bar (The Trigger) */
/* This mimics the look of a real input field */
.bf-trigger-btn {
display: flex;
align-items: center;
width: 100%;
max-width: 512px; /* Maximum width of the search bar */
padding: 12px 16px;
background-color: #ffffff;
border: 1px solid #d1d5db;
border-radius: 12px; /* Rounded corners */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
cursor: pointer; /* Shows hand icon to indicate clickability */
transition: border-color 0.2s, box-shadow 0.2s;
gap: 12px;
margin: 20px auto; /* Centering logic */
}
/* Hover effects to encourage interaction */
.bf-trigger-btn:hover {
border-color: #6366f1; /* Highlight color */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.bf-icon {
width: 20px;
height: 20px;
color: #9ca3af;
}
.bf-placeholder {
color: #6b7280;
font-size: 16px;
user-select: none;
}
/* 2. Pop-up Modal Overlay */
.bf-modal-overlay {
display: none; /* Hidden by default */
position: fixed;
inset: 0;
background-color: rgba(17, 24, 39, 0.75); /* Dark dimmed background */
z-index: 9999;
justify-content: center;
align-items: start;
padding: 20px;
overflow-y: auto;
}
/* State class to show the modal */
.bf-modal-overlay.open {
display: flex;
}
/* Modal Content Container */
.bf-modal-content {
background-color: white;
width: 100%;
max-width: 800px; /* Width of the pop-up window */
margin-top: 60px;
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
position: relative;
animation: bfFadeIn 0.3s ease-out;
}
/* Smooth fade-in animation */
@keyframes bfFadeIn {
from { opacity: 0; transform: translateY(10px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Close Button (X) */
.bf-close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #9ca3af;
cursor: pointer;
padding: 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.bf-close-btn:hover {
color: #4b5563;
background-color: #f3f4f6;
}
/* Container for the actual Brainfish Widget */
.bf-widget-area {
padding: 40px 16px 20px 16px;
width: 100%;
box-sizing: border-box;
}
```
## Step 3: Add the HTML Structure
Paste the following HTML code where you want the search bar to appear.
This includes both the **Visible Trigger Button** (the fake search bar) and the **Hidden Modal Structure**.
```javascript
```
## Step 4: Add the Interactivity (JavaScript)
Add this script before the closing tag. This script listens for clicks on the "Mock Search Bar" to open the modal and handles closing it via the "X" button, the Escape key, or clicking the background.
```javascript
```