Search Bar Launch Component

Search Bar Launch Component

The Search Bar component is Nobi's most popular launch option. It gives your customers a familiar search experience with the added power of AI assistance, all in a single, unified interface.

More details

Nobi’s AI Search Bar looks and functions like a traditional search bar, with a key difference: you can set it up to work in dual mode, where the default mode can either be Nobi’s AI search or your existing site search. Your customers can toggle between the mode that they want. When in AI mode, Nobi’s “Search Mode” feature (see Nobi For Search) will activate unless explicitly configured not to.
 
Preview:

How It Works

For Your Customers

When customers click into the search bar, they see a mode selector that lets them choose their search experience:
Traditional Search Mode
  • Returns results using your current search logic on your existing search results page (you’ll need to configure the URL to your results page)
  • Familiar experience for customers who prefer standard search
AI Mode (Nobi)
  • Opens Nobi's chat modal for conversational search
  • Understands natural language queries
  • Provides personalized product recommendations
  • Answers questions about products
  • Offers conversational refinement and follow-up
The default mode is “AI”, and the bar can be configured to match your site’s theme.

Mobile

On mobile, the bar will show up at the top of the visitor’s screen:
Mobile AI search bar
Mobile AI search bar

Typeahead

notion image
When you use Nobi’s AI search bar in AI mode, you’ll also get predictive search/typeahead capabilities, which can prove extremely powerful for driving conversions. Typeahead search is an autocomplete feature that takes what the site visitor has typed and suggests the most popular searches and products to match that query.
Once a visitor starts typing, Nobi’s search bar will show the top 5 closest query matches from the most popular queries, the top 5 most closest products, and a link to view all matches. If they haven’t typed anything yet, Nobi’s typeahead will show the 5 most popular search queries and 5 best-selling products.
On most sites, the highest converting engagements with Nobi’s assistant come from customers who click on a suggested typeahead query, and the second highest converting engagement type come from customers who click on the “View all results for ____” at the bottom of the typeahead panel.

When to Use the Search Bar Component

The Search Bar component is ideal if:
You want to replace your existing search - Give customers a better search experience without losing familiar functionality
You want to test AI search gradually - Let customers opt into AI while keeping traditional search available
Search is a primary navigation method on your site - Most ecommerce sites see 13-20% of customers use search. Enhancing this high-traffic touchpoint has maximum impact
You want minimal site changes - The Search Bar can replace your existing search with minimal visual disruption

What Customers Can Do

Once customers activate AI mode, they can:

Search Naturally

No need for exact keywords or product names. Customers can describe what they're looking for in their own words:
  • "Something to wear to a summer wedding"
  • "Gifts for coffee lovers under $50"
  • "Waterproof hiking boots for wide feet"
  • "Dress shirts that don't need ironing"

Ask Questions

Get answers about products, policies, or shopping advice:
  • "What's the difference between these two jackets?"
  • "Do you have this in other colors?"
  • "Is this machine washable?"
  • "What size should I order if I'm usually a medium?"

Refine Results Conversationally

Instead of clicking filters, customers can refine through conversation:
Customer: "running shoes"
Nobi: [shows running shoes]
Customer: "do you have any for trail running?"
Nobi: [filters to trail running shoes]
Customer: "under $150"
Nobi: [shows only shoes under $150]

Add to Cart Quickly

The "quick add" feature lets customers add products directly to their cart without leaving the conversation:
  • One-click add for simple products
  • Variant selection (size, color) within the modal
  • Quantity adjustment
  • Immediate cart confirmation

Customization Options

The Search Bar can be customized to match your brand and site design:

Visual Styling

  • Colors (background, text, borders, buttons)
  • Fonts and typography
  • Search icon and mode toggle styling
  • Placeholder text
  • Size and positioning

Behavior Settings

  • Default mode (traditional vs AI)
  • Placeholder text for each mode
  • Mode toggle label and position