Appearance Options
Customize the widget's colors, position, branding, and layout from your dashboard. All appearance settings are configured in the widget editor — no code changes needed.
All Appearance Settings
| Option | Description | Default |
|---|---|---|
| Primary Color | Accent color for buttons, links, and interactive elements | #ff7a1c |
| Background Color | Widget background and message bubbles | #1a1a2e |
| Text Color | Message text and UI labels | #ffffff |
| Orb Color | Floating bubble background (floating mode only) | Matches primary color |
| Header Icon | Custom icon or logo shown in the widget header | Staffify logo |
| Position | Bubble placement: bottom-right or bottom-left (floating only) | bottom-right |
| Bubble Size | Floating bubble diameter: small (48px), medium (56px), large (64px) | medium |
| Show Branding | Display "Powered by Staffify" in the widget footer | true |
Where to Configure
- Go to Settings → Widgets in your Staffify dashboard
- Select the widget you want to customize
- Click Appearance in the widget editor sidebar
- Adjust colors, position, and branding options
- Save changes — they apply immediately without re-embedding
Color Format
All colors accept hex values. Use the color picker in the dashboard or enter hex codes directly.
// Examples of valid color values
primaryColor: '#ff7a1c' // orange
primaryColor: '#2563eb' // blue
primaryColor: '#16a34a' // green
primaryColor: '#7c3aed' // purpleHiding Branding
The "Powered by Staffify" footer can be hidden on eligible plans. Toggle "Show Branding" off in the Appearance settings. Contact support if the option is not available on your current plan.