Match your brand
The widget has two styling layers:
- A primary accent for common controls
- Component style attributes for specific UI slots
Use the accent for most installs. Use component styles when you need tighter visual matching.
Primary accent
Set one color for both themes:
<script
async
src="https://cdn.knoku.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-primary-color="#0ea5e9"
></script>Or set separate colors for light and dark mode:
<script
async
src="https://cdn.knoku.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-primary-color-light="#0ea5e9"
data-primary-color-dark="#38bdf8"
></script>The default accent is #171717 in light mode and #d4d4d4 in dark mode. Invalid hex values fall back to the default and log a console warning.
Launcher copy
Change the launcher label and placement with launcher attributes:
<script
async
src="https://cdn.knoku.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-launcher-text="Ask Docs"
data-launcher-subtitle="Search the docs"
data-launcher-align="bottom-right"
></script>data-launcher-subtitle is visible on the card launcher style. The default pill style uses a single-line label.
Component styles
Component style attributes target one CSS property on one widget slot. Add -dark to scope an override to dark mode.
<script
async
src="https://cdn.knoku.com/widget.js"
data-project-id="YOUR_PROJECT_ID"
data-panel-header-background-color="#ffffff"
data-panel-header-background-color-dark="#020617"
data-suggestion-chip-border-radius="6px"
data-suggestion-chip-padding-x="10px"
></script>See Component styles for the full slot and property list.
Feedback colors
The default selected feedback colors are green and red. Override them when feedback should stay on-brand:
data-feedback-up-color="#0ea5e9"
data-feedback-down-color="#0ea5e9"
data-feedback-up-color-dark="#38bdf8"
data-feedback-down-color-dark="#38bdf8"Only the selected state changes. Unselected feedback buttons keep the neutral placeholder color.