Ask AI Button | Integrated Elements | Website UX Components | Implementation

The Ask AI button is a standalone call-to-action that opens Nobi's chat modal when clicked. Unlike the Search Bar, which behaves like a search input, the Ask AI button works best where visitors already expect a clear help or assistance action.

Preview:

Dashboard setup

Set up the Ask AI button from the Website UX Integrated page before copying code into your site.

Go to Website UX > UX Elements > Integrated.

Select Ask AI button to preview the element and review where it works best.

Use Add to site to copy the implementation snippet.

Use Try it out in the playground, or open Website UX > UX Elements > Playground, to test the element before adding it to your storefront.

How It Works

Place the Ask AI button element anywhere on your site after installing the Nobi script. When visitors click it, the Nobi modal opens and they can ask questions, search products, or get help with site content.

When to Use the Ask AI 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 Ask AI 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.

Ask AI Button Launch Component Dashboard setup How It Works When to Use the Ask AI Button What Customers Can Do Customization Mobile Experience