Floating Chat Bar | Launch Components | Implementation

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 the browser

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.

Floating Chat Bar Launch Component How It Works When to Use the Floating Chat Bar Configuration