Although chat boxes are sometimes seen as cumbersome and old school, there is still a place for them in your website design. A well-placed chat box allows your visitors to chat with you in real time and lets you address any concerns so you can provide up-to-the-minute customer service that will put you ahead of the competition. Live chat is considered helpful by 90 percent of consumers.
It is important the chat box is approachable and functional. There are a few rules of thumb that will help you add an approachable chat box. Here are the elements that work well and some examples of effective chat boxes.
Your chat box should be very easy for your site visitors to find. Many will not automatically expect you to offer this customer service feature. If they don’t see the chat box when they visit your site, they may just assume you don’t have one.
Take a page out of the book of Host Gator. Host Gator offers a live chat button right at the top right of its website. The icon with the blue background and a conversation bubble combined with the words “Live Chat” makes it clear you can talk if you have a question about hosting.
Takeaway: Mark your live chat link clearly and make it easy to find.
Some software and plugins will slow your server down and might aggravate the user with the snail’s pace. You’ll want to create an approachable chat box that doesn’t bog down your server and frustrate your user.
One example of a chat box that works fast can be found on Best Buy’s Geek Squad page. It only offers service to those with a subscription plan for the Geek Squad, but getting help is just a click away, and the software loads quickly and scrolls fast. It also offers an option to phone in if you prefer.
Takeaway: Choose chat box software that won’t slow down your website and is user friendly.
There is nothing more annoying to a user than being in the middle of a chat box session, clicking on a link and suddenly losing the entire chat. You then have to go through the entire story again with a new customer service rep, more often than not.
Warren Cat offers a live chat feature at the bottom of its page. You click on the button that says “Chat Live Now,” and a new window pops up with your chat box. This alleviates the concern of navigating away from the chat box accidentally because the chat box takes up a full window.
Takeaway: Seek out chat box software that opens in a new window or at least offers a warning before the user accidentally navigates away.
Web designs can bet boring when they look similar. But there is no hard and fast rule that your chat box has to be boring. You can certainly add a little branding, personality and fun to the process.
Host Excellence does a good job of creating a fun chat box that draws your attention. It is located in the right sidebar and features an animated arrow that points at a CTA button that reads “Start Chat Now.”
Takeaway: A chat box doesn’t have to be dull. Add your own personality to the feature.
Offering a support area on your website can help visitors know exactly how to access your live chat feature without cluttering other pages with buttons. The support link should appear in all the pages of your site so navigation is simple for site visitors.
One example of a site with an attractive live chat box on its support page is iDriveSafely.com. Note how there is a simple FAQ on the left and a live chat button on the upper right that is easy to find. Site visitors are also offered other options for support, such as email or phone.
Takeaway: If you don’t want to put the live chat button on every page of your site, then offer a dedicated support area where the live chat box can be accessed easily.
Your chat box should be visually pleasing. There should be good contrast between text and background so responses are not difficult to read. Ideally, the chat box will integrate with the colors and design of your website.
One example of a website with a nice chat box is Shopify. If you click on its “Chat With Us Now” button, the page will scroll down and you’ll be asked to share your Shopify domain. If you don’t have one, you can simply click the words under the “Authenticate” box that read “Don’t have a store?” You will then be taken to a box that matches the overall look of the Shopify site but is simple, with text that is easy to read.
Takeaway: Your chat box should mesh well with the overall look of your site, and there should be a nice contrast between background and text.
A chat box is still a smart way to offer another level of customer service. It can make your site more interactive and help customers experience personal service. This can mean the difference between them choosing to do business with you or choosing to do business with a competitor.
Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.