the chat bubble from 2014
You spent a weekend on your site’s typography. Then you pasted a round bubble in the corner that looks like it came from somebody else’s site in 2014. This rant is about the most ignored design element on your page, why it ends up that way, and what a chat that actually fits your site looks like.
you know the one
Round. Some shade of default blue. A speech-balloon icon. A little red badge with a “1” on it, for a message nobody sent you. Five seconds after the page loads, a greeting slides out with a waving hand and asks how it can help, while you’re still trying to read the headline.
Open the panel and it’s a different website. Different font, different corners, different shadows, a header with somebody else’s idea of friendly. It sits in the corner of your careful, opinionated site like a sticker on a painting.
why it happens
Most chat widgets are designed to look like the chat vendor. That makes sense from where they sit. The bubble is their brand, and it appears on thousands of sites for free.
For you, it means the customization is a colour picker and maybe a position toggle. You pick your brand colour, the bubble turns that colour, and it’s still the same bubble. Now it’s the same bubble in your colour.
vibe coders, we see you
Your site has a look. Even if you think it doesn’t.
Maybe it’s shadcn defaults with gray-200 on everything. Maybe it’s a purple gradient and a headline that promises to change an entire industry. A dark dev-tool page that brags about speed in 72-point type. Cream background, rounded corners and a blob mascot. Serif italics and “thoughtfully crafted”. Helvetica and one red dot.
We’re not judging. Our own site is brutal: thick black borders, acid green, lowercase everything. We’d hate a soft pastel bubble on it just as much. But every one of them is a real style with real rules, and a 2014 bubble breaks all of them at once.
what “fits” actually means
A colour doesn’t make a widget fit. These things do.
Type. The chat should use your font, or at least a close relative. Spookat has 17 self-hosted fonts plus the visitor’s own system font, and none of them come from a third-party font server.
Shape. Corners, borders, shadows and spacing belong to a style. Spookat ships 8 of them: clean, glass, soft, terminal, paper, retro, swiss and brutal. Each one copies a kind of site people actually build, the ones listed above included.
Voice. A paper-style site doesn’t greet people with “hey” and two exclamation marks. Each Spookat style has its own greeting and its own placeholder text. Paper says “Dear team…”. Terminal says “type and hit enter”. Swiss says “Your question”. Same widget, different manners.
Colour. Any accent you want. The text on top of it picks black or white by itself, whichever has more contrast, so your neon lime button stays readable.
Launcher. An icon if you like minimal, or a pill with your own words on it. Left or right, so you can keep it off your own buttons.
Your logo. It goes in the panel header, embedded in the widget itself, so it costs the visitor no extra request.
phones exist
Half the design crimes happen on a phone. The bubble covers the “add to cart” button. The panel opens in a tiny floating box you can’t type in when the keyboard is up.
On a small screen, the Spookat panel goes full screen and respects the notch and the home bar. On a landscape phone it goes full screen too, because otherwise nobody could type. On a desktop the panel grows out of the launcher. On a phone it slides up as a sheet from the bottom edge. If the visitor asked their device for reduced motion, it simply fades in.
and it weighs nothing
The usual excuse for an ugly widget is that it’s “just the support tool”. Fine, but then it shouldn’t be heavy either. Ours is under 4 kb before the click, makes 0 requests to our API until someone opens it, and each style’s CSS only loads with the panel.
you don’t even have to click around
Style, font, accent, side and greeting all fit in one window.Spookat line in your code, so your agent can edit them like anything else. Or tell your agent to match your site. It has tools to set the style, font and accent and publish them, and a human can revert that from the dashboard’s activity log.
If you want to see all 8 next to each other first, the styles tour has them.
the test
Take a screenshot of your site with the chat open. Cover your logo with your thumb. Does the chat look like it was part of the design from the start?
If it looks like an ad for someone else’s product, it’s the bubble from 2014. Your site deserves better.