Widget Appearance
The widget's appearance is set per bot, on the Setup tab, under Widget Appearance. Five settings, and the visitor sees all five before they have typed anything.
Pick a Colour the Site Already Uses#
Brand Colour is one hex value, picked from the swatch or typed in. It carries the launcher, the chat header, the send button, and the buttons on your forms. The visitor's own message bubbles stay neutral grey, so the colour marks what the visitor can act on.
A widget in a colour used nowhere else on the page reads as third-party content.
Choose the Launcher by What the Bot Is For#
Launcher Button Layout has two options:
- Circular Launcher Icon. A round floating bubble. The default, and the one that takes least room on a phone.
- Floating Pill with Text. A wider button carrying a label you write.
Where the bot has one specific job, such as bookings, quotes or order tracking, the pill says so and a speech bubble does not.
Write a Launcher Label That Names the Action#
Launcher Label Text is used by the pill layout only, and capped at 25 characters. Two or three words fit without truncation, and a verb states what happens on click.
| Weak | Better |
|---|---|
| Chat | Ask a question |
| Hello! | Get a quote |
| Support | Track my order |
Choose the Chat Layout#
Interface Layout Style has three options for the chat panel itself: Overlay Sidebar Window, a panel over the corner of the page; Full Screen Interface, which fills the window; and Right Sliding Sidebar, a full-height panel. Overlay is available on every plan, and the tab marks which of the three your plan carries. See plans and limits.
Take the Chatleadr Mark Off the Chat Window#
Chatleadr Branding is the last control in the panel, and it holds one toggle: Remove Chatleadr branding from the widget. Turning it on removes the Chatleadr mark from the bottom of the chat window, so a visitor sees only your brand. The mark is the "Powered by Chatleadr" line under the message box.
The toggle is shown on every plan and switches on only on Agency. On a lower plan it carries an upgrade badge, and turning it on opens the upgrade screen instead of saving, so the setting does not stick. Turning it back off is allowed on every plan, and if the plan lapses the mark returns to the chat window at the visitor's next page load. See plans and limits.
The plans table lists two branding rows with similar names, and they are different things. Custom widget branding is the brand colour, the launcher and the chat layout, and it starts on Growth. Chatleadr branding removed is this toggle, it takes our mark off the chat window, and it is Agency only.
What Stays Fixed#
The widget carries its own stylesheet, its own type stack and a fixed launcher position, so a change to the site's theme cannot alter it.
Where the widget cannot fit a page, web controls hide the launcher and open the chat from your own element.
Common Questions#
Can I Use My Own Font in the Widget?#
No. The widget uses its own type stack, so it renders identically on every site, including sites whose own fonts fail to load.
Does the Widget Colour Affect WhatsApp or Instagram?#
No. Meta's apps render those threads, so widget styling does not apply to them. See what differs per channel.
Can I Hide the Launcher on Some Pages?#
Yes. Include the snippet only on the pages that should have it, or use the web controls to open the chat from your own element. See web controls.