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" |
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., answer-box), 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 | Inheritance |
|---|---|---|---|
| Answer Box | answer-box | The element that renders Kapa's response. | - |
| Answer Box Header | answer-box-header | The header section of the Answer Box. | - |
| Answer Box Header Title | answer-box-header-title | The title rendered inside the Answer Box Header. | - |
| Answer Box Footer | answer-box-footer | The footer section of the Answer Box. | - |
| Answer Box Footer Text | answer-box-footer-text | Text elements inside the Answer Box Footer. | - |
| Loading Indicator | loading-indicator | The loading indicator displayed inside the Answer Box while the response is being generated. | - |
| Info Text | info-text | Text elements rendered outside the Answer Box, providing additional information about the answer generation. | - |
| Pre-Submit Info | pre-submit-info | An informational text displayed before answer generation is triggered. | Info Text |
| Post-Submit Info | post-submit-info | An informational text displayed after answer generation is completed. | Info Text |
| Loading Info | loading-info | An informational text displayed while the response is being generated. | Info Text |
Applying Styles to Components
To style a component, concatenate the data- prefix with the component's attribute name (e.g., answer-box) and the CSS property name. This forms the complete data- attribute for the component. For example:
Example: Styling the Answer Box Component
To customize the Answer Box component, use the following attributes in the script tag:
<script
...
data-answer-box-padding-x="10px"
data-answer-box-padding-y="2rem"
data-answer-box-background-color="#ADD8E6"
data-answer-box-color="inherit"
data-answer-box-font-size="12px"
data-answer-box-font-weight="500"
data-answer-box-border="1px solid #00008B"
data-answer-box-border-radius="25px"
></script>