Floating Chat Bar Launch Component

Floating Chat Bar Launch Component

The Floating Chat Bar is a fixed-position AI search bar that appears at the bottom of your site. Unlike other launch components, it doesn't require placing a custom HTML element — just enable it in your Nobi initialization script or through the dashboard, and it auto-injects itself into the page.
Preview: Look at the bottom of your browser window.

How It Works

Add autoLaunch: ['floating-chat-bar'] to your Nobi initialization call. The floating bar appears at the bottom of every page where the Nobi script runs. When a visitor types a query, Nobi's chat modal opens with the message pre-filled. No CSS selectors or HTML placement needed.

When to Use the Floating Chat 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

Configure the floating chat bar by passing 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 chat bar supports close/minimize behavior that can be configured 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 chat bar supports time-based scheduling so it only appears during specific hours. Configure scheduling through the dashboard under Assistant > Appearance > Visibility.
When a schedule is active:
  • The chat 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 chat bar is hidden completely
When no schedule is configured (the default), the chat bar is always active.

Hidden Pages

You can prevent all Nobi components from appearing on specific pages by configuring hidden URL patterns in the dashboard under Assistant > Appearance > Visibility.
Patterns support:
  • Exact paths: /checkout, /cart, /account
  • Wildcards: /admin/* (matches /admin/settings, /admin/orders, etc.)
URL patterns are relative paths starting with /. They apply to all Nobi components on the page, not just the floating chat bar.