Search Mode Toggle Launch Component

Search Mode Toggle Launch Component

The Search Mode Toggle is a lightweight component that integrates directly into your existing search bar. It lets customers switch between your default search and Nobi's AI search without replacing your current search interface.

How It Works

Add the toggle element inside your existing search form. When customers have it set to "Default", your form submits normally using your current search. When they switch to "AI", Nobi intercepts the query and opens the chat modal instead.
 
Preview:
This approach preserves everything about your current search (typeahead, autocomplete, filters, all of it) while giving customers the option to use AI when they want it.

When to Use the Toggle

You want to keep your existing search - Your current search works well and you don't want to replace it entirely
You want to test AI adoption - See how many customers choose AI search versus traditional search
You have complex search features - Your search has typeahead, facets, or other features you want to preserve
Minimal integration effort - Add one element to your form without rebuilding your search interface

Toggle Behavior

The toggle defaults to "Default" mode (your regular search). Customers can click to switch to "AI" mode at any time.
In Default mode:
  • Form submits normally to your search results page
  • Typeahead and autocomplete work as usual
  • All your existing search functionality remains intact
In AI mode:
  • Nobi intercepts the form submission
  • Opens the chat modal with the customer's query
Customers can switch modes anytime, even mid-search. The toggle remembers their preference across page loads.

Context Awareness

On collection pages, the toggle can automatically understand which collection the customer is browsing. When they switch to AI mode, Nobi knows to show products from that collection.
For example, on your "Women's Shoes" collection page, when a customer searches for "running shoes" in AI mode, Nobi will focus on women's running shoes.

Mobile Experience

The toggle adapts to mobile devices automatically. It remains touch-friendly and clearly indicates which mode is active.

Styling

The toggle can be styled to match your brand. You can customize colors, fonts, sizes, borders, and more using CSS.
For complete styling options, see the Toggle Technical Reference.

Keyboard Support

Customers can use keyboard shortcuts:
  • Cmd/Ctrl + K to switch between modes
  • Tab to navigate toggle buttons
  • Enter/Space to activate the focused mode

Accessibility

The toggle is keyboard accessible, screen reader compatible, and follows accessibility best practices.