Floating Button

A compact floating button that appears at the edge of the viewport and opens the chat drawer when clicked. Like the Floating Chat Bar, it auto-injects itself without requiring HTML changes.

When to use

Ideal when you want a subtle, always-available entry point to Nobi without the visual footprint of the full chat bar. Works well alongside other launch components or as a standalone entry point.

Quick Add

Add autoLaunch: ['floating-button'] 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-button']
  });">
</script>

The floating button renders at the bottom-right of every page where the script runs.

No additional HTML elements needed.

Can also be enabled from the dashboard under Assistant > Appearance.

Configuration

Pass assistantConfiguration.floatingButton properties in the initialization call:


window.Nobi.initialize({
  accountId: 'YOUR_ACCOUNT_ID',
  autoLaunch: ['floating-button'],
  assistantConfiguration: {
    floatingButton: {
      style: 'button-right',
      label: 'Ask AI'
    }
  }
});

Configuration Properties

Option	Default	Description
style	"button-right"	Position of the button: "button" (center), "button-left", or "button-right"
label	"Ask AI"	Text displayed next to the sparkle icon on the button
schedule	null	Schedule object to control when the button appears. null means always active.

Behavior

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

Clicking it opens Nobi's chat drawer.

The button hides automatically when the chat drawer is open and reappears when it closes.

Styling

Custom CSS can be applied using the .nobi-floating-button class on the button element, or the #nobi-floating-button-container ID on the container.


.nobi-floating-button {
  /* Custom styles here */
}

Scheduling

The floating button supports time-based scheduling, configured through the dashboard under Assistant > Appearance > Visibility. When a schedule is active, the button only appears during the configured time windows. See the Floating Chat Bar documentation for full scheduling details, as the feature works identically for both components.

Hidden Pages

You can prevent Nobi from appearing on specific pages by configuring hidden URL patterns in the dashboard under Assistant > Appearance > Visibility. Patterns support exact paths (e.g., /checkout) and wildcards (e.g., /admin/*). This applies to all Nobi components, not just the floating button.

Troubleshooting

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

Button appearing on unwanted pages: Use the Hidden Pages feature in the dashboard (Assistant > Appearance > Visibility) to exclude specific URLs.

Floating Button What it is When to use Quick Add Configuration Configuration Properties Behavior Styling Scheduling Hidden Pages Troubleshooting