• All Services

    As a HubSpot Partner Agency, Market Veep is committed to helping our clients reach the right people at the right time through a wide range of digital marketing channels.

  • Onboarding

    Get a faster time-to-start with pro onboarding solutions from HubSpot Certified Trainers

  • Integrations

    From Salesforce to Zoho, expertly integrate your sales and marketing systems

  • Migrations

    Move off of Pardot, Pipedrive, and other systems into your shiny new HubSpot portal

  • Blog

    A collection of marketing, sales, and HubSpot knowledge - with a look inside of the culture here at Market Veep.

  • Ebooks

    Regardless of the industry that you’re in, we’ve got an ebook full of fresh and actionable marketing insights to help catapult your brand to continued success.

  • Events

    Join us for our upcoming events and webinars or download recordings of previous events, webinars, podcasts, and more.

  • Case Studies

    Browse our case studies to see the real results we've achieved for real clients, just like you.

The 14 Secrets to an Engaging Live Chat Window Design

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.

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.

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.

The 14 Secrets to an Engaging Live Chat Window Design
Featured Image Bottom Icon

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.



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:


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



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


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


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



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


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.



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!

Get The Latest From
Market Veep


Get Growing! 

Download our eBook and get advice from 8 CEOs of  Inc. 5000 companies in their own words.