The 14 Secrets to an Engaging Live Chat Window Design

3) Introduce Yourself

Add a photo and a personalized introduction, so users know they are chatting with a live person. If you’re using a chatbot, it should be clear that it’s a bot, not a human. 

(Market Veep)

Adding a profile picture is a great way to show your audience that they’re talking to a human representative, which can make it easier for visitors to introduce themselves. 

4) Use a Personalized Greeting

Live chat software allows you to choose who will see your chat window. You can use these settings to customize your messages based on user behavior.

For example, you could show a different message for new vs. returning visitors, like Drift does in the examples above. By acknowledging that you've visited their site before, they're reinforcing a relationship that makes it easier for website visitors to initiate a conversation.

5) Show Chat History

Users may want to view their chat history with you for a variety of reasons, so this feature may prove helpful for more than a few of your live chat users.

(Databox)

Inbound marketing is all about providing the customer with the services and information they need when they need it. So, cataloging your live chat conversations and then allowing your visitors to access their own can be a great way to address a need they may not know they had.

6) Ask a Question

Asking an open-ended question is a great way to start a conversation over live chat. You can even customize the questions asked in your live chat window based on the specific page a user is viewing.

(The New York Times)

7) Show a Reply or Queue Time

Showing your reply time or queue time can help set a user’s expectations around when you’ll respond to them. Take note of the "Chat live now" wording on the live chat box in the bottom-right corner of the image below:

If you click on the window, it opens up and will give you a more precise timeline for when you can expect to speak to a live chat representative.

This is good design, because if someone is expecting an immediate response but don’t know that it could take up to 10 minutes for someone to answer, they’ll likely drop out of the conversation before you get there. This way, the visitor knows that someone will be along shortly (and in the case of this particular example, someone was available almost immediately).

(Quickbooks)

8) Use an Away Message

During times when someone is unavailable to chat, an away message is an easy way to keep your live chat window running without disappointing your users. Remember to let them know when and how you respond to them (via email, etc.) as well as when the live chat will return.

(Olark)

9) Integrate Your Knowledge Base

Many users are looking for quick answers to simple questions. As shown in the HubSpot live chat example below, integrating your knowledge base with your chat software allows users to find answers to FAQs right within your chat window quickly.

(HubSpot)

10) Try Different Placements

While most sites opt to put the chat window in the bottom right corner of the page, you can try out different placements to see if there’s one that makes more sense for your website. Some other options are the bottom left corner, the sides (like the example below), or even the top.

It's worth noting, however, that the window will still open at the bottom of the page (or in a new tab entirely, but more on that in a moment). 

(Auto Accessories Garage)

11) Show Your Brand’s Personality

In addition to matching the look and feel of your brand, a chat window should also capture your brand's personality. Whether that means being very serious and professional or being playful and punny, you can convey your brand image through your chat window.

Just look at how the site below gives their live chat window a fun name to match the tone of their site!

A cute mascot like this can go a long way toward aligning your live chat services with your overall brand identity. Especially if they're as helpful and accommodating as Kinguin's "MIL0." 

(Kinguin)

12) Segment New and Existing Customers

For many businesses, the live chat path will look different for a new customer vs. an existing customer. Asking this question upfront allows your current customers to enter their account information for faster, more personalized help. It also allows new customers to be routed directly to sales.

(Comcast)

13) Open Chat in a New Window

One of the struggles with live chat is that if your user leaves or closes the window, they might miss your responses, and you might miss your chance at a sale. Opening the chat window in a new window can help prevent your tab from getting lost in the shuffle. 

Notice how Nissan USA's website has its "Live Chat" at the top of the page, but when you click on it, it opens up a brand new tab so you can keep your conversation in one place, no matter where else you end up.

(Nissan)

14) Provide Fast Links

If you find that users are chatting in for the same things repeatedly, you could benefit from providing some quick link options in your chat window. These options can lead users down different paths to address their specific concerns.

(The Honest Company)

Ready to Launch Your Live Chat?

Now that you have an idea of what your live chat window can look like, check out these 4 live chat best practices to get your own live chat up and running!