8 CSS & JavaScript Snippets for Creating Chat UIs

Long before social media took over our screens, internet chat was the original online time-waster. One could spend hours on IRC and other assorted live messaging apps. For those who took part in the obsession, late nights often turned into early mornings. Sleep was lost, wrists were sore. What a time to be alive!

While chat has changed quite a bit since those early days, it’s still every bit as relevant. Only now it has become a staple of customer service and team Slack channels.

And communication has been further improved by the latest CSS and JavaScript techniques. They allow for creating amazingly interactive UIs, while providing more advanced functionality as well.

Today, we’ll show you eight interesting and unique chat UIs. They’re so great, you might even LOL.

Messaging App UI with Dark Mode by Aysenur Turk

Facebook Messenger is wildly popular and it’s no wonder developers are looking to imitate it. The look is simple, effective and instantly-recognizable. Here’s a remix that includes an ever-so-trendy dark mode option.

See the Pen Messaging App UI with Dark Mode by Aysenur Turk

Daily UI #013:Direct Messaging by Fabio Ottaviani

Glassmorphism is a popular look these days. Here, a touch of its style is used to liven up this private messaging UI. Thankfully, the result is miles away from the boring, plain-text chat apps of the past.

See the Pen Daily UI #013:Direct Messaging by Fabio Ottaviani

MSN Messenger 7.5 Visual Demo with WebComponents (HTML+CSS+Javascript) by Manz

Speaking of the past, this UI snippet recreates the look of MSN Messenger. It’s pretty authentic, right down to the chunky 3D icons. Not only does this show how far we’ve come, but it’s also a nice exercise in using modern styling to bring back an old favorite.

See the Pen MSN Messenger 7.5 Visual Demo with WebComponents (HTML+CSS+Javascript) by Manz

floating website chat button (intercom inspired) by neil kalman

Here’s a trend we’re seeing just about everywhere. The “floating” chat UI that’s uncomfortably stuck on the bottom right of the screen. Click the button and start typing away. It certainly is handy, especially for sales and support purposes. Just beware:you’re probably talking to a bot, rather than a real human.

See the Pen floating website chat button (intercom inspired) by neil kalman

Mock Chat Animation by Jacob Foster

Perhaps you’re in the beginning stages of a chat-based project and haven’t fully figured out the UI just yet. No worries, as this mock chat animation snippet can serve as a solid stand-in. The demo is clean, colorful and inspiring. That makes it perfect for wireframing.

See the Pen Mock Chat Animation by Jacob Foster

Stylish chat window design by Mamun Khandaker

For those who use chat to provide customer support, it’s likely that you’re dealing with multiple conversations. This UI snippet provides a solution in the form of neatly-arranged windows. Each one can be minimized and maximized. Notice the status indicator icons within the title – making it easier to see what’s going on.

See the Pen Stylish chat window design by Mamun Khandaker

Simple Chat UI by Sajad Hashemian

Like most design-related things, simple is often better. Chat UIs can become littered with goofy effects and unreadable fonts. But not here. Instead, this “Simple Chat” is intuitive. Best of all, you won’t need to zoom in to read it.

See the Pen Simple Chat UI by Sajad Hashemian

Club Command Line by Jon Kantner

There’s no rule that says chat has to be a text-only experience. Certain instances may call for something a bit more fun. And that’s exactly what this video game-like chat UI does. Use your arrow keys to move your character around and chat up a storm. If you want to keep better track of the conversation, the “View Chat” button pulls up a text archive.

See the Pen Club Command Line by Jon Kantner

BRB, Building a Better Chat UI

With so many cutting-edge technologies available, there are a world of possibilities for chat UIs. Yet, the overall goal should be the same. No matter what bells and whistles we add to the mix, the idea is to create something that’s easy to use and understand.

The other lesson here is that the design choices we make should be based on need. For example, some of the snippets above would be great for an online gaming community – but not so much for a corporate sales channel. A user interface works best when it reflects the people it will serve.