Colours
| Setting | Attribute | Option | Default |
|---|---|---|---|
| Accent colour | data-brand-color or data-primary-color | primaryColor | #343CED |
| Text colour | data-deflect-text-color | textColor | The colour scheme’s own |
| Link colour | data-deflect-hyperlink-color | hyperlinkColor | The accent colour |
Dark mode
| Setting | Attribute | Option | Default |
|---|---|---|---|
| Colour scheme | data-color-scheme | colorScheme | light |
| Dark-mode selector | data-color-scheme-selector | colorSchemeSelector | None |
- Colour scheme is
light,darkorauto(Follow the visitor’s OS). - Dark-mode selector is for a site with its own theme switch: the selector that matches when the page is dark, such as
html.dark. It wins over Colour scheme, and the modal follows the switch while the page is open.
Fonts
Under Typography and colour on the Appearance tab.| Setting | Attribute | Option | Default | Used for |
|---|---|---|---|---|
| Font family | data-deflect-font-family | fontFamily | System font in the modal. The inline messages use your page’s font | Everything |
| Extra small | data-deflect-font-size-xs | fontSizeXs | 11px | The “Sources” label, the line under the progress text, the footer |
| Small | data-deflect-font-size-sm | fontSizeSm | 13px | Buttons, the rating prompt, the follow-up box, the inline messages |
| Body | data-deflect-font-size-md | fontSizeMd | 14px | The answer |
| Title | data-deflect-font-size-lg | fontSizeLg | 15px | The modal title |
The reopen button
| Setting | Attribute | Option | Default |
|---|---|---|---|
| Hide the icon on the reopen button | data-modal-button-icon-hidden | modalButtonIconHidden | false |
data-modal-button-background-color | modalButtonBackgroundColor | A tint of the accent colour | |
data-modal-button-color | modalButtonColor | The accent colour |
Branding
On the Enterprise plan,data-deflect-hide-branding="true" (option hideBranding) hides Powered by Kelu at the bottom of the modal. Other plans ignore it.
Sharing the Ask AI widget’s theme
When the script tag also runs the Ask AI widget, a deflector attribute you leave out falls back to the widget’s:| Deflector attribute | Falls back to |
|---|---|
data-deflect-font-family | data-font-family |
data-deflect-font-size-xs … -lg | data-font-size-xs … -lg |
data-deflect-hyperlink-color | data-hyperlink-color, then data-anchor-color |
data-deflect-text-color | data-text-color |
data-deflect-hide-branding | data-hide-branding |
data-color-scheme, data-color-scheme-selector, data-brand-color and data-primary-color always apply to both.
Allowed values
Enter plain CSS values, such asInter, sans-serif, 1rem or #0b5fff. The dashboard refuses font and text/link colour values over 200 characters or containing url(, a comment, ;, braces or angle brackets. A value the browser can’t read is ignored.