The SDK allows you to apply global customizations that affect all embeddable UIs. This is useful for maintaining a consistent look and feel across your application. The component level styles will take precedence over the global styles that change the same aspects of the UI.Documentation Index
Fetch the complete documentation index at: https://docs.qonto.com/llms.txt
Use this file to discover all available pages before exploring further.
Customization Options
The following global CSS properties are available:| CSS Variable | Description & Accepted Values |
|---|---|
--qonto-embed-color-primary | Accepts any valid color value for primary brand color (e.g., #050505, rgb(5,5,5)). It will affect the color of the primary buttons. |
--qonto-embed-content-color-primary | Color of the text. Accepts any valid color value for primary content text (e.g., #050505, rgb(5,5,5)). |
--qonto-embed-content-color-primary-inverted | Color of the text showing on top of filled backgrounds. Accepts any valid color value for inverted primary content text (e.g., #fff, rgb(255,255,255)). |
--qonto-embed-content-success | Accepts any valid color value for success state content (e.g., var(--success400), #22c55e). |
--qonto-embed-content-warning | Accepts any valid color value for warning state content (e.g., var(--warning400), #f59e0b). |
--qonto-embed-content-error | Accepts any valid color value for error state content (e.g., var(--error400), #ef4444). |
--qonto-embed-content-font-weight | Accepts any valid font weight for content text (e.g., 400, normal). |
--qonto-embed-content-font-size | Accepts any valid font size for content text (e.g., 14px, 0.875rem). |
--qonto-embed-content-line-height | Accepts any valid line-height for content text (e.g., 24px, 1.5). |
--qonto-embed-input-gap | Gap between label, input field, and error message for all input components (e.g., 4px, 8px). |
--qonto-embed-input-label-font-size | Font size for input labels across all input components (e.g., 14px, 1rem). |
--qonto-embed-input-label-line-height | Line height for input labels across all input components (e.g., 24px, 1.5). |
--qonto-embed-input-label-color | Color of input label text for all input components (e.g., #050505, rgb(5,5,5)). |
--qonto-embed-input-label-font-weight | Font weight of input labels for all input components (e.g., 400, bold). |
--qonto-embed-input-text-font-size | Font size for the input text/value across all input components (e.g., 14px, 1rem). |
--qonto-embed-input-text-line-height | Line height for the input text/value across all input components (e.g., 24px, 1.5). |
--qonto-embed-input-text-color | Color of the input text/value for all input components (e.g., #111827, rgb(17,24,39)). |
--qonto-embed-input-background | Background color of input fields for all input components (e.g., #ffffff, white). |
--qonto-embed-input-border | Border style for input fields across all input components (e.g., 1px solid #ccc, 2px solid var(--border-color)). |
--qonto-embed-input-border-radius | Border radius for input fields across all input components (e.g., 4px, 8px). |
--qonto-embed-input-padding | Padding inside input fields for all input components (e.g., 7px 11px, 8px 12px). |
--qonto-embed-input-placeholder-color | Color of placeholder text across all input components (e.g., #9ca3af, rgb(156,163,175)). |
--qonto-embed-input-hover-background | Background color when hovering over input fields (e.g., #f9fafb, rgba(0,0,0,0.02)). |
--qonto-embed-input-focus-border-color | Border color when input fields are focused (e.g., #3b82f6, blue). |
--qonto-embed-input-focus-background | Background color when input fields are focused (e.g., #ffffff, white). |
--qonto-embed-input-focus-border-shadow | Box shadow when input fields are focused (e.g., 0 0 0 4px rgba(59,130,246,0.1)). |
--qonto-embed-input-disabled-background | Background color when input fields are disabled (e.g., #f3f4f6, rgb(243,244,246)). |
--qonto-embed-input-disabled-text-color | Text color when input fields are disabled (e.g., #9ca3af, rgb(156,163,175)). |
--qonto-embed-input-disabled-border-color | Border color when input fields are disabled (e.g., #d1d5db, rgb(209,213,219)). |
--qonto-embed-input-readonly-background | Background color when input fields are read-only (e.g., #f3f4f6, rgb(243,244,246)). |
--qonto-embed-input-error-border-color | Border color when input fields have validation errors (e.g., #ef4444, red). |
--qonto-embed-input-error-message-font-size | Font size for error messages displayed below input fields (e.g., 12px, 0.75rem). |
--qonto-embed-input-error-message-line-height | Line height for error messages displayed below input fields (e.g., 16px, 1.33). |
--qonto-embed-input-error-message-color | Color of error messages displayed below input fields (e.g., #b81818, rgb(184,24,24)). |
--qonto-embed-input-min-height-mobile | Minimum height for input fields on mobile devices (e.g., 40px, 44px). |