AI Search Bar

Overview

The AI Search Bar is a standalone search widget for your website. Visitors type in their own words and matching results appear under the bar as they pause: products from your real-time data feed as cards with image and price, and pages from your knowledge base with a title, a short preview and a link. Because it searches by meaning and not just exact keywords, a visitor who types a description still finds the right item.

It uses the same knowledge base as your chatbot, so there is nothing extra to index or maintain. The two widgets are independent: use the search bar alone, the chat widget alone, or both together on the same pages.

Adding It to Your Website

The AI Search Bar needs the Standard plan or higher. On a lower plan the bar still appears on your site, but it never returns any results, so check your plan first if nothing happens.

Your widget ID is shown on the AI Search Bar page in your dashboard.

Easiest: replace the search box you already have

If your site already has a search bar - a Shopify theme search, a WordPress search form, or your own - you do not need to place anything or edit your theme. Add data-replace to the script tag and the widget finds your current search form, hides it, and appears in its exact place:

This script can go anywhere on the page, so any plugin that adds code to your header or footer will do. Pressing Enter without picking a result still opens your old search results page, so nothing your visitors know stops working. If automatic detection picks the wrong element on an unusual theme, pass a CSS selector instead of auto, for example data-replace=".header-search". When nothing matches, the widget leaves your page untouched.

Placing it yourself

If you have no search bar yet, or you want it somewhere specific, paste both lines where the bar should appear - for example in your header next to your logo. The bar fills the width of the element you place it in, so this usually means editing a theme template.

If Something Does Not Work

• No bar appears at all. Check that the widget ID in the script matches the one on the AI Search Bar page in your dashboard, and that the code really is on the published page and not only in a draft or a preview.
• The bar appears but never returns results. This is almost always the plan: the search bar runs on Standard and above. It is also what you see once your monthly AI reply limit is used up.
• You get pages but no products. Products come from a Real-Time Data Feed. Connect one on the AI Search Bar page, and check that the feed source checkbox on that page is ticked.
• You get nothing at all, on any search. Your knowledge base may still be empty. Crawl your website or add content in the dashboard first, then try again.
• data-replace did not find your search box. Some themes hide their search behind a button or a pop-up. Pass a CSS selector for the element you want instead of auto, and check the page in a normal browser window rather than the theme editor.

Search Sources

Two checkboxes on the AI Search Bar page in your dashboard control what the search may use: website pages (crawled pages and added URLs) and your real-time data feed. Both are on by default. The feed is not limited to products - anything you index there, such as articles or listings, can appear as a result. A change applies on your site immediately.

Product results need a data feed connected. Both kinds work: the Real-Time Data Feed on Standard and above, and Real-Time Data Feed Max on Pro. Without a feed the search still works, it just returns your website pages only, and the dashboard page marks the feed as not connected so you know why no products appear.

Search Analytics

The AI Search Bar page in your dashboard shows the last 30 days of searches: how many ran, how many found nothing, and how often a visitor opened a result. Two tables list your most frequent searches and the searches that found nothing. The second table is the useful one, because it tells you exactly what visitors expect and cannot find.

Recording is on by default and you can switch it off with one checkbox on the same page. With it off, no search text is stored at all and the tables stop updating, while the search itself keeps working exactly as before.

Searches you run on the dashboard page are never counted. Websites using Zero Retention Mode record no search text at all, and if you set a retention policy, search records are deleted on the same schedule as your conversations.

How Results Look

Two settings on the AI Search Bar page in your dashboard change the look of the bar and its results. Both save the moment you pick them, and neither needs a code change.

Product result detail

Under each product name the bar can print a line of the description from your data feed. Whether that helps depends entirely on what your feed holds. A travel feed that gives the length of the trip and the places left is worth showing. A feed that holds a list of attributes instead reads like a database dump.

So you choose: name only, one line, or two lines. One line is the default and suits most feeds, because it is enough to tell two similar products apart without crowding the list. This affects product results only - a website page result always shows the text that matched your visitor's search.

Bar size

The bar comes in three heights: compact at 38 pixels for a tight header, the default 44 pixels, and large at 52 pixels for a page built around search. The text size changes with it.

The width is never set by us. The bar always fills the element you place it in, so you control the width with your own layout. The results panel matches the bar automatically.

After changing the size, copy your embed code again. The new code carries the size, so the bar is right from the moment your page loads. If you do not re-copy it, the bar still resizes itself, but only once the first search runs.

When a Search Finds Nothing

If your chat widget is on the same page, the search bar offers to hand the question to your assistant whenever a search returns no results. The visitor keeps their question and lands in the chat with it already typed, so a dead end becomes a conversation. This option only appears when the chat widget is present.

Options

The bar uses your visitor's browser language automatically for the placeholder, the result headings and the loading text. Set these only when you want your own wording.

The two result headings can also be renamed on the AI Search Bar page in your dashboard, with no code change. That is the easier place to do it if your data feed holds articles or listings rather than products. An attribute on the script tag still wins over the dashboard setting.

All attributes are optional and go on the script tag:

• data-placeholder="Search products..." - text shown in the empty search bar
• data-accent="#0a7d4f" - focus and highlight color, to match your brand
• data-max-results="8" - how many results to show, 1 to 20
• data-new-tab="true" - open results in a new browser tab
• data-size="sm" - bar height: sm, md or lg. Overrides the size set in your dashboard
• data-label-products="Products" - heading above feed results, in your language - for example Articles if your feed holds articles
• data-label-pages="Pages" - heading above page results, in your language
• data-label-empty="No results found" - message when nothing matches
• data-label-searching="Searching..." - text shown while results load
• data-label-ask-ai="Ask our assistant" - wording of the option that hands a failed search to your chatbot
• data-target=".my-container" - render the bar inside this element instead of the default container
• data-replace="auto" - replace the search bar your theme already has, described above

Usage and Billing

Each search a visitor runs uses 1 AI reply from your monthly plan limit - the same limit your chatbot replies use. A search fires when the visitor pauses typing, not on every letter. Searches you run on the AI Search Bar page in your dashboard do not count. When your monthly limit is reached, the search bar simply shows no results until the limit resets.

Good to Know

• Visitors can search in any language, even when your content is written in another one.
• Misspellings and half typed words still find the right thing, so a search for jaket finds your jackets.
• Product prices are shown with your currency symbol, taken from the currency in your feed.
• The same page in several languages appears once - the copy matching the search language wins.
• Results open real pages on your site, so the search bar also works as navigation.
• The widget is one small script with no dependencies and does not slow your page down.
• Keyboard controls work out of the box: arrow keys to move, Enter to open, Escape to close.