The widget’s options come in two groups: behaviour (what it does) and styling (how it looks).
  • Behaviour: language, how the panel opens, search, hand-off, consent, analytics and bot protection.
  • Theming: brand colour, palette, fonts, dark mode and view modes, applied to the whole widget. Most sites need nothing more.
  • Component styles: one CSS property on one part of the widget, such as data-modal-header-background-color. A component style always wins over theming. The same page lists each component’s labels and switches.
  • Legacy and kapa.ai names: the other attribute names the widget also reads.

​
Where to set an option

For each option, the first of these that sets it wins:
  1. An attribute on the script tag, such as data-view-mode="sidebar".
  2. A widget integration, named on the tag with data-widget-id. Edit it in the dashboard under Integrations → Website widget. Its settings apply to every page that carries the tag, so you can change the widget without editing your site.
  3. The widget’s default.
The dashboard editor has a box for every option except the ids, the client key, data-base-url, the signed-in reader (data-user-id, data-user-email) and component styles. The most-used ones are on its first tabs; the rest are under More options, each shown with its attribute name. 
<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="sidebar"
  data-color-scheme="auto"
></script>
In a single-page app you can call KeluWidget.init() instead of using attributes. It needs clientKey and either knowledgeBaseId or widgetId. The other option names are camelCase but often differ from the attribute: data-launcher-button-hidden is hideLauncher, data-modal-overlay-hidden is hideOverlay, data-chat-disclaimer is disclaimer. See Functions.

​
How attribute values are read

  • Booleans: any value except "false" or "0" is true. A bare data-search-mode-enabled turns search on.
  • Defaults: leaving an attribute out keeps the default, and so does setting a text attribute to "". The one exception is data-modal-subtitle="", which removes the subtitle.
  • Lists are comma-separated. data-suggested-questions is split on |, so a question can contain a comma. data-privacy-links is JSON.
  • Sizes take any CSS length. A bare number means pixels for widths, heights and component styles. Font sizes, data-border-radius and the panel offsets need a unit, such as 15px.
  • Unsafe values are ignored: anything containing ;, {, }, <, > or url(, or longer than 200 characters.

​
Migrating from kapa.ai

The widget also reads kapa.ai’s attribute names: current, legacy, component-style and Support Form Deflector names. Paste your kapa tag across, then swap in a Kelu widget id (or knowledge base id) and a client key. Legacy and kapa.ai names lists every alias and the few kapa options with no counterpart.