Compact Button | Triggered Elements | Website UX Elements | Implementation

The Compact Button is a small launcher that appears at the edge of your site and opens Nobi's chat drawer when clicked. Like the Floating Bar, it is dashboard-controlled from Website UX > UX Elements > Triggered and can also be enabled from JavaScript when needed.

How It Works

Set up the Compact Button from Website UX > UX Elements > Triggered. The dashboard controls activation, trigger timing, page rules, schedules, position, and label. If you need JavaScript setup, add autoLaunch: ['floating-button'] to your Nobi initialization call.

Trigger Support

The Compact Button is a launcher-style triggered element. Its normal setup is On page load so Nobi is available without taking over the page. It does not consume the one non-exit prompt per session budget.

The dashboard can also limit the Compact Button with schedules, allowed pages, hidden pages, label settings, and position settings. If other triggers are available for the merchant account, use them only when the button should wait for a specific visitor moment before appearing.

Setup Flow

Go to Website UX > UX Elements > Triggered, choose Compact Button, click Setup, choose when it should appear, configure page rules, position, label, and schedule, then click Set Live.

Testing

Set the trigger to On page load, clear session state if needed, refresh the test page, and confirm the button appears in the configured position without blocking Message Pill, Message Card, or Popup suppression rules.

When to Use the Compact Button

Subtle entry point - When you want access to Nobi without the visual footprint of the full Floating 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 Website UX > UX Elements > Triggered, choose Compact Button, click Setup, configure when and where it should appear, then click Set Live.

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

Most merchants should configure the Compact Button in the dashboard. Advanced JavaScript setup can still pass 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 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 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. 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 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.

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

Compact Button Launch Component How It Works Trigger Support Setup Flow Testing When to Use the Compact Button Enabling via Dashboard Enabling via JavaScript Customizing Appearance Custom CSS Controlling Visibility Scheduling Hidden Pages Troubleshooting