7 Support Widget Design Tips Backed by HubSpot Data

In customer service, the average response time for an email request is roughly 12 hours. For social media, it's 10 hours. With live chat, customers can get their answers in as little as two minutes.

That is, if you don't count the time it takes to actually find the support widget.

Live chat is a powerful customer service tool. In fact, a study conducted by Comm100 found that more customers were happy with their live chat experience than email or phone — see results below.

Image Source

But, live chat does your customers no good if they can't find it on your website. Your support widget may be too small, it may blend in with your background, or you may not even offer it on pages where customers would expect to find it. If your live chat engagement is lower than anticipated, then it may because your support widget isn't catching the attention of your web visitors.

To make it stand out, read on for a list of support widget design tips you can use with your website.

7 Support Widget Design Tips

1. Place the Support Widget at the Bottom of the Page.

According to Nielsen, many people will scan web pages in an F-shaped pattern. They'll start at the top of your page, scan left to right, then move down the left side of the page.

This makes the bottom of the page an ideal place to put your support widget because it's easy to find, but not distracting to the visitor. People can scan in the F-shaped pattern described, and will end up spotting your widget as they progress to the bottom of the page.

Whether you place your support widget on the right or left is completely up to you. However, it's best practice to A/B test both sides of the page to see where your widget gets better engagement.

2. The Widget's Design Should Be On-Brand, But It Should Also Stand Out.

When you're designing your widget, you should come up with a look that's on-brand but also stands out from the rest of the content on the page. You want it to feel like a natural part of your site, but it shouldn't blend in so it's hard to see.

Remington Begg, the CRO at Impulse Creative, recommends using accent colors to make your support widget stand out. If you use one color when the chat is closed, have the widget change colors when it's opened. Little details like this will help your support widget stand out and get better engagement.

"Make that chat bubble stand out a little bit, and you'll see a higher engagement rate." — Remington Begg, CRO at Impulse Creative.

3. Choose a Live Chat Software That's Customizable.

If you want to create a support widget that really stands out, you'll need a live chat software that offers a variety of personalization features. While many companies will opt for a paid option, there are plenty of free live chat tools that can do this as well.

Some features you should look for are customizable fonts and colors, image uploads for brand logos, and pop-up messages that can greet visitors when the support widget is closed. These are just some standard features as there are plenty more that can help you design an eye-popping chat widget.

4. Provide an Option to Reposition the Chat Widget.

A more advanced feature that some live chat providers will offer is the ability to reposition the support widget once a chat has opened.

Here's an example.

Let's say the problem that you're working on is hidden right behind the chatbox. If you can't move the widget, you're stuck working from memory to describe your problem. This adds friction to the service experience and can lead to inaccurate solutions.

But, if you can click and move, like in the example above, you can avoid this friction and see exactly what you're working on. It's a small, but handy, feature that can save your visitors a lot of headaches.

5. Use an Icon or Text That Clearly Communicates the Widget's Purpose.

Some chat widgets are overlooked because visitors don't realize that they're there for customer support. If your widget's icon doesn't clearly tell your audience that it's a support widget, some may just scroll on by thinking it's an aesthetic piece of decor that compliments your background.

Take this icon, for example.

Image Source

By itself, it's pretty hard to determine the purpose of this widget. But, when we add some surrounding copy, things get a little more clear.

Image Source

Now we know this widget is linked to live chat, and if we need help, someone is waiting on the other end of a chatbox to assist. This reassures our visitor experience and helps us navigate through the rest of the site knowing that someone is there to help.

6. Personalize Your Support Widget to Match Each Webpage.

If you really want your support widget to catch your viewers' attention, you should try personalizing it based on the webpage it's displayed on.

Here's an example from HubSpot.

The image on the left was displayed on HubSpot's homepage, while the image on the right was displayed on a product pricing page. We can see how the copy differs here depending on where the visitor is in the customer journey.

A good way to personalize your support widget is to compare your web pages with your customer journey map. There, you can determine which pages fall where in the customer's journey and can adjust your widget's messaging to fit customer needs.

7. Optimize Your Widget's Design for Mobile Experiences.

One detail that's easy to overlook is mobile experience. Your support widget should render the same on phones and tablets as it does on a desktop. After all, customers are going to seek help on the go, and many will prefer to use live chat on their phones because it's similar to texting. If your support widget doesn't meet the same quality in the mobile view, that can be enough to dissuade a customer from reaching out to your business.

If you're rolling out a new chat support feature, read these tips for live chat implementation.