Appearance
Match the Informly chat widget to your brand with theme colors, launcher styling, and behavior controls like auto-open and conversation starters.
The appearance settings control everything visual about a widget — the colors, the logo, the launcher icon, and how the widget behaves when it loads. Spending a few minutes here makes the difference between a widget that feels bolted on and one that fits the page.
All appearance options live on the widget detail page under the Config tab's Appearance section. Changes save instantly and propagate to embedded widgets within a few seconds.
Where to find it
Go to Widgets → (your widget) → Config → Appearance.
The panel is split into three groups: Theme, Launcher, and Behavior.
Theme
Theme controls the colors and shape of the chat panel itself.
| Field | What it does |
|---|---|
| Primary color | The dominant accent — message bubbles, buttons, focus rings |
| Accent color | A secondary highlight for hover states and minor UI |
| Text color | The main text color inside the panel |
| Border radius | Corner roundness across bubbles, buttons, and the panel |
| Logo URL | Image shown in the chat header — square, transparent PNG works best |
For best results, mirror the values from your brand site. If your site uses #0F62FE for buttons, use that for the widget's primary color so the two feel like one product.
The logo must be reachable from the visitor's browser. Host it on a public URL — a CDN, your site's static directory, or an S3 bucket with public read.
Launcher
The launcher is the floating button visitors click to open the chat. These options only apply to the chat_bubble layout; other layouts ignore them.
| Field | Options |
|---|---|
| Icon | chat bubble, question, sparkle, or a custom image URL |
| Background color | Any hex color — usually your primary or a complementary one |
| Size | sm, md, lg |
| Position | bottom-right, bottom-left, top-right, top-left |
| Pulse animation | On or off — a subtle pulse draws attention without being annoying |
bottom-right is the default and what most users expect. Move it only if you have a UI element already pinned there.
Behavior
Behavior options change what happens after the script loads on the page.
Auto-open delay
Set a delay in milliseconds before the panel opens automatically. 0 keeps the panel closed until the visitor clicks the launcher. Anything between 5000 and 15000 (5–15 seconds) is a reasonable "proactive greeting" if you want one — anything shorter feels pushy.
Mobile fullscreen
Toggle on to have the panel take over the whole screen on small viewports. Recommended for any site that gets meaningful mobile traffic; the side-panel layout is too cramped on a phone.
Conversation starters
Add up to a handful of suggested opening questions. Visitors see these as chips above the message input when they first open the chat, and clicking one sends it as their first message. Good starters are concrete and short — "How much does the Pro plan cost?" beats "Tell me about pricing".
Live preview
The Appearance section includes a live preview pane that updates as you edit. Use it to check launcher placement, color contrast, and how the logo renders. Click the launcher in the preview to open the panel and check the chat surface too.
For a more realistic test, open the widget's public preview URL described in Embedding — it loads the same widget against a blank page.