Widget Appearance
Customize how the Fyncall widget looks to match your brand.
Dashboard Configuration
Most appearance settings are configured in the Fyncall dashboard:
- Go to Settings → Widget → Appearance
- Adjust colors, branding, and launcher settings
- Preview changes in real-time
- Save to apply to your live widget
Color Settings
Primary Color
The primary color is used for:
- Launcher button background
- Send button
- User message bubbles
- Links and accents
Set this to match your brand's primary color.
Theme Mode
Choose the widget's color scheme:
| Mode | Description |
|---|---|
| Light | White background with dark text |
| Dark | Dark background with light text |
| Auto | Follows user's system preference |
Branding
Company Logo
- Upload your logo (recommended: 256x256px PNG/SVG)
- Displayed in the widget header
- Falls back to company name if not set
Company Name
Displayed in the widget header when no logo is provided.
Welcome Message
The greeting shown when a customer opens the widget:
Hi there! 👋
How can we help you today?
Launcher Configuration
Launcher Style
| Style | Description |
|---|---|
| Icon Only | Just the chat icon |
| Icon + Text | Icon with customizable text (e.g., "Chat with us") |
| Custom Image | Your own launcher image |
Launcher Position
Position the launcher button:
| Position | Description |
|---|---|
| Bottom Right | Default position |
| Bottom Left | Left side of screen |
Launcher Offset
Fine-tune the position with pixel offsets:
Bottom offset: 20px
Side offset: 20px
Launcher Size
| Size | Dimensions |
|---|---|
| Small | 48x48px |
| Medium | 56x56px (default) |
| Large | 64x64px |
Header Styles
Customize the widget header appearance:
Header Type
| Type | Description |
|---|---|
| Solid | Single color background |
| Gradient | Two-color gradient |
| Image | Custom background image |
Gradient Direction
For gradient headers, choose the direction:
- Horizontal (left to right)
- Vertical (top to bottom)
- Diagonal
Widget Size
Desktop
| Setting | Default | Range |
|---|---|---|
| Width | 380px | 320-500px |
| Height | 600px | 400-800px |
Mobile
On mobile devices, the widget automatically:
- Opens full-screen
- Uses mobile-optimized styling
- Adjusts input for touch keyboards
Z-Index
Control the widget's stacking order if it conflicts with other elements:
Default z-index: 999999
Adjust this in the dashboard if the widget appears behind other elements.
Avatar Settings
Agent Avatar
- Displayed next to agent/AI messages
- Upload per-agent or use a default
- Recommended: 128x128px circle
Customer Avatar
- Generated based on customer name initials
- Color derived from primary color
Code Example
If you need to override appearance programmatically:
// Override styles after widget loads
Fyncall.on('ready', function() {
// Access the widget element (limited due to Shadow DOM)
// Most styling should be done via dashboard
});
The widget uses Shadow DOM for CSS isolation. External CSS cannot affect widget styling. All customization must be done through the dashboard or our JavaScript API.
Best Practices
- Match your brand - Use your primary brand color for consistency
- Test on mobile - Verify the widget looks good on mobile devices
- Consider contrast - Ensure text is readable against your chosen colors
- Keep it subtle - The launcher should be visible but not intrusive
- Use a clear logo - High-resolution logo for crisp display on retina screens