Floating Button | Launch Components | Implementation

The Floating Button is a compact pill-shaped button that appears at the edge of your site and opens Nobi's chat drawer when clicked. Like the Floating Chat Bar, it auto-injects itself without requiring HTML changes -- just enable it in your Nobi initialization script or through the dashboard.

How It Works

Add autoLaunch: ['floating-button'] to your Nobi initialization call, or enable it from the dashboard under Assistant > Appearance. The button appears at the bottom of every page where the Nobi script runs. Clicking it opens the chat drawer. No CSS selectors or HTML placement needed.

When to Use the Floating Button

Subtle entry point -- When you want always-available access to Nobi without the visual footprint of the full chat bar

GTM installations -- No HTML changes needed beyond the script tag, perfect for tag manager deployments

Alongside other components -- Works well as a secondary entry point alongside search bars or suggestion pills

Enabling via Dashboard

Go to Assistant > Appearance and toggle on the Floating Button under the "Launch Automatically With Floating Elements" section. Choose a position (center, left, or right) and customize the label text.

Enabling via JavaScript

Add autoLaunch: ['floating-button'] to your 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>

Customizing Appearance

Configure the floating button by passing assistantConfiguration.floatingButton properties:


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

Available options:

style (default: "button-right") -- Position of the button. Options: "button" (center), "button-left", "button-right"

label (default: "Ask AI") -- Text displayed next to the sparkle icon

schedule (default: null) -- Schedule object for time-based visibility. null means always active

Custom CSS

The floating button exposes a global CSS class for merchant styling:


/* Target the floating button element */
.nobi-floating-button {
  /* Custom styles */
}

/* Target the container */
#nobi-floating-button-container {
  /* Position overrides */
}

Controlling Visibility

Scheduling

The floating button 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 button only appears during the configured time windows. All times are evaluated in the merchant's configured timezone, regardless of the visitor's location.

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 (e.g., /checkout) and wildcards (e.g., /admin/*). URL patterns are relative paths starting with /.

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.

Button visible but not clickable: Check if the button is behind another fixed-position element. The button uses z-index 2147483640.

Floating Button Launch Component How It Works When to Use the Floating Button Enabling via Dashboard Enabling via JavaScript Customizing Appearance Custom CSS Controlling Visibility Scheduling Hidden Pages Troubleshooting