The Branding page controls everything visible in the widget: colours, font, logo, and position. Changes are reflected immediately in the live preview on the right side of the page.
Colours
The widget uses four colour values that control every visible element:
Primary colour
The widget header bar and send button. Use your main brand colour.
Secondary colour
AI message bubble backgrounds. Usually a slightly lighter or darker shade of your primary colour.
Background colour
The main chat area behind the messages. Most DeFi protocols use a very dark value (#0b0c14 or similar).
Text colour
All text inside the widget. Must contrast with both the background and primary colours.
Check contrast
Run your text colour against both the background and primary colours in a contrast checker before going live. Readability matters more than brand precision. Users need to read chat messages comfortably.
Font
Six fonts are available, all optimised for UI legibility:
- Inter: clean sans-serif, the safest choice for most protocols
- Sora: modern geometric sans-serif with a slightly technical feel
- Space Mono: monospaced, strong technical identity, popular in DeFi
- DM Sans: friendly humanist sans-serif
- IBM Plex Mono: monospaced with a professional feel
- Outfit: geometric sans-serif with strong character
Logo
Upload a square PNG or SVG logo (minimum 64×64px). It appears in the widget header next to your project name. If no logo is uploaded, the first letter of your project name is shown in a coloured circle instead.
Position
Three widget positions are available:
- Bottom-right: the standard floating button position (default, works for most apps)
- Bottom-left: mirrors bottom-right, for apps where the right corner is occupied by another element
- Inline: embeds the widget directly in your page layout rather than as a floating overlay
Test in Preview first
Use the Preview page to confirm branding looks correct on a dark background before going live. Branding changes take effect immediately for all live users the moment you save.