Component styles

Component styles let you override specific widget parts from the script tag or npm config. Use them when the primary color is not enough.

The widget only accepts known slots, known CSS properties, and known states. Unsupported attributes are ignored.

Attribute format


data-{slot}-{property}="value"
data-{slot}-{state}-{property}="value"
data-{slot}-{property}-dark="value"
data-{slot}-{state}-{property}-dark="value"

Example:


<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"
></script>

Slots

Slot	Targets
`panel`	Chat panel container
`panel-header`	Panel header
`panel-body`	Message scroll area
`panel-footer`	Composer area
`backdrop`	Modal backdrop
`launcher`	Floating launcher outer element
`launcher-pill`	Pill launcher inner surface
`launcher-pill-label`	Pill launcher text label
`bottom-bar`	Legacy card launcher surface
`launcher-text`	Launcher main text
`launcher-subtitle`	Launcher subtitle in card mode
`launcher-mark`	Launcher icon container
`launcher-send`	Legacy card launcher arrow
`submit-button`	Composer send button
`user-bubble`	User message bubble
`assistant-answer`	Assistant answer block
`suggestion-chip`	Suggested question chip
`source-chip`	Citation chip
`disclaimer`	Disclaimer line
`greeting`	Empty-state greeting
`consent-screen`	Consent card
`consent-accept-button`	Consent accept button
`consent-reject-button`	Consent reject button
`feedback-up`	Selected thumbs-up feedback button
`feedback-down`	Selected thumbs-down feedback button

The Knoku branding footer is not customizable through component styles. “Powered by Knoku” appears on Free and Open Source plans and on partner comp orgs; paid Business and Enterprise plans hide it.

Properties

Allowed properties:


background-color
border
border-bottom
border-color
border-radius
color
font-family
font-size
font-weight
opacity
height
width
max-height
max-width
min-height
min-width
padding
padding-top
padding-bottom
padding-left
padding-right
padding-x
padding-y
margin-top
margin-bottom
margin-left
margin-right
margin-x
margin-y
flex-direction
justify-content
top
left
right
bottom
box-shadow
text-shadow
z-index

padding-x, padding-y, margin-x, and margin-y expand to their horizontal or vertical sides.

States

Supported pseudo-state variants:

State	Example
`hover`	`data-launcher-hover-background-color`
`focus`	`data-submit-button-focus-border-color`
`active`	`data-suggestion-chip-active-background-color`

Dark-mode variants add -dark:


data-panel-header-background-color="#ffffff"
data-panel-header-background-color-dark="#020617"
data-launcher-hover-background-color="#111827"
data-launcher-hover-background-color-dark="#f8fafc"

Examples

Brand the launcher


<script
  async
  src="https://cdn.knoku.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-launcher-background-color="#0ea5e9"
  data-launcher-hover-background-color="#0284c7"
  data-launcher-text-color="#ffffff"
  data-launcher-mark-color="#ffffff"
></script>

Tighter suggestion chips


<script
  async
  src="https://cdn.knoku.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-suggestion-chip-border-radius="6px"
  data-suggestion-chip-padding-x="10px"
  data-suggestion-chip-padding-y="6px"
  data-suggestion-chip-font-size="13px"
></script>


<script
  async
  src="https://cdn.knoku.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-backdrop-background-color="rgba(15, 23, 42, 0.56)"
></script>

Uniform feedback color


<script
  async
  src="https://cdn.knoku.com/widget.js"
  data-project-id="YOUR_PROJECT_ID"
  data-feedback-up-color="#6366f1"
  data-feedback-down-color="#6366f1"
  data-feedback-up-color-dark="#818cf8"
  data-feedback-down-color-dark="#818cf8"
></script>

feedback-up and feedback-down apply to the selected state only. Unselected feedback buttons keep the neutral placeholder color.

npm equivalent


import { initKnokuWidget } from '@knoku/widget'
 
await initKnokuWidget({
  projectId: 'YOUR_PROJECT_ID',
  componentStyles: {
    'panel-header': {
      'background-color': '#ffffff',
      'border-bottom': '1px solid #e5e7eb',
    },
    'panel-header:dark': {
      'background-color': '#020617',
    },
    'launcher:hover': {
      'background-color': '#0284c7',
    },
    'suggestion-chip:active': {
      'background-color': '#eef2ff',
    },
  },
})