Market Veep Blog

Drive In More Leads

    Picture of Sam Meza
    By Sam Meza in December, 2019 | 8 minute read

    chat - live chat

    The 14 Secrets to an Engaging Live Chat Window Design

    Chances are a lot of time and care went into your website design. Is the same true for your chat window design? Here are 14 tips for creating an engaging live chat window that will entice website visitors to get in touch with your customer service reps.


    Live chat for business is the most up-and-coming channel for customer support, sales, marketing, and beyond. A well-designed live chat window can help increase user engagement on your website by offering an optimized channel for near-instant communication.

    Here are 14 tips for creating an engaging live chat window for your company’s website:

    1) Use Branded Colors

    Your chat window should look consistent with the rest of your website. Using branded colors is a great way to maintain your brand’s look and feel in your chat window design.

    CHAT WINDOW - HOME DEPOTCHAT WINDOW HOME DEPOT (2)

     

     

     

     

     

     

     

     

    (The Home Depot)

    For example, look at how Home Depot’s chat window design mirrors the color scheme and general aesthetic of the rest of their website. Not only does the chat window hide on the edge of the page (seen in the left image), but when it opens up, it feels like an appropriate and natural extension of their website's brand aesthetic.

    2) Add a Background

    Adding a background to your chat window is another way to maintain branding consistency on your live chat window design.

    CHAT WINDOW - SNAP ENGAGE

    Just make sure that the background you choose doesn’t make it hard to read the text. Like you can see in the example above and below, the live chat window design includes a background so you can easily see the text without messing up the overall consistency of the web page.

    CHAT WINDOW - SNAP ENGAGE (2)

    (SnapEngage)

    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. 

    LIVE CHAT WINDOW DESIGN MARKET VEEP (2)

    (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.

    LIVE CHAT WINDOW DESIGN - DRIFT (2)

    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.

    LIVE CHAT WINDOW DESIGN - DATABOX

    (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.

    live chat window design - NYT

    (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:

    LIVE CHAT WINDOW DESIGN - QUICKBOOKS

    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).

    LIVE CHAT WINDOW DESIGN - QUICK BOOKS (2)

    (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.

    live chat window design - olark

    (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.

    live chat window design - hubspot

    (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.

    LIVE CHAT WINDOW DESIGN - AUTO ACCESSORIES

    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). 

    LIVE CHAT WINDOW DESIGN - AUTO ACCESSORIES (2)

    (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!

    LIVE CHAT WINDOW DESIGN - KINGUIN

    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." 

    LIVE CHAT WINDOW DESIGN - KINGUIN (2)

    (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.

    live chat window design - comcast

    (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. 

    LIVE CHAT WINDOW DESIGN - NISSANNotice 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.

    LIVE CHAT WINDOW DESIGN - NISSAN (2)

    (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.

    Live Chat Window Design - honest company

    (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!

    The Ultimate Guide To Customer Service 101

    Related Posts