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. On the Search tab the query is always searched |
If the panel is already open, open({ query, submit: true }) still sends the question.
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.
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
A widget with 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.
| Parameter | Type | Description |
|---|
ids | string[] | Source group ids. [] removes the filter |
- It starts from
data-source-group-ids.
- 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
Note the spelling: IDs on window.Kelu, Ids on window.KeluWidget.
getSourceGroupIDs
Returns the source group ids in use as string[], or undefined when there is no filter.
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.