Start A Conversation From Your Nav Bar

Start A Conversation From Your Nav Bar

Your navigation bar is visible on every page of your site, making it the perfect place to offer AI shopping assistance. Adding Nobi to your nav gives customers instant access to conversational search and product help, no matter where they are on your site.
Why Add Nobi to Your Nav
  • Always accessible - Customers can get help from any page without searching for the feature
  • High visibility - Nav bar items are among the first things customers see
  • Complements browsing - Customers exploring your site can ask questions without interrupting their flow
  • Mobile-friendly - Easy thumb access on mobile devices where navigation is critical
  • Increases engagement - Proactive placement encourages customers to try AI assistance

Implementation Options

You have several ways to add Nobi to your navigation, depending on your design and how prominent you want it to be.

Option 1: Dedicated Nav Link

<nav>
  <a href="/">Home</a>
  <a href="/collections">Shop</a>
  <a href="/pages/about">About</a>
  <a href="#" id="ai-assistant">Shop With AI</a>
  <a href="/cart">Cart</a>
</nav>

<script>
  document.getElementById('ai-assistant').addEventListener('click', (e) => {
    e.preventDefault();
    Nobi.openChat();
  });
</script>
This approach treats Nobi like any other nav item, making it feel integrated and natural.

Option 2: Icon Button

Add Nobi as an icon button in your utility navigation (near cart, account, etc.):
<div class="utility-nav">
  <button id="search-icon">🔍</button>
  <button id="ai-icon" onclick="Nobi.openChat()">✨</button>
  <a href="/account">👤</a>
  <a href="/cart">🛒</a>
</div>
Icon buttons save space and work well on mobile. Use a recognizable icon like a sparkle (✨), chat bubble (💬), or robot (🤖).

Option 3: Nobi Button Component

Use Nobi's button component styled for nav bar placement:
<nav>
  <a href="/">Home</a>
  <a href="/collections">Shop</a>
  <nobi-button 
    id="nav-ai-button"
    button-label="AI Assistant"
    is-text="true"
    hide-icon="true">
  </nobi-button>
  <a href="/cart">Cart</a>
</nav>

Button Label Ideas

Choose a label that communicates what customers will get:
Action-oriented:
  • "Shop With AI"
  • "Ask AI"
  • "Find Products"
  • "Get Help"
Feature-focused:
  • "AI Assistant"
  • "AI Search"
  • "Smart Shopping"
  • "Product Finder"
Question-based:
  • "Need Help?"
  • "Can't Find It?"
  • "Looking for Something?"
Test different labels to see what resonates with your customers. Most merchants find "Shop With AI" or "AI Assistant" work well.