Compact Button

A compact launcher that appears at the edge of the viewport and opens the chat drawer when clicked. Like the Floating Bar, it is managed from Website UX > UX Elements > Triggered and 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

Set up a Compact Button from Website UX > UX Elements > Triggered. If you need to enable it from JavaScript instead of the dashboard, 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 Compact Button can show on all pages or only on matching allowed page paths.

No additional HTML elements needed.

Can also be configured from the Triggered elements page in the dashboard.

Configuration

Most merchants should configure the Compact Button in the dashboard. Advanced JavaScript configuration can still 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 Compact Button supports schedules so it only appears during specific hours. Configure schedules from the Compact Button setup dialog under Website UX > UX Elements > Triggered. When a schedule is active, the button only appears during the configured time windows.

Hidden Pages

You can control where the Compact Button appears from its setup dialog under Website UX > UX Elements > Triggered. Use allowed pages to limit where it can show and hidden pages to exclude checkout, admin, or other sensitive paths.

Troubleshooting

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

Button appearing on unwanted pages: Use the Compact Button setup dialog in Website UX > UX Elements > Triggered to update allowed or hidden page rules.

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