window.Kelu has six functions, callable as Kelu("name", …) or Kelu.name(…). window.KeluWidget has the same six and more. Both drive the same widget.
The globals exist once the script has loaded. To call functions earlier, preinitialize window.Kelu.
open
Open the panel. All parameters are optional.
| Parameter | Type | Default | Description |
|---|
mode | "ai" | "search" | the current tab | The tab to open on. Ignored unless search mode is on |
query | string | none | Text for the open tab’s field: the question box, or the search box |
submit | boolean | false | Send query as a question at once. When the panel opens on the Search tab, the query is searched instead, with or without submit |
open({ query, submit: true }) still sends the question. From the Search tab it also switches to Ask AI.
window.Kelu("open", { mode: "ai", query: "How do I get started?", submit: true });
window.KeluWidget.open({ mode: "search", query: "authentication" });
Kelu("open") waits until the widget is on the page. KeluWidget.open() does nothing if the widget has not appeared yet, which can take a moment with data-widget-id.
The widget starts once its script has run and the page’s HTML has loaded (DOMContentLoaded). A direct Kelu("open") after the script has run but before then does nothing. Wait for that event, or queue the call on the preinitialization stub before the script loads.
close
Close the panel. An answer that is still being written keeps going and is there when the panel reopens.
window.Kelu("close");
window.KeluWidget.close();
render
Put the widget on the page. Use it after data-render-on-load="false", or to bring back a widget removed with unmount. Does nothing if the widget is already on the page.
On window.Kelu it takes one optional parameter:
| Parameter | Type | Description |
|---|
onRender | function | Called once the widget is on the page. Call open here |
window.Kelu("render", { onRender: () => window.Kelu("open") });
window.KeluWidget.render(); // no callback
data-widget-id loads its settings first, so it appears a moment after render() returns. onRender waits for that. See Widget lifecycle.
unmount
Remove the widget from the page. It keeps its configuration, so render() can bring it back. Event subscriptions stay.
window.Kelu("unmount");
window.KeluWidget.unmount();
setSourceGroupIDs
Answer and search from these source groups only, from the next request on. Use it to focus the assistant on the section of your docs the reader is in. Creating source groups needs an Enterprise plan.
| Parameter | Type | Description |
|---|
ids | string[] | Source group ids. [] removes the filter |
- It starts from
data-source-group-ids. Without that attribute, a data-widget-id embed starts from Only answer from these source groups on the widget’s Answers tab.
- It can only narrow what the client key allows, never widen it.
- Results already on the Search tab are fetched again.
- The value survives
unmount() and render().
window.Kelu("setSourceGroupIDs", ["group-id-1", "group-id-2"]);
window.KeluWidget.setSourceGroupIds([]); // remove the filter
IDs on window.Kelu, Ids on window.KeluWidget.
getSourceGroupIDs
Returns the source group ids in use as string[]. With no filter it returns undefined, or [] once you removed the filter with setSourceGroupIDs([]).
window.Kelu("getSourceGroupIDs"); // ["group-id-1", "group-id-2"], [] or undefined
window.Kelu.getSourceGroupIDs();
window.KeluWidget.getSourceGroupIds();
| Function | Description |
|---|
init(config) | Configure and show the widget from code instead of attributes. Needs clientKey and knowledgeBaseId (or widgetId). Logs a warning and does nothing if the widget is already on the page; call destroy() first |
toggle() | Open the panel if it is closed, close it if it is open |
isOpen() | true while the panel is open |
expand() / collapse() / toggleExpand() | Same as the header’s expand button: widen the panel to data-modal-expanded-size (default 1500px), or put it back. A sidebar moves to the centre. Does nothing in search view mode, full screen, or with data-modal-expand-button-hidden |
isExpanded() | true while the panel is expanded |
ask(question) | Open the chat and send question as the next question in the conversation. Ignored while an answer is still being written |
reset() | Clear the conversation and start a new one, like the New conversation button. Stops an answer in progress |
getMode() | The tab showing: "ai" or "search" |
setMode(mode) | Switch tab. "search" does nothing unless search mode is on |
setUser(user) | Attach a signed-in reader to the questions that follow: { id, email }. undefined removes it. See User tracking |
on(event, handler) | Subscribe to an event. Returns a function that unsubscribes |
off(event, handler) | Unsubscribe |
destroy() | Remove the widget and forget its configuration. Call init() to start again |
version / buildTime | The loaded script’s version and build time, to check which release a page runs |
window.KeluWidget.init({
knowledgeBaseId: "YOUR_KNOWLEDGE_BASE_ID",
clientKey: "kl_pk_...",
viewMode: "sidebar",
colorScheme: "auto",
});
document.querySelector("#help").addEventListener("click", () => {
window.KeluWidget.ask("How do I reset my password?");
});
init() takes the same settings as the script tag attributes. Most option names are the attribute name in camelCase (data-view-mode is viewMode), but not all: data-modal-overlay-hidden is hideOverlay, and data-launcher-button-hidden is hideLauncher.
A page whose script tag carries data-client-key and a knowledge base or widget id is set up by the tag. Use init() only on pages that load the script without them.
