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. How the assistant SPEAKS is a separate page: see Persona.
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.
Light and dark themes
If your site has both a light and a dark mode, the assistant can too. On the Branding page, add a dark theme: your existing colours become the light theme, and you design a second palette (with an optional dark-mode logo) for dark. Then choose which one visitors see: always light, always dark, or Match the visitor.
Match the visitor follows your site's own theme toggle when your code calls window.txid.setTheme("dark") or setTheme("light"), and falls back to the visitor's system preference when you never call it. You can also set the starting theme on the embed script tag with data-theme="dark".
// In your site's own light/dark toggle handler:
window.txid.setTheme(isDark ? "dark" : "light");
// Hand control back to the visitor's system preference:
window.txid.setTheme("auto");Nothing changes until you add one
Projects without a dark theme keep exactly the single palette they have today. Designing a dark theme is what switches the widget to light/dark behaviour.
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.
Content Security Policy
If your site sends a Content-Security-Policy header, the widget is a third-party script and an iframe, so it will be blocked silently: no error, no widget, nothing in the console for most users. This is common on hardened DeFi frontends. Add these sources before you go live rather than debugging it afterwards.
script-src https://app.txid.support;
frame-src https://app.txid.support;
connect-src https://app.txid.support;
img-src https://app.txid.support data:;Use the script tag, not a bare iframe
Wallet extensions cannot show their approval popup for a cross-origin iframe, so the connect button silently does nothing if you embed the iframe directly. The script tag runs a small bridge on your page that makes wallet connection work. Use the inline iframe only for a docs-style assistant with no wallet features.