Styling
The Kapa Support Form Deflector 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 deflector, applied to elements such as the loader and link colors. You should set this to your brand's color | "#FFFF00" |
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-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 deflector components, including the modal. | "inherit" |
Component style configuration
The Support Form Deflector supports flexible styling for its components using data- attributes. Each component has a unique attribute name (e.g., modal-button), and you can apply a range of CSS properties to customize its appearance. The component style configurations override any global theme configurations.
Supported parameters
The following parameters map to standard CSS properties and can be applied to all components. The default values for these parameters depend on the specific component. All of these parameters are optional.
| Parameter | Description |
|---|---|
padding-x | Defines horizontal padding |
padding-y | Defines vertical padding |
background-color | Defines background color |
color | Defines text color |
font-size | Defines font size |
font-weight | Defines font weight |
border | Defines border style |
border-radius | Defines border radius |
opacity | Defines opacity |
margin-top | Defines top margin |
margin-bottom | Defines bottom margin |
margin-right | Defines right margin |
margin-left | Defines left margin |
Available components
The following components of the Support Form Deflector can be customized with the Supported Parameters. Some components support additional individual configuration options. Some components inherit configured parameters from each other.
| Name | Attribute Name | Description |
|---|---|---|
| Loading Indicator | loading-indicator | The inline loading indicator displayed while the response is being generated, before the modal opens. |
| Info Text | info-text | Text elements rendered inline, providing additional information about the answer generation. |
| Pre-Submit Info | pre-submit-info | An informational text displayed before answer generation is triggered. Inherits styles from Info Text. |
| Post-Submit Info | post-submit-info | An informational text displayed after answer generation is completed. Inherits styles from Info Text. |
| Loading Info | loading-info | An informational text displayed while the response is being generated. Inherits styles from Info Text. |
| Cancel Answer Button | cancel-answer-button | A button that lets the user cancel an answer generation. |
| Cancelled Answer Indicator | cancelled-answer-indicator | An indicator displayed if response generation was cancelled. |
| Skipped Answer Indicator | skipped-answer-indicator | An indicator displayed if response generation was skipped. |
| Modal Button | modal-button | The inline button shown after the modal is closed, allowing the user to reopen it. |
Applying styles to components
To style a component, concatenate the data- prefix with the component's attribute name (e.g., modal-button) and the CSS property name. This forms the complete data- attribute for the component.
Example: styling the modal button component
The Modal Button component also supports the following individual configuration options:
| Parameter | Description | Default Value |
|---|---|---|
data-modal-button-background-color | Custom background color for the modal button. | Project color |
data-modal-button-color | Custom text color for the modal button. | "white" |
To customize the Modal Button component (the inline button shown after the modal is closed), use the following attributes in the script tag:
<script
...
data-modal-button-margin-top="16px"
data-modal-button-margin-bottom="8px"
></script>