Widget Theming
Customize the visual appearance of your Fyncall widget.
Theme Modes
Light Mode
The default theme with light backgrounds:
- White chat window background
- Dark text for readability
- Primary color accents
Dark Mode
A dark theme option:
- Dark chat window background
- Light text
- Adjusted primary color for visibility
Auto Mode
Automatically matches the user's system preference:
Setting: Auto (System Preference)
The widget checks prefers-color-scheme and switches accordingly.
Primary Color
Your primary color is used throughout the widget:
| Element | Usage |
|---|---|
| Launcher button | Background color |
| Send button | Background color |
| User messages | Bubble background |
| Links | Text color |
| Active states | Highlight color |
Setting Primary Color
Configure in Settings → Widget → Appearance:
Primary Color: #7C3AED
The widget automatically generates variations (light, dark) for different states.
Color Contrast
Ensure your primary color has sufficient contrast:
| Background | Minimum Contrast |
|---|---|
| White text on color | 4.5:1 |
| Primary on white | 4.5:1 |
The dashboard shows a warning if contrast is too low.
Typography
Font Family
The widget uses your browser's system fonts by default:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
Custom fonts can be configured for Enterprise plans.
Font Sizes
| Element | Size |
|---|---|
| Messages | 14px |
| Timestamps | 12px |
| Headers | 16px |
| Buttons | 14px |
Message Styling
User Messages
Messages sent by the customer:
- Background: Primary color
- Text: White
- Alignment: Right
Agent Messages
Messages from agents or AI:
- Background: Light gray (or dark gray in dark mode)
- Text: Default text color
- Alignment: Left
System Messages
System notifications:
- Centered text
- Smaller font size
- Muted color
Avatar Styling
Agent/AI Avatar
- Shape: Circle
- Size: 32px
- Position: Left of message
- Fallback: Initials on colored background
Customer Avatar
- Not displayed by default
- Can be enabled in settings
- Generated from name initials
Input Area
Input Field
/* Light mode */
background: #f5f5f5;
border-radius: 20px;
padding: 10px 16px;
/* Dark mode */
background: #2a2a2a;
Send Button
Uses primary color with white icon.
Scrollbar Styling
Custom scrollbar for the message area:
/* Thin, subtle scrollbar */
width: 6px;
background: transparent;
thumb: rgba(0, 0, 0, 0.2);
Animation Customization
Transitions
All UI transitions use consistent timing:
transition: all 0.2s ease;
Loading States
Skeleton loaders match your theme colors.
Typing Indicator
Animated dots in agent color.
CSS Variables (Enterprise)
Enterprise plans can customize via CSS variables:
:root {
--fyncall-primary: #7C3AED;
--fyncall-primary-dark: #6D28D9;
--fyncall-primary-light: #A78BFA;
--fyncall-background: #ffffff;
--fyncall-text: #1f2937;
--fyncall-text-muted: #6b7280;
--fyncall-border: #e5e7eb;
--fyncall-radius: 12px;
--fyncall-font-family: inherit;
}
Contact your account manager to enable custom CSS variables.
Preview and Test
Always preview theme changes:
- Make changes in the dashboard
- Use the live preview panel
- Test on both light and dark mode
- Check mobile appearance
- Save when satisfied