Widget Customization

Make the chat widget your own. Customize colors, fonts, and features to match your brand perfectly.

Go to Channels in the sidebar.
Open the channel you want to customize.
Find the Appearance section.

Changes preview in real-time as you adjust settings.

Start with a pre-designed template.

Template	Description
Classic	Traditional chat widget style.
Lucio Light	Modern light theme with clean lines.
Lucio Dark	Modern dark theme, great for dark websites.

Select a template, then customize individual settings.

Color settings

Core colors

Setting	What it affects	Default
Primary Color	Main accent color throughout widget.	`#e5e8de`
Header Background	Top bar of the widget.	`#e5e8de`
Header Text	Text in the header.	`#000000`

Message bubbles

Setting	What it affects	Default
Reply Bubble	Agent message background.	`#f1f5f9`
User Bubble	Visitor message background.	`#000000`
User Bubble Text	Visitor message text color.	`#ffffff`

Input area

Setting	What it affects	Default
Input Background	Text input field.	`#ffffff`
Input Text	Text being typed.	`#000000`
Input Border	Border around input.	`#e2e8f0`
Placeholder	Hint text color.	`#94a3b8`
Send Button	Send button color.	`#000000`
Border Radius	Input corner rounding.	`24px`

Setting	What it affects	Default
Footer Background	Bottom area.	`#f8fafc`
Footer Text	Attribution text.	`#64748b`
Source Links	Citation link color.	`#2563eb`

Typography

Font family

Choose a font for your widget.

Option	Style
Fira Code (default)	Modern, technical.
Inter	Clean, professional.
Open Sans	Friendly, readable.
Roboto	Neutral, modern.
System	Uses visitor's system font.

Fonts are loaded automatically from Google Fonts.

Set the language for UI elements (buttons, placeholders, etc.):

English (en)
Dutch (nl)
French (fr)
Spanish (es)
German (de)
Italian (it)
Portuguese (pt)
And more…

Note: this affects the widget interface, not agent responses. Agent responses adapt to the visitor's language automatically.

Welcome screen

Create an engaging first impression when visitors open the chat.

Enable welcome screen

Toggle on to show an intro screen before the conversation starts.

Welcome screen settings

Setting	Description
Title	Main headline (e.g. "Hi there! 👋").
Subtitle	Supporting text (e.g. "How can we help you today?").
Agent Intro	Brief description of your agent.
Button Text	Start conversation button (e.g. "Start chatting").
Logo URL	Custom logo for welcome screen.

Welcome screen colors

Customize every element:

Background color.
Title and subtitle colors.
Agent card styling.
Start button colors.
Contact options styling.

Contact options

Add alternative ways to reach you on the welcome screen.

[
  {
    "type": "email",
    "label": "Email Us",
    "value": "support@yourcompany.com",
    "enabled": true
  },
  {
    "type": "phone",
    "label": "Call Us",
    "value": "+1-234-567-8900",
    "enabled": true
  },
  {
    "type": "link",
    "label": "FAQ",
    "value": "https://yoursite.com/faq",
    "enabled": true
  }
]

Contact types:

email, opens email client.
phone, opens phone dialer (mobile).
link, opens webpage.

Quick start buttons

Help visitors get started with common questions.

Adding quick start buttons

Go to Quick Start section.
Enable Quick Start Buttons.
Add buttons:

Label	Prompt
"📍 Hours & Location"	"What are your opening hours and where are you located?"
"💰 Pricing"	"What are your prices?"
"🎫 Book Tickets"	"How do I book tickets?"

Tip: use emojis to make buttons more engaging.

Best practices

Keep labels short (2–4 words).
Cover your most common questions.
Use action-oriented language.
Limit to 3–5 buttons.

Proactive messages

Engage visitors automatically after they've been on your page.

Settings

Setting	Description	Default
Enable	Turn on proactive messages.	Off
Message Text	What to say.	"Hi! Need help with anything?"
Delay	Seconds before showing.	5
Sound	Notification sound.	Pop

Example messages

Type	Example
Friendly	"Hi there! 👋 Have any questions?"
Helpful	"Looking for something? I can help!"
Specific	"Need help choosing the right plan?"

The message appears as a speech bubble near the widget button.

Visibility hours

Control when the widget shows as "online".

Setting up visibility hours

Enable Visibility Hours.
Set your Timezone.
Configure hours for each day:

Monday:    09:00 - 17:00 ✓
Tuesday:   09:00 - 17:00 ✓
Wednesday: 09:00 - 17:00 ✓
Thursday:  09:00 - 17:00 ✓
Friday:    09:00 - 17:00 ✓
Saturday:  10:00 - 14:00 ✓
Sunday:    Disabled