Widget Customization
Make the chat widget match your brand and needs.
Appearance
Colors
In Settings → Widget → Appearance:
- Primary color: Main widget color
- Text color: Message text
- Background: Chat window background
Position
- Bottom right (default)
- Bottom left
Size
- Collapsed: Icon only
- Expanded: Full chat window
Branding
Logo
Upload your logo to display in the widget header.
Welcome Message
Customize the greeting:
Hi there! 👋 How can we help you today?
Placeholder Text
Set the message input placeholder:
Type your message...
Pre-Chat Form
Collect info before chat starts:
Configurable Fields
- Name (required/optional)
- Email (required/optional)
- Phone (optional)
- Custom fields
Example Configuration
Required: Email
Optional: Name, Phone
Custom: Order Number
Business Hours
Show/Hide by Schedule
Configure when widget appears:
- Always visible
- Business hours only
- Custom schedule
Offline Message
When outside hours:
We're currently offline. Leave a message
and we'll get back to you!
Advanced
JavaScript API
Control widget programmatically:
// Open widget
Relay.open();
// Close widget
Relay.close();
// Identify user
Relay.identify({
email: 'customer@example.com',
name: 'John Doe'
});