Assistant Appearance
The Appearance tab lets you customize the visual presentation of your chat widget to match your brand identity.
Overview
Your assistant's appearance affects user trust and engagement. A well-designed widget that matches your website creates a seamless experience.
Theme Settings
Customize colors for both light and dark modes. Users see the theme that matches their system preference (or you can force one theme via JavaScript).
Color Options
| Element | Description |
|---|---|
| Primary/Button Color | Main accent color for buttons, links, and highlights |
| Text Color | Color of message text and UI labels |
| Background Color | Chat window background |
| Border Color | Outlines and separators |
| User Message Background | Color of user's message bubbles |
| Assistant Message Background | Color of assistant's message bubbles |
| Highlight/Action Color | Call-to-action elements |
Setting Colors
- Click on any color swatch
- Use the color picker or enter a hex code
- See changes in real-time in the preview
- Click Save Values to apply
Reset to Defaults
Click Reset Styles to revert all colors to the default theme.
Tips for Color Selection
Contrast: Ensure text is readable against backgrounds. Aim for WCAG AA compliance.
Brand alignment: Use your primary brand color for buttons/highlights.
Dark mode: Don't just invert light mode — choose colors that work well on dark backgrounds.
Consistency: Match colors to your website's design system.
Language & Template
Chat Interface Language
Select the language for UI elements (buttons, placeholders, timestamps). The actual conversation language adapts to the user's messages.
Available languages:
- English
- Spanish
- French
- German
- Portuguese
- And more...
Chat Template
Choose the visual layout style:
| Template | Description |
|---|---|
| Modern | Rounded corners, contemporary design, soft shadows |
| Traditional | Classic chat interface with subtle styling |
| Minimalist | Clean, borderless, minimal visual elements |
Recommendations:
- Modern — Best for most websites, friendly feel
- Traditional — Good for professional/corporate sites
- Minimalist — Ideal for clean, modern web apps
Header Settings
Configure the chat window header.
Close Button
Toggle to show/hide the X button in the chat header. When hidden, users can still minimize by clicking outside the window.
Full Screen Button
Toggle to show/hide the expand button. When clicked, the chat opens in full-screen mode — useful for complex conversations.
Premium Features
Hide Widget Footer
Toggle to remove the "Powered by FineGuide" branding from the chat footer.
Note: This requires a paid subscription plan that includes white-label features.
Widget Appearance
These settings control the chat bubble button that users click to open the chat.
Widget Image
The icon displayed in the floating chat button.
Options:
- Use the assistant's avatar
- Upload a custom image
- Select from preset icons (chat bubble, headset, etc.)
Best practices:
- Use a recognizable icon or your logo
- Ensure it's visible at small sizes (40-80px)
- Consider contrast against your website background
Widget Effects
Add visual effects to draw attention to the chat button:
| Effect | Description |
|---|---|
| Default | Static button, no animation |
| Pulse | Gentle pulsing glow |
| Bounce | Subtle bouncing motion |
| Expanding Ring | Ripple effect emanating from button |
| Glow | Continuous soft glow |
When to use effects:
- New visitors who might not notice the chat
- High-intent pages (pricing, checkout)
- When increasing engagement is a priority
When to avoid:
- If your site is already animation-heavy
- Professional/serious contexts
- If it distracts from primary content
Widget Size
Adjust the diameter of the chat button using the slider.
Range: 60px to 100px
Recommendations:
- 60-70px — Subtle, doesn't compete for attention
- 75-85px — Balanced, visible but not intrusive
- 90-100px — Prominent, maximizes discoverability
Widget Position
Choose where the chat button appears:
| Position | Best For |
|---|---|
| Bottom Right (default) | Most common, users expect it here |
| Bottom Left | When right side has other elements |
Note: Avoid positions that conflict with other floating elements (cookie banners, back-to-top buttons, etc.)
Widget Bubble Label
Optional text displayed next to the chat button.
Examples:
- "Chat with us!"
- "Need help?"
- "Ask a question"
- "👋 Hi there!"
Tips:
- Keep it short (2-4 words)
- Make it action-oriented
- Consider using an emoji for friendliness
- Leave empty for a cleaner look
Live Preview
The right side of the Appearance tab shows a live preview of your chat widget. As you make changes:
- Colors update instantly
- Template changes apply immediately
- Widget effects are demonstrated
Use the preview to:
- Verify color contrast and readability
- Test different template styles
- Preview welcome messages
- Ensure overall look matches your brand
Best Practices
Brand Consistency
Match colors to your website. Use the same primary color, similar backgrounds, and consistent typography feel.
Accessibility
- Maintain sufficient color contrast
- Don't rely on color alone for meaning
- Test with different visual impairments in mind
Mobile Consideration
- Widget should be large enough to tap easily
- Position shouldn't overlap mobile navigation
- Test on various screen sizes
A/B Testing Ideas
- Test different widget positions
- Compare effects vs. no effects
- Try different bubble labels
- Experiment with color variations
JavaScript Customization
For advanced control, use the JavaScript API after embedding:
// Get current theme
window.$__fg_window_theme; // Returns "dark" or "light"
// Switch theme programmatically
window.$__fg_window_switch_theme("dark");
window.$__fg_window_switch_theme("light");
// Control chat window
window.$__fg_window_open(); // Open chat
window.$__fg_window_close(); // Close chat
window.$__fg_window_toggle(); // Toggle open/closedNext Steps
- Configure Features — Set up behavioral options
- Get Integration Code — Deploy to your website
- Test Your Assistant — Verify it works correctly