Widget Customization
Customize the chat widget appearance — colors, messages, icons, and behavior to match your brand.
Visual Customizer
The easiest way to customize your widget is through the Widget Customizer — a visual editor with live preview. Find it at:
Dashboard → Your Agent → Customizer
Changes are applied in real-time so you can see exactly how the widget will look before publishing.
Appearance Options
Colors & Branding
| Setting | Description |
|---|---|
| Accent Color | Primary color for the header, buttons, and message bubbles |
| Position | Bottom-right or bottom-left corner |
| Bubble Size | Diameter of the floating chat button (px) |
| Panel Dimensions | Width and height of the chat window |
| Agent Avatar | Custom image shown next to agent messages |
| Bubble Icon | Choose from preset icons or upload your own |
Messages & Content
| Setting | Description |
|---|---|
| Welcome Message | First message visitors see when opening the widget |
| Starter Questions | Pre-defined clickable question buttons |
| Placeholder Text | Input field placeholder (e.g., "Ask me anything...") |
| Title | Widget header text (defaults to agent name) |
Behavior
| Setting | Description |
|---|---|
| Lead Capture | When to show the contact form |
| Auto-Open | Whether the panel opens automatically (or only on click) |
| Sound | Notification sound for new messages |
Branding
On the Free and Starter plans, the widget shows a small "Powered by Fetchply" badge at the bottom.
Remove branding is available on the Pro plan and above.
Advanced: Custom CSS
While the widget is isolated in an iframe (so your page CSS won't affect it), you can customize the bubble button style using CSS on your page:
/* Targets the widget bubble container */
#fetchply-widget-container {
/* Move the bubble up from the bottom */
bottom: 80px !important;
}Custom CSS targeting the widget internals is not supported since the chat panel runs inside an iframe. Use the data attributes and dashboard settings for all customization.
Mobile Behavior
The widget automatically adapts on mobile devices:
- Chat panel expands to full-screen on small viewports
- Touch-friendly buttons and input fields
- Keyboard-aware resizing — the input stays visible when the keyboard opens
- Swipe to close on mobile
No additional configuration is needed for mobile responsiveness.