Kerabie gives you full control over the look and feel of your chat widget. All appearance changes apply instantly on your live website — no code update required.
Accessing appearance settings
Go to Settings → Widget → Appearance.
Available customisations
### Colors
•Primary color — controls the chat bubble, header, and send button. Enter any hex code or use the color picker.
•Agent bubble color — background of agent messages in the chat.
•User bubble color — background of visitor messages.
•Background color — the chat panel background.
### Layout
•Position — Bottom-left or Bottom-right.
•Offset — Add horizontal and vertical spacing from the screen edge (in pixels) to avoid overlapping other UI elements like cookie banners or floating buttons.
•Bubble size — Small (44px), Medium (56px, default), or Large (68px).
•Border radius — Controls how rounded the bubble and chat panel appear (0 = square, 24 = pill-shaped).
### Branding
•Logo — Upload a PNG or SVG image (recommended: 64x64px square with transparent background). This replaces the default Kerabie icon on the bubble and header.
•Agent avatar — Shown beside agent messages. Upload a profile photo per agent under Settings → Team & Agents.
•Remove "Powered by Kerabie" — Available on Basic and above. Toggle in the Appearance panel.
### Typography
•Font family — Use your brand font by entering a Google Fonts name (e.g., "Inter", "Poppins"). The widget loads it automatically. Leave blank to use the system font.
### Messages
•Welcome message — The first text visitors see. Supports emojis.
•Offline message — Shown when all agents are away.
•Pre-chat form — Collect visitor name/email before the conversation starts (optional, recommended for higher-quality leads).
Save and preview
Click Save after making changes. The widget updates on your live site within seconds — no cache clearing needed. Use the Preview button in the settings panel to test changes without leaving the dashboard.
Programmatic theming (React Native SDK)
If you use the React Native SDK, pass theme settings as props:
widgetKey="wk_yourkey"
theme={{
primaryColor: '#6366f1',
userBubbleColor: '#6366f1',
agentBubbleColor: '#f1f5f9',
fontFamily: 'Inter',
bubbleSize: 60,
}}
>
Tips
•Use a color with enough contrast against white for accessibility (WCAG AA minimum: 4.5:1 contrast ratio).
•Test your widget on both desktop and mobile — the bubble position and offset may need different values for each.
•If you have a dark-mode website, Kerabie's widget auto-adapts to the visitor's OS color scheme preference.
