Search mode adds a Search tab beside the chat. It lists the pages that match a query and writes no answer, which is fast and often all the reader needs. Readers switch between Ask AI and Search at the top of the panel, and what they typed moves with them.
Separately, the chat shows matching pages while the reader types. That is on by default.
Enabling search mode
Search mode is off by default. Turn it on with one attribute:
<script async src="https://widget.kelu.dev/kelu-widget.js"
data-knowledge-base-id="YOUR_KNOWLEDGE_BASE_ID"
data-client-key="kl_pk_..."
data-search-mode-enabled="true"></script>
How the Search tab works
- Enter runs the search. Typing alone does not. The last results stay on screen while the query is edited.
- Up to 8 pages come back, each with its title, its section path and a snippet.
- An “Ask AI: …” row sits above the results. One click sends the same query to the chat.
- Arrow keys move through the results, and Enter opens the highlighted one.
- Results open in a new tab by default.
- A failed search says so: “Search is unavailable right now”, not “No matching pages”.
Configuration
Every search option is in Behaviour. Common setups:
Open on the Search tab
<!-- Every time the panel opens -->
data-search-mode-default="true"
<!-- Only when opened with Cmd+K (Ctrl+K on Windows and Linux) -->
data-modal-command-k-search-mode-default="true"
data-hotkey changes the shortcut’s key, and data-hotkey="none" turns it off.
Limit what is searched
Search, like the chat, can be limited to source groups. This can narrow what the client key reaches, never widen it.
data-source-group-ids="group-id-1,group-id-2"
Search is limited by source group, not by single source, and results are always ordered by relevance. Put the sources you want searched in their own group.
data-modal-override-open-selector-search="#main-search-button"
data-open-query-from="#your-search-input" to carry what the reader typed into the Search tab and run it. See Put the button in your header.
Search tab options
| Attribute | Default | What it does |
|---|
data-search-input-placeholder | "Search sources…" | Placeholder of the Search tab’s field |
data-search-input-icon-hidden | false | Hide the magnifier in the field |
data-search-ask-ai-cta-hidden | false | Hide the “Ask AI: …” row |
data-search-keyboard-nav-enabled | true | false turns off arrow keys in the results |
data-search-result-target | _blank | The target of a result link. _self opens results in the same tab |
data-switch-icon-hidden | false | Hide the icons on the Ask AI and Search tabs, keeping the labels |
data-modal-title-search | data-modal-title | Header title while the Search tab is showing |
data-modal-logo-src-search | data-modal-logo-src | Header logo while the Search tab is showing |
search-result, search-result-primary-text, search-result-secondary-text, search-result-badge, search-ask-ai-cta, switch, switch-label and search-input.
Instant matches while typing
In the chat, after two characters and a short pause, up to five matching pages appear above the question box. An “Ask AI: …” row at the top sends the question. Arrow keys move through the list. Matches pause while an answer is being written.
| Attribute | Default | What it does |
|---|
data-instant-search | true | false turns the matches off |
The search view mode
data-view-mode="search" is a layout, not the Search tab. The panel opens near the top of the screen, like a command palette, and there is no launcher button. Readers open it with Cmd+K, an open trigger or KeluWidget.open().
Add data-search-input to connect it to a search box already on your page:
<input id="docs-search-input" type="search" placeholder="Search the docs" />
<script async src="https://widget.kelu.dev/kelu-widget.js"
data-knowledge-base-id="YOUR_KNOWLEDGE_BASE_ID"
data-client-key="kl_pk_..."
data-view-mode="search"
data-search-input="#docs-search-input"></script>
JavaScript functions
// Open on the Search tab and run a query (query is optional)
window.KeluWidget.open({ mode: "search", query: "authentication" });
// Switch tabs on an open panel
window.KeluWidget.setMode("search");
mode: "search" is ignored unless search mode is on. window.Kelu("open", { mode: "search" }) is the same call in kapa’s form. See Functions.
Event tracking
