Brainfish Help Center - 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:

Pop up Searchbar example

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 <head> 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.

<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: "YOUR_WIDGET_KEY_HERE", // <-- REPLACE THIS WITH YOUR KEY
  });

  // 2. (Optional) Identify the user
  // If your user is logged in, you can pass their details here. 
  Brainfish.Widgets.identify({
    userId: "12345", 
    email: "user@example.com",
    // Add other custom attributes as needed
  });
</script>

Step 2: Add the Styles (CSS)

Add the following CSS to your website. These styles define two main elements:

The Mock Search Bar: Styled to look like a text input but functions as a button.
The Pop-up Modal: A centered overlay that houses the actual Brainfish widget.

/* --- 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.

<div class="bf-widget-wrapper">

    <!-- 1. The Trigger Button -->
    <!-- This looks like a search input but is actually a button -->
    <button id="bfOpenBtn" class="bf-trigger-btn" type="button">
        <!-- Search Icon -->
        <svg class="bf-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <!-- Placeholder Text -->
        <span class="bf-placeholder">Search the Help Center...</span>
    </button>

    <!-- 2. The Pop-up Modal (Hidden by default) -->
    <div id="bfModal" class="bf-modal-overlay">
        <div class="bf-modal-content">
            <!-- Close "X" Button -->
            <button id="bfCloseBtn" class="bf-close-btn" type="button" aria-label="Close">
                <svg class="bf-icon" style="width: 24px; height: 24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
            
            <!-- The Actual Brainfish Search Widget -->
            <!-- This loads inside the modal when it opens -->
            <div class="bf-widget-area">
                <brainfish-search-widget />
            </div>
        </div>
    </div>
</div>

Step 4: Add the Interactivity (JavaScript)

Add this script before the closing </body> 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.

<script>
    (function() {
        const modal = document.getElementById('bfModal');
        const openBtn = document.getElementById('bfOpenBtn');
        const closeBtn = document.getElementById('bfCloseBtn');

        function openModal() {
            modal.classList.add('open');
            document.body.style.overflow = 'hidden'; // Locks page scroll
        }

        function closeModal() {
            modal.classList.remove('open');
            document.body.style.overflow = ''; // Unlocks page scroll
        }

        // Open modal when search bar is clicked
        if (openBtn) openBtn.addEventListener('click', openModal);
        
        // Close modal when X is clicked
        if (closeBtn) closeBtn.addEventListener('click', closeModal);

        // Close when clicking the dark background overlay
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            });
        }

        // Close when pressing the Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && modal.classList.contains('open')) {
                closeModal();
            }
        });
    })();
</script>

This guide details how to implement a "Search Bar Pop-up" pattern on your website.

Here’s an example of how it can look:

Pop up Searchbar example

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 <head> 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.

<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: "YOUR_WIDGET_KEY_HERE", // <-- REPLACE THIS WITH YOUR KEY
  });

  // 2. (Optional) Identify the user
  // If your user is logged in, you can pass their details here. 
  Brainfish.Widgets.identify({
    userId: "12345", 
    email: "user@example.com",
    // Add other custom attributes as needed
  });
</script>

Step 2: Add the Styles (CSS)

Add the following CSS to your website. These styles define two main elements:

The Mock Search Bar: Styled to look like a text input but functions as a button.
The Pop-up Modal: A centered overlay that houses the actual Brainfish widget.

/* --- 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.

<div class="bf-widget-wrapper">

    <!-- 1. The Trigger Button -->
    <!-- This looks like a search input but is actually a button -->
    <button id="bfOpenBtn" class="bf-trigger-btn" type="button">
        <!-- Search Icon -->
        <svg class="bf-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <!-- Placeholder Text -->
        <span class="bf-placeholder">Search the Help Center...</span>
    </button>

    <!-- 2. The Pop-up Modal (Hidden by default) -->
    <div id="bfModal" class="bf-modal-overlay">
        <div class="bf-modal-content">
            <!-- Close "X" Button -->
            <button id="bfCloseBtn" class="bf-close-btn" type="button" aria-label="Close">
                <svg class="bf-icon" style="width: 24px; height: 24px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
            
            <!-- The Actual Brainfish Search Widget -->
            <!-- This loads inside the modal when it opens -->
            <div class="bf-widget-area">
                <brainfish-search-widget />
            </div>
        </div>
    </div>
</div>

Step 4: Add the Interactivity (JavaScript)

<script>
    (function() {
        const modal = document.getElementById('bfModal');
        const openBtn = document.getElementById('bfOpenBtn');
        const closeBtn = document.getElementById('bfCloseBtn');

        function openModal() {
            modal.classList.add('open');
            document.body.style.overflow = 'hidden'; // Locks page scroll
        }

        function closeModal() {
            modal.classList.remove('open');
            document.body.style.overflow = ''; // Unlocks page scroll
        }

        // Open modal when search bar is clicked
        if (openBtn) openBtn.addEventListener('click', openModal);
        
        // Close modal when X is clicked
        if (closeBtn) closeBtn.addEventListener('click', closeModal);

        // Close when clicking the dark background overlay
        if (modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            });
        }

        // Close when pressing the Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && modal.classList.contains('open')) {
                closeModal();
            }
        });
    })();
</script>

Brainfish Search Bar & Pop-up Modal Guide

Share

Prerequisites

Step 1: Add the Brainfish Configuration

Step 2: Add the Styles (CSS)

Step 3: Add the HTML Structure

Step 4: Add the Interactivity (JavaScript)

Share

Brainfish Search Bar & Pop-up Modal Guide

Share

Prerequisites

Step 1: Add the Brainfish Configuration

Step 2: Add the Styles (CSS)

Step 3: Add the HTML Structure

Step 4: Add the Interactivity (JavaScript)

Share