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 async 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

Additional configuration fields for dismiss and minimize behavior:

Option	Default	Description
`dismissible`	`true`	Show close button so visitors can minimize the bar
`minimizedStyle`	`"button"`	What appears after dismissal: "button", "button-left", "button-right", "side-tab-left", "side-tab-right", "bottom-tab", or "none"
`minimizedLabel`	`"Ask AI"`	Text on button and bottom-tab minimized states
`startMinimized`	`false`	Load in minimized state instead of fully expanded
`schedule`	`null`	Schedule object for time-based visibility. null = always active

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;
}

The minimized state elements also have global CSS classes for custom styling:

.nobi-minimized-button - The pill-shaped button

.nobi-minimized-side-tab - The side tab (left or right)

.nobi-minimized-bottom-tab - The bottom tab

Dismiss & Minimize

The floating chat bar can be configured to allow visitors to close it. When dismissed, a smaller element appears so visitors can reopen the chat bar.

Settings available in the dashboard (Assistant > Appearance):

Show floating chat bar - Enable or disable the floating chat bar on your site.

Start minimized - When enabled, the chat bar loads in its minimized state on each page instead of fully expanded. Useful if you want the chat bar available but not prominently displayed.

Allow visitors to dismiss - Adds a close button (X) inside the chat bar. When a visitor clicks it, the bar minimizes to a smaller element.

After dismissal - Choose what visitors see after they close the chat bar:

Button - A small pill-shaped button at the bottom center with your label text
Button Left - A small pill-shaped button at the bottom-left corner
Button Right - A small pill-shaped button at the bottom-right corner
Side Tab (Left) - A floating icon on the left edge of the browser
Side Tab (Right) - A floating icon on the right edge of the browser
Bottom Tab - A small tab at the very bottom edge of the page
None (Fully Hidden) - The bar disappears completely and reappears when the visitor navigates to a new page

Label - Customize the text shown on the Button and Bottom Tab minimized states (default: "Ask AI")

The dismissed state is remembered for the visitor's browsing session. When they return later or open a new browser window, the chat bar appears in its default state.

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.

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.

Floating Chat Bar What it is When to use Quick Add Configuration Behavior Styling Dismiss & Minimize Troubleshooting Scheduling Hidden Pages