Button Launch Component

Button Launch Component

The Button component is a standalone call-to-action that opens Nobi's chat modal when clicked. Unlike the Search Bar which replaces your existing search, the Button can be placed anywhere on your site as a dedicated entry point for AI shopping assistance.
 
Preview:

How It Works

Place the button element anywhere on your site after installing the Nobi script (see Quick Start Guide). When customers click it, Nobi's chat modal opens, ready for them to search, ask questions, or browse products conversationally. The button defaults to "Shop With AI" but you can customize the text, appearance, and behavior to match your site. See the Button Technical Reference for customization details.

When to Use the Button

  • Homepage hero sections - Add "Shop With AI" as a prominent CTA alongside your primary calls-to-action
  • Navigation bar - Provide quick access to Nobi from any page, placed near cart or account icons
  • Collection pages - Help customers discover products with "Need Help Finding Something?" buttons above product grids.
  • Product pages - Offer assistance with "Ask About This Product" near size guides or product details
  • Search results pages - When traditional search returns poor results, offer "Try AI Search" as an alternative. You can even configure the button to launch the Nobi chat modal with the same search query that the user typed in.
  • Empty states and 404 pages - "Find What You're Looking For" gives customers a helpful path forward

What Customers Can Do

Once customers click the button and open the chat modal, they can:
Search naturally - Describe what they're looking for in their own words instead of using exact keywords
Ask product questions - Get answers about sizing, materials, care instructions, availability, and more
Get recommendations - "What goes with this?" or "Show me similar items"
Compare products - "What's the difference between these two jackets?"
Add to cart quickly - Use the quick add feature to purchase without leaving the conversation

Customization

The button can be styled to match your brand using CSS. You can change colors, fonts, sizes, padding, and more. You can also render it as a text link instead of a filled button for lighter visual weight.
For complete customization options, see the Button Technical Reference.

Mobile Experience

Buttons work on all devices and automatically adapt to mobile screen sizes. Consider placing them in thumb-friendly areas on mobile for easy access.