Overview
Chatbot Style lets you match the chatbot to your brand: its name, avatar and texts, and every color. Go to WPiko AI Chatbot → Chat Widget → Appearance → Style. A Live preview panel shows your changes as you make them and stays in view while you scroll.
Appearance Presets
Start by picking a ready-made color scheme with one click, then fine-tune anything below it. Nothing is saved until you click save.
- Aurora Blue: the default, clean and bright
- Midnight: a dark scheme
- Terracotta: warm, earthy tones
Identity & Text
- Chatbot Display Name: shown in the chat header.
- Sub-header Text: a short line below the name, such as “Typically replies instantly”.
- Chatbot Image: the avatar, shown as a circle. Upload one or choose from your Media Library.
- Welcome Message: the first message visitors see. Leave it empty to hide it.
- Input Placeholder: the hint text in the message field.
Main Colors
- Primary Color: the send button, links and highlights.
- Primary Text Color: text and icons on top of the primary color.
Every color field has a color picker, an editable hex box (for example #2563eb) and its own reset button to return to the default.
Advanced Style Options
Click Show Advanced Options next to Advanced Style Options to control every other part of the chatbot:
| Group | Options |
|---|---|
| Chat Window | Chatbot Background Color, Chatbot Header Color, Chatbot Border Color, Chatbot Name Color (also used for the sub-header and floating text) |
| Messages | User Background Color, User Text Color, User Message Border (on/off), Bot Background Color, Bot Text Color (also used for the input text) |
| Input & Icons | Icon Color, Input Background Color, Floating Text Background Color |
| Live Chat Takeover (Pro) | Admin Takeover Label Color, Message Background, Message Border and Message Text: how messages from a human agent look |
Click Reset Advanced Options to return all style options to the default preset. Click Save Style Settings to apply your changes. The page shows Unsaved changes until you save.
Adding Your Own Preset (Developers)
Register extra presets with the wpiko_chatbot_style_presets filter. Any color you leave out falls back to the default preset.
add_filter( 'wpiko_chatbot_style_presets', function ( $presets ) {
$presets['forest'] = array(
'label' => 'Forest',
'description' => 'Deep greens with a calm, natural feel.',
'colors' => array(
'primary_color' => '#2f6f4f',
),
);
return $presets;
} );Best Practices
- Start from the preset closest to your brand, then change only the primary color.
- Keep enough contrast between text and background colors.
- Use different colors for visitor and bot messages.
- The live preview is an approximation. Fonts and spacing follow your theme, so check the real chatbot on your site.
Troubleshooting
- Changes don’t show on the site: make sure you saved, then clear your caching plugin and browser cache.
- Some colors look different: your theme or Custom CSS may override them.
