Chatbot Styling
Make your chat widget match your brand with comprehensive styling options.
Navigate to Intufind → Chatbot → Styling to access these settings.
Screenshot: wp-chatbot-styling.png
Color Scheme
Options: Auto, Light, Dark Default: Auto
- Auto: Matches visitor's system preference (respects
prefers-color-scheme) - Light: Always use light theme
- Dark: Always use dark theme
Light Mode Colors
These colors are used when the widget is in light mode:
| Setting | Default | Description |
|---|---|---|
| Primary Color | #0084ff | Buttons, links, user message bubbles |
| Assistant Bubble Background | #f8f9fa | AI message background |
| Header Background | #ffffff | Chat header background |
| Accent Color | #dadce0 | Borders, dividers |
| Send Button Color | #0084ff | Send message button |
| Link Color | #0084ff | Clickable links in messages |
| Trigger Button Color | #0084ff | Floating chat button |
| Trigger Button Hover | #0073e6 | Button hover state |
| Trigger Button Border | #dadce0 | Button border |
| Input Background | #ffffff | Message input field |
| Input Border | #dadce0 | Input field border |
| Widget Background | #ffffff | Main chat window background |
Dark Mode Colors
Separate colors for dark mode:
| Setting | Default | Description |
|---|---|---|
| Primary Color | #0084ff | Buttons, links, user message bubbles |
| Assistant Bubble Background | #2d2d2d | AI message background |
| Header Background | #1f1f1f | Chat header background |
| Accent Color | #404040 | Borders, dividers |
| Send Button Color | #0084ff | Send message button |
| Link Color | #6495ed | Clickable links (lighter for readability) |
| Trigger Button Color | #0084ff | Floating chat button |
| Trigger Button Hover | #0073e6 | Button hover state |
| Trigger Button Border | #404040 | Button border |
| Input Background | #2d2d2d | Message input field |
| Input Border | #404040 | Input field border |
| Widget Background | #1f1f1f | Main chat window background |
AI Color Scheme Generator
Don't want to pick every color manually? Use the Generate Color Scheme feature:
- Enter your primary brand color
- Optionally enter a secondary color
- Click Generate Color Scheme
- The AI will create a harmonious color palette
Screenshot: wp-chatbot-color-generator.png
Typography
Font Family
Options: System (default), Inter, Roboto, Open Sans, Custom Default: System
- System: Uses the visitor's system font stack (fastest loading)
- Named fonts: Uses Google Fonts (loads automatically)
- Custom: Enter any font family name
Custom Font Family
If you select "Custom" above, enter the font family name here. Ensure the font is loaded on your site.
Message Font Size
Default: 14px Range: 12-20px
Font size for chat messages.
Message Line Height
Default: 1.5 Range: 1.0-2.5
Line spacing for better readability.
Card Font Size
Default: 14px
Font size for product/post cards shown in chat.
Card Line Height
Default: 1.4
Line spacing for card content.
Widget Dimensions
Max Width
Default: 400px Range: 300-800px
Maximum width of the chat window.
Max Height
Default: 700px Range: 400-1000px
Maximum height of the chat window.
Border Radius
Default: 16px Range: 0-50px
Corner roundness of the chat window.
Shadow
Options: None, Light, Medium, Heavy Default: Medium
Drop shadow intensity around the widget.
Avatar & Icon Settings
Toggle Icon (Trigger Button)
Upload a custom icon for the floating chat button. Leave empty for the default chat icon.
Recommended size: 32x32px or 64x64px
| Option | Description |
|---|---|
| Show Background | Display colored background behind icon |
| Show Border | Display border around the button |
Header Avatar
Upload a custom avatar for the chat header. This appears next to the header title.
Recommended size: 40x40px
| Option | Description |
|---|---|
| Show Background | Display colored background behind avatar |
| Show Border | Display border around the avatar |
Custom CSS
For advanced customization, add custom CSS that will be injected into the widget:
/* Example: Custom message styling */
.intufind-message-bot {
font-style: italic;
}
/* Example: Custom button color */
.intufind-send-button {
background: linear-gradient(135deg, #6101fe, #8b3dff);
}
Note: Custom CSS is stripped of potentially dangerous content for security.
Reset to Defaults
Click Reset Styling Settings to restore all styling options to their original defaults. This is useful if you've made many changes and want to start fresh.
Next Steps
- Live Agent — Set up human handoff
- WooCommerce — E-commerce integrations
- Prompts — Manage suggested prompts