Floating Chat Bar

A fixed-position AI search bar that appears at the bottom of the viewport. Unlike other Nobi components, it doesn't use a custom HTML element — it's enabled through the initialization script and auto-injects itself.

When to use

Ideal for sites where you want persistent, always-available AI assistance without modifying page HTML. Works especially well with GTM installations.

Quick Add

Add autoLaunch: ['floating-chat-bar'] to your Nobi initialization call:


<script src="<https://assistant-script.nobi.ai/nobi.bundle.js>"
  onload="window.Nobi.initialize({
    accountId: 'YOUR_ACCOUNT_ID',
    autoLaunch: ['floating-chat-bar']
  });">
</script>

The floating bar renders at the bottom of every page where the script runs.

No additional HTML elements needed.

Configuration

Pass assistantConfiguration.floatingChatBar properties in the 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
    }
  }
});

Option	Default	Description
placeholder	(general placeholder)	Custom placeholder text for the search input
buttonLabel	(auto)	Custom label for the CTA button
defaultMode	"ai"	The default search mode
showModeToggle	false	Show conversation/search mode toggle
showHintRow	false	Show the hint row below the search bar
ctaVariant	"auto"	CTA button style variant
enableTypeahead	true	Enable typeahead search suggestions

Behavior

The bar appears with a slide-up animation when the page loads

Typing a query and submitting opens Nobi's chat modal with the message pre-filled

The bar hides automatically when the chat modal is open

Styling

The floating chat bar inherits styling from the Nobi search bar component. Custom CSS can be applied using the .nobi-floating-chat-bar-container class.


.nobi-floating-chat-bar-container {
  /* Adjust bottom offset */
  bottom: 24px;

  /* Customize max width */
  max-width: 672px;
}

Troubleshooting

Bar not appearing: Verify autoLaunch: ['floating-chat-bar'] is in your initialize call, or that the floating bar is enabled in your dashboard settings.

Bar appearing on unwanted pages: The floating bar shows on every page where the Nobi script runs. To limit it, conditionally load the script or use the dashboard to control visibility.

Floating Chat Bar What it is When to use Quick Add Configuration Behavior Styling Troubleshooting