Styling

The Website Widget allows for extensive customization of its appearance through data- attributes in the script tag. These attributes support global theme configurations as well as specific styling parameters for individual components.

Global theme configuration

The following attributes set global styles that apply across all components.

Parameter	Description	Default Value
data-project-color	Defines the primary color for the widget, applied to elements such as buttons, links, and active states. You should set this to your brand's color.	"#718096"
data-font-family	Sets the font family for all text elements.	"-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji"
data-font-size-xs	Defines font size for extra-small text elements.	"0.75rem"
data-font-size-sm	Defines font size for small text elements.	"0.875rem"
data-font-size-md	Defines font size for medium text elements.	"1rem"
data-font-size-lg	Defines font size for large text elements.	"1.125rem"
data-font-size-xl	Defines font size for extra-large text elements.	"1.25rem"
data-scale-factor	Adjusts the scale of all widget elements (font sizes, gaps, paddings, margins). Useful when your site has a non-standard base font size.	"1"
data-hyperlink-color	Overrides the color of link text in the answer.	Default is the project color.
data-text-color	Overrides the global text color used across the widget components.	"inherit"

View mode presets

The data-view-mode attribute lets you switch between built-in layout presets. A preset applies a coordinated set of default styles across multiple components, giving you a complete layout with a single attribute. You can still override any individual component style on top of a preset — user-specified data-* attributes always take precedence over preset defaults.

Parameter	Description	Default Value
data-view-mode	The layout preset to use. Available values: "default", "sidebar".	"default"

sidebar preset

Renders the widget as a persistent right sidebar taking up the full viewport height with a fixed width. This is useful for documentation or support sites where you want the AI assistant to always be visible. See the sidebar style example for a full walkthrough.

The sidebar preset applies the following defaults:

Component	Property	Preset Value
Modal	size	"500px"
Modal	lock-scroll	"false"
Modal	x-offset	"0"
Modal	y-offset	"0"
Modal	full-screen-on-mobile	"true"
Modal	transition	"slide-left" (300ms)
Modal Overlay	hidden	"true"
Modal Inner	justify-content	"flex-end"
Modal Inner	right	"4px"
Modal Inner	bottom	"4px"
Modal Inner	top	"4px"
Modal Content	border-radius	"var(--mantine-radius-md)"
Modal Header	background-color	"#fff"
Example Questions	col-span	"12"

<script
  ...
  data-view-mode="sidebar"
  data-modal-open-by-default="true"
  data-launcher-button-hidden="true"
></script>

Component style configuration

The Website Widget supports flexible styling for its components using data- attributes. Each component has a unique attribute name (e.g., modal-header), and you can apply a range of CSS properties to customize its appearance. The component style configurations override any global theme configurations.

Supported CSS properties

The following CSS properties can be applied to all components. The default values for these properties depend on the specific component. All of these properties are optional.

Parameter	Description
background-color	Defines background color
border	Defines border style
border-bottom	Defines bottom border
border-color	Defines border color
border-radius	Defines border radius
color	Defines text color
font-family	Defines font family
font-size	Defines font size
font-weight	Defines font weight
opacity	Defines opacity
height	Defines height
width	Defines width
max-height	Defines maximum height
max-width	Defines maximum width
min-height	Defines minimum height
min-width	Defines minimum width
padding	Defines padding
padding-top	Defines top padding
padding-bottom	Defines bottom padding
padding-left	Defines left padding
padding-right	Defines right padding
padding-x	Defines horizontal padding
padding-y	Defines vertical padding
margin-top	Defines top margin
margin-bottom	Defines bottom margin
margin-left	Defines left margin
margin-right	Defines right margin
margin-x	Defines horizontal margin
margin-y	Defines vertical margin
flex-direction	Defines flex direction
justify-content	Defines flex justify
top	Defines top position
left	Defines left position
right	Defines right position
bottom	Defines bottom position
box-shadow	Defines box shadow
text-shadow	Defines text shadow
z-index	Defines z-index

Pseudo-state variants

Any supported CSS property can also target a pseudo-state by adding a state prefix between the component attribute name and the property suffix. The format is data-{component}-{state}-{property}.

Prefix	CSS Pseudo-state	Example
hover-	:hover	data-launcher-button-hover-background-color
focus-	:focus	data-query-input-focus-border-color
placeholder-	::placeholder	data-query-input-placeholder-color
active-	:active	data-submit-button-active-background-color

Available components

The following components of the Website Widget can be customized with the Supported CSS Properties. Some components support additional individual configuration options. Some components inherit configured parameters from each other.

Name	Attribute Name	Inherits From	Description
Launcher Button	launcher-button		The floating button that opens the widget modal.
Launcher Button Label	launcher-button-label		The text label on the launcher button.
Modal	modal		The main modal dialog container.
Modal Inner	modal-inner		The inner wrapper of the modal controlling layout and positioning.
Modal Content	modal-content		The content area of the modal.
Modal Overlay	modal-overlay		The overlay/backdrop behind the modal.
Modal Header	modal-header		The header section of the modal.
Modal Logo	modal-logo		The logo image in the modal header.
Modal Title	modal-title		The title text in the modal header.
Modal Close Button	modal-close-button		The close button in the modal header.
Modal Body	modal-body		The body section of the modal.
Modal Footer	modal-footer		The footer section of the modal.
Disclaimer	disclaimer		The disclaimer text shown at the top of the conversation.
Chat Disclaimer	chat-disclaimer		A disclaimer text shown in the chat area.
Consent Screen	consent-screen		The consent screen shown before the user can interact with the widget.
Query Input	query-input		Shared base styles for both the Ask AI and Search input fields.
Ask AI Input	ask-ai-input	Query Input	The input field for asking AI questions.
Search Input	search-input	Query Input	The input field for search queries.
Submit Button	submit-button		The button used to submit a question.
Example Questions	example-questions		The container for example question buttons.
Example Question Button	example-question-button		An individual example question button.
Conversation Item Question	conversation-item-question		The user's question bubble in the conversation.
Conversation Item Answer	conversation-item-answer		The AI's answer bubble in the conversation.
Conversation Button	conversation-button		Shared base styles for conversation action buttons.
Answer Feedback Button	answer-feedback-button	Conversation Button	The thumbs up/down feedback buttons.
Answer Copy Button	answer-copy-button	Conversation Button	The button to copy an answer.
Thread Clear Button	thread-clear-button	Conversation Button	The button to clear the conversation thread.
Deep Thinking Button	deep-thinking-button	Conversation Button	The button to toggle deep thinking mode.
Answer CTA Button	answer-cta-button		A custom call-to-action button below the answer.
Source Link	source-link		A source reference link shown below the answer.
Source Link Primary Heading	source-link-primary-heading		The primary heading text of a source link.
Source Link Secondary Heading	source-link-secondary-heading		The secondary heading text of a source link.
Search Result	search-result		An individual search result item.
Search Result Badge	search-result-badge		The source badge on a search result.
Search Result Primary Text	search-result-primary-text		The primary text of a search result.
Search Result Secondary Text	search-result-secondary-text		The secondary text of a search result.
Search Ask AI CTA	search-ask-ai-cta		The "Ask AI" call-to-action shown in search results.
Switch	switch		The toggle switch between Ask AI and Search modes.
Switch Label	switch-label		The label text on the mode switch.
MCP Button	mcp-button		The MCP install button in the modal header.
MCP Dropdown	mcp-dropdown		The MCP install dropdown menu.
Kapa Branding	kapa-branding		The "Powered by Kapa" branding element.
Privacy Links	privacy-links		The privacy policy links section.

Style inheritance

Some components inherit styles from a parent component. Styles set on the parent apply to all inheriting children, but can be overridden by setting attributes on the child component specifically.

Parent Component	Child Components
Query Input	Ask AI Input, Search Input
Conversation Button	Answer Feedback Button, Answer Copy Button, Thread Clear Button, Deep Thinking Button

For example, styles set on data-query-input-* apply to both the Ask AI and Search inputs, but can be overridden by setting data-ask-ai-input-* or data-search-input-* specifically.

Variant styles

The Answer Feedback Button and Deep Thinking Button support two visual states: a base state and an enabled state. The enabled state is styled using a separate attribute name. All supported CSS properties can be applied to either state independently.

Component	Base Attribute Name	Enabled Attribute Name
Answer Feedback Button	answer-feedback-button	answer-feedback-button-enabled
Deep Thinking Button	deep-thinking-button	deep-thinking-button-enabled

Applying styles to components

To style a component, concatenate the data- prefix with the component's attribute name (e.g., modal-header) and the CSS property name. This forms the complete data- attribute for the component.

Example: styling the modal header

<script
  ...
  data-modal-header-background-color="#1a1a2e"
  data-modal-header-color="#ffffff"
  data-modal-header-padding-y="12px"
></script>

Example: styling with hover and focus states

<script
  ...
  data-query-input-placeholder-color="#999"
  data-query-input-focus-border-color="#6306B6"
  data-launcher-button-hover-background-color="#5205a0"
></script>

Example: styling the variant components

<script
  ...
  data-answer-feedback-button-border="1px solid #dee2e6"
  data-answer-feedback-button-border-radius="4px"
  data-answer-feedback-button-enabled-background-color="#e8f5e9"
  data-answer-feedback-button-enabled-border="1px solid #4caf50"
  data-deep-thinking-button-enabled-background-color="#e3f2fd"
  data-deep-thinking-button-enabled-color="#1976d2"
></script>

Component-specific configuration options

Some components support additional individual configuration options beyond the universal CSS properties listed above. These are listed below for each component.

Launcher button

Parameter	Description	Default Value
data-launcher-button-hidden	Set to "true" to hide the launcher button.	"false"
data-launcher-button-image	URL for the image displayed on the button.	[project-logo]
data-launcher-button-text	Text displayed on the button.	"Ask AI"
data-launcher-button-image-height	Height of the button image in pixels.	"32"
data-launcher-button-image-width	Width of the button image in pixels.	"32"
data-launcher-button-animation-enabled	Set to "false" to disable the button entrance animation.	"true"
data-launcher-button-hover-animation-enabled	Set to "false" to disable the button hover animation.	"true"

Modal

Parameter	Description	Default Value
data-modal-size	Width of the modal.	"800px"
data-modal-lock-scroll	Set to "false" to allow page scrolling when the modal is open.	"true"
data-modal-x-offset	Horizontal offset of the modal.	"0vw"
data-modal-y-offset	Vertical offset of the modal.	"6vh"
data-modal-full-screen	Set to "true" for full screen modal.	"false"
data-modal-full-screen-on-mobile	Set to "false" to disable full screen on mobile.	"true"
data-modal-z-index	Z-index of the modal.	"200"

Modal overlay

Parameter	Description	Default Value
data-modal-overlay-hidden	Set to "true" to hide the modal overlay.	"false"

Modal logo

Parameter	Description	Default Value
data-modal-logo-hidden	Set to "true" to hide the modal logo.	"false"
data-modal-logo-hidden-on-mobile	Set to "true" to hide the logo on mobile devices.	"false"
data-modal-logo-src	URL for the logo image.	[project-logo]
data-modal-logo-src-ask-ai	URL for the logo when in Ask AI mode.	Value of src
data-modal-logo-src-search	URL for the logo when in Search mode.	Value of src

Modal title

Parameter	Description	Default Value
data-modal-title-text	The title text.	"[project name] Docs AI"
data-modal-title-text-ask-ai	The title text when in Ask AI mode.	Value of text
data-modal-title-text-search	The title text when in Search mode.	Value of text

Modal close button

Parameter	Description	Default Value
data-modal-close-button-hidden	Set to "true" to hide the close button.	"false"

Modal footer

Parameter	Description	Default Value
data-modal-footer-text	Custom text for the footer.	Not set

Chat disclaimer

Parameter	Description	Default Value
data-chat-disclaimer	The disclaimer text content. Supports Markdown.	""

Consent screen

Parameter	Description	Default Value
data-consent-screen-title	Title text for the consent screen.	"Hi there, do you want to use the AI chat?"
data-consent-screen-disclaimer	Disclaimer text for the consent screen.	(i18n default)
data-consent-screen-accept-button-text	Text for the accept button.	"I agree, lets chat!"
data-consent-screen-reject-button-text	Text for the reject button.	"No, not interested"

Ask AI input

Parameter	Description	Default Value
data-ask-ai-input-placeholder	Placeholder text for the input field.	"Ask me a question about [project name]..."

Search input

Parameter	Description	Default Value
data-search-input-placeholder	Placeholder text for the search input.	"Search sources..."
data-search-input-icon-hidden	Set to "true" to hide the search icon.	"false"

Example questions

Parameter	Description	Default Value
data-example-questions	Comma-separated list of example questions.	Not set
data-example-questions-col-span	Grid column span for each example question button ("6" = 2 cols).	"6"

Conversation button

Parameter	Description	Default Value
data-conversation-button-label-hidden	Set to "true" to show only icons (hide text labels).	"false"
data-conversation-button-icon-size	Size of the icon in conversation buttons.	"1rem"

Answer feedback button

Parameter	Description	Default Value
data-answer-feedback-button-icon-size	Size of the feedback button icon.	Not set

Answer copy button

Parameter	Description	Default Value
data-answer-copy-button-icon-size	Size of the copy button icon.	Not set

Thread clear button

Parameter	Description	Default Value
data-thread-clear-button-icon-size	Size of the clear button icon.	Not set

Deep thinking button

Parameter	Description	Default Value
data-deep-thinking-button-icon-size	Size of the deep thinking button icon.	"1rem"

Answer CTA button

Parameter	Description	Default Value
data-answer-cta-button-enabled	Set to "true" to enable the CTA button.	"false"
data-answer-cta-button-text	Text displayed on the CTA button.	"Talk to an Expert"
data-answer-cta-button-link	URL the CTA button links to.	"#"

Search result

Parameter	Description	Default Value
data-search-result-target	The link target for search results.	"_blank"

Search ask AI CTA

Parameter	Description	Default Value
data-search-ask-ai-cta-hidden	Set to "true" to hide the Ask AI CTA in search.	"false"

Switch

Parameter	Description	Default Value
data-switch-icon-hidden	Set to "false" to show icons on the switch.	"true"

MCP button

Parameter	Description	Default Value
data-mcp-button-hidden	Set to "true" to hide the MCP button.	"true"
data-mcp-button-text	Text displayed on the MCP button.	"Use MCP"

MCP dropdown

Parameter	Description	Default Value
data-mcp-dropdown-description	Description text in the MCP dropdown.	(i18n default)

Kapa branding

Parameter	Description	Default Value
data-kapa-branding-hidden	Set to "true" to hide the Kapa branding.	"false"
data-kapa-branding-text	Custom text for the branding.	Not set

Privacy links

Parameter	Description	Default Value
data-privacy-links-links	JSON array of link objects, each with title and url fields. Example: '[{"title":"Privacy","url":"/privacy"}]'.	[]

Deprecated attributes

The legacy flat-style attributes (e.g., data-button-bg-color, data-modal-header-bg-color) are still supported for backward compatibility but are superseded by the new component-based system described above. When both a legacy attribute and a new component-based attribute are set, the new component-based attribute takes precedence.

For the full list of legacy attributes, see the Legacy Configuration page.