Floating Bar | Triggered Elements | Website UX Elements | Implementation

The Floating Bar is a fixed-position AI search bar that appears at the bottom of your site. It is dashboard-controlled from Website UX > UX Elements > Triggered and can also be enabled from JavaScript when needed.

Preview: Look at the bottom of your browser window.

How It Works

Set up the Floating Bar from Website UX > UX Elements > Triggered. The dashboard controls activation, trigger timing, page rules, schedules, and close behavior. If you need JavaScript setup, add autoLaunch: ['floating-chat-bar'] to your Nobi initialization call.

Trigger Support

The Floating Bar is a launcher-style triggered element. Its normal setup is On page load so Nobi is available as visitors browse. It does not consume the one non-exit prompt per session budget.

The dashboard can also limit the Floating Bar with schedules, allowed pages, hidden pages, and close or minimize behavior. If other triggers are available for the merchant account, use them only when the bar should wait for a specific visitor moment before appearing.

Setup Flow

Go to Website UX > UX Elements > Triggered, choose Floating Bar, click Setup, choose when it should appear, configure page rules and schedule, then click Set Live.

Testing

Set the trigger to On page load, clear session state if needed, refresh the test page, and confirm the bar appears without blocking Message Pill, Message Card, or Popup suppression rules.

When to Use the Floating Bar

Always-available assistance - When you want every visitor to have easy access to Nobi without cluttering your page layout

GTM installations — Since it requires no HTML changes beyond the script tag, it's perfect for tag manager deployments

Mobile-first experiences — The floating bar works well on mobile where screen real estate is limited and a persistent search option is valuable

Configuration

Most merchants should configure the Floating Bar in the dashboard. Advanced JavaScript setup can still pass assistantConfiguration.floatingChatBar properties in your initialization call:


window.Nobi.initialize({
  accountId: 'YOUR_ACCOUNT_ID',
  autoLaunch: ['floating-chat-bar'],
  assistantConfiguration: {
    floatingChatBar: {
      placeholder: 'How can I help you today?',
      buttonLabel: 'Ask AI',
      showModeToggle: true
    }
  }
});

Available options: placeholder, buttonLabel, defaultMode, showModeToggle, showHintRow, ctaVariant, and enableTypeahead.

Dismiss & Minimize Configuration

The Floating Bar supports close and minimize behavior that can be configured from the dashboard or through the assistantConfiguration object.

New configuration fields under floatingChatBar:


floatingChatBar: {
  enabled: true,
  dismissible: true,           // Show the close (X) button
  minimizedStyle: "button",    // "button" | "side-tab-left" | "side-tab-right" | "bottom-tab" | "none"
  minimizedLabel: "Ask AI",    // Text on the button and bottom-tab styles
  startMinimized: false        // Load in minimized state
}

dismissible (boolean, default: true)

When true, a close button (X) appears inside the chat bar pill, separated from the CTA button by a divider. Clicking it transitions the bar to its minimized state.

minimizedStyle (string, default: "button")

Controls what appears after a visitor dismisses the chat bar:

"button" - Small pill button at bottom center

"button-left" - Small pill button at bottom-left corner

"button-right" - Small pill button at bottom-right corner

"side-tab-left" - Floating icon flush against the left viewport edge

"side-tab-right" - Floating icon flush against the right viewport edge

"bottom-tab" - Tab at the bottom center edge

"none" - Fully hidden; reappears on page navigation

minimizedLabel (string, default: "Ask AI")

Text displayed on the button and bottom-tab minimized styles.

startMinimized (boolean, default: false)

When true, the chat bar loads in its minimized state instead of fully expanded. Requires dismissible to be true and minimizedStyle to not be "none".

CSS Customization

The minimized state elements use the same color as the CTA button. Customize via:


:root {
  --nobi-search-bar-button-background: linear-gradient(90deg, #your-color-1, #your-color-2);
}

Persistence

The dismissed state is stored in sessionStorage, meaning:

It persists across page navigations within the same session

It resets when the visitor closes the browser tab/window

For minimizedStyle: "none", the bar reappears when navigating to a different page

Scheduling

The Floating Bar supports schedules so it only appears during specific hours. Configure schedules from the Floating Bar setup dialog under Website UX > UX Elements > Triggered.

When a schedule is active:

The Floating Bar only appears during the configured time windows

Time windows are defined by days of the week and start/end times

All times are evaluated in the merchant's configured timezone, regardless of the visitor's location

Multiple time windows can be combined (e.g., weekday evenings + all day weekends)

When outside a scheduled window, the Floating Bar is hidden completely

When no schedule is configured, the Floating Bar can run whenever its trigger and page rules match.

Hidden Pages

You can control where the Floating Bar appears from its setup dialog under Website UX > UX Elements > Triggered. Use allowed pages to limit where it can show and hidden pages to exclude checkout, admin, or other sensitive paths.

Patterns support:

Exact paths: /checkout, /cart, /account

Wildcards: /admin/* (matches /admin/settings, /admin/orders, etc.)

URL patterns are relative paths starting with /. Hidden paths override allowed paths for the Floating Bar.

Floating Bar Launch Component How It Works Trigger Support Setup Flow Testing When to Use the Floating Bar Configuration Dismiss & Minimize Configuration CSS Customization Persistence Scheduling Hidden Pages