Flyout Chat Window

A simple chat window designed to flyout from the bottom right corner of any screen. The orange chat icon is visible at all times and can be clicked to access the chat window.

The message thread is scrollable and starts at the bottom by default, as you would expect.

The conversation list on the left is also independently scrollable and shows the active conversation as well as notifications for any other conversations.

Because of the context of this unique project, there is no way for users to start a new conversation. Conversations are automatically triggered by other events in the system.

This is a screenshot of the coded HTML/CSS version and it is for a real project!

Posted on Apr 5, 2018
Matt Olpinski
UI + UX Designer for Web & Mobile

More by Matt Olpinski

View profile