What you still change
| kapa.ai | Kelu |
|---|---|
src="https://widget.kapa.ai/kapa-widget.bundle.js" | src="https://widget.kelu.dev/kelu-widget.js" |
data-website-id="<kapa id>" | data-widget-id="<Kelu widget id>" or data-knowledge-base-id="YOUR_KNOWLEDGE_BASE_ID". data-website-id also works, but it must hold the Kelu widget id |
| Nothing | data-client-key="kl_pk_..." |
window.Kapa(…), window.Kapa.open() | window.Kelu(…), window.Kelu.open(): same calls, same arguments. See JavaScript API |
window.kapaSettings = { user } | window.keluSettings = { user }. uniqueClientId and email are read; metadata is not sent |
A tag that also runs the Support Form Deflector needs
data-knowledge-base-id. With data-widget-id alone the deflector is not attached, and the console says so.Renamed attributes
If both names are on the tag, the Kelu name wins.| Kelu name | Also read |
|---|---|
data-widget-id | data-website-id |
data-product-name | data-project-name |
data-product-logo | data-project-logo |
data-brand-color | data-project-color, data-primary-color |
data-brand-color-dark | data-project-color-dark |
data-anchor-color (and -dark) | data-hyperlink-color (and -dark) |
data-launcher-button-hidden | data-button-hide, data-hide-launcher |
data-launcher-button-text | data-button-text |
data-modal-title | data-modal-title-text |
data-chat-disclaimer | data-modal-disclaimer, data-disclaimer |
data-hide-branding | data-kapa-branding-hidden, data-branding-hidden |
data-branding-text | data-kapa-branding-text |
data-privacy-links | data-privacy-links-links |
data-mcp-enabled | data-show-mcp |
data-mcp-enabled="false" | data-mcp-button-hidden="true" |
data-source-group-ids | data-source-group-ids-include |
data-suggested-questions (split on |) | data-example-questions, data-modal-example-questions (split on ,) |
data-example-questions-columns (a column count) | data-example-questions-col-span, data-modal-example-questions-col-span (a span out of 12) |
data-modal-override-open-selector (and -search, -ask-ai) | data-modal-override-selector (and -search, -ask-ai) |
data-modal-override-open-selector=".name" | data-modal-override-open-class="name" (and -search, -ask-ai) |
data-modal-override-open-selector="#name" | data-modal-override-open-id="name" (and -search, -ask-ai) |
data-launcher-button-image (and -width, -height) | data-button-image (and -width, -height) |
data-launcher-button-animation-enabled | data-button-animation-enabled |
data-launcher-button-hover-animation-enabled | data-button-hover-animation-enabled |
data-modal-logo-src (and -ask-ai, -search) | data-modal-image (and -ask-ai, -search) |
data-modal-logo-width / -height | data-modal-image-width / -height |
data-modal-logo-hidden | data-modal-image-hide |
data-modal-logo-hidden-on-mobile | data-modal-header-logo-hide-on-mobile |
data-modal-close-button-hidden | data-modal-close-button-hide |
data-ask-ai-input-placeholder | data-modal-ask-ai-input-placeholder |
data-search-input-placeholder | data-modal-search-input-placeholder |
data-search-result-target | data-search-result-link-target |
data-modal-overlay-hidden="true" | data-modal-with-overlay="false" |
data-search-ask-ai-cta-hidden="true" | data-search-show-ask-ai-cta="false" |
data-switch-icon-hidden="true" | data-switch-show-icons="false" |
Legacy style attributes
kapa’s legacy style names are rewritten to the component-style form before use:| Legacy spelling | Current spelling | Example |
|---|---|---|
button-… | launcher-button-… | data-button-bg-color |
button-text-font-size, -font-weight, -font-family, -color | launcher-button-label-… | data-button-text-color |
button-position-top / -right / -bottom / -left | launcher-button-top … | data-button-position-right |
modal-disclaimer-… | disclaimer-… | data-modal-disclaimer-bg-color |
modal-inner-position-… | modal-inner-… | data-modal-inner-position-right |
submit-query-button-… | submit-button-… | data-submit-query-button-bg-color |
question-text-color | conversation-item-question-color | |
answer-text-color | conversation-item-answer-color | |
mcp-border-color | mcp-button-border-color | |
search-result-primary-title-font-size (and secondary) | search-result-primary-text-font-size | |
search-ask-ai-cta-text-font-size | search-ask-ai-cta-font-size | |
answer-feedback-button-active-… | answer-feedback-button-enabled-… | The chosen thumb |
…-placeholder-text-color | …-placeholder-color | data-query-input-placeholder-text-color |
…-bg-color | …-background-color | data-modal-header-bg-color |
…-text-color | …-color | data-source-link-primary-heading-text-color |
data-modal-header-padding or data-modal-body-padding-top, is already in the current form.
Values kapa spells differently
| Attribute | kapa value | Read as |
|---|---|---|
data-view-mode | "default" | "modal" |
data-handoff-triggers | uncertainty | uncertain |
data-handoff-triggers | downvote | negative-feedback |
data-handoff-mode | "custom-with-form" | "custom": there is no built-in form, so your onAskAIHandoffOpen handler takes over |
data-query-cache-timeout (deflector) | milliseconds | data-query-cache-seconds, in seconds |
Support Form Deflector names
| Kelu name | Also read |
|---|---|
data-deflector-id | data-integration-id |
data-deflect-question-field | data-main-input-query-selector |
data-deflect-hyperlink-color | data-hyperlink-color, data-anchor-color |
data-deflection-failure-query-selector | data-deflection-failure-trigger-element-query-selector |
data-deflection-failure-event-type | data-deflection-failure-trigger-element-event-type |
data-handoff-format | data-handoff-payload-format |
data-modal-submit-text | data-modal-go-back-text |
data-query-cache-seconds | data-query-cache-timeout (milliseconds) |
kapa options with no counterpart
| kapa option | What happens |
|---|---|
data-bot-protection-mechanism="hcaptcha" | Console warning. reCAPTCHA v3 is used where your deployment requires a token |
data-customization-id | Console warning. Assign the customization to a widget integration in the dashboard and embed it with data-widget-id |
data-search-source-ids-include | Console warning. Scope search with source groups instead |
data-search-source-ids-order | Console warning. Results are ordered by relevance |
data-reasoning-mode-selector-*, data-deep-thinking-button-* | Ignored. There is no Fast/Thinking switch |
data-modal-transition | No effect. The sidebar always slides in from the right |
Defaults that differ
The names match but these defaults do not. Set the attribute to get kapa’s behaviour.| Option | kapa.ai | Kelu |
|---|---|---|
data-modal-open-on-command-k | "false" | "true" |
data-modal-size | 800px | 760px |
data-modal-y-offset | 6vh | 0 (centred) |
data-modal-z-index | 200 | 2147483647 |
data-example-questions-col-span | "6" (two per row) | One per row |
data-switch-icon-hidden | "true" | "false" |
data-user-satisfaction-feedback-enabled | "true", shown to 4% of askers | "false". When on, shown once after three answers |
| Exit survey | Shown on 5% of closes | Shown once per page load, the next time the panel opens after it was closed on an unrated answer |
| Sidebar width | 600px, set by data-modal-size | 460px, set by data-sidebar-width |
| Reader id | kapa_web_id cookie | kl:anon in localStorage |
| Consent | kapa_consent cookie | kl:consent:<knowledge base id> in localStorage |
Deflector data-resolution-tracking-enabled | "false" | "true" |