Live Chat Widgets: Comparing Visual Designs

chat-widget-color-design

More and more companies are waking up to the advantages of adding a live chat widget to their site. From customer service to sales techniques, live chat gives you a new way to interact with your customers that is easy to set up, affordable to maintain, and convenient for your site visitors to use.

But all live chat interfaces aren't created equal. With hundreds of companies offering some kind of live chat option for your site, how do you decide which one is right for you? Of course you'll want to compare the features of the live chat platform to determine which options meet your needs, but that's just the start of the decision making process.

You can't discount the importance of visual design when it comes to live chat. As one of the most "interactive" portions of your page, it's important that the style of the live chat widget you choose fits with the image you want to present to your customers. While many live chat platforms allow you to change the primary color of their widgets, it's worth noting how those colors are presented.

mobile-live-chat-apps_iphone_android

You also want to pay attention to the size, shape, iconography, and default fonts used by a chat window, to make sure nothing clashes with the rest of your site. You'll likely want your site design and brand teams to offer insight on the choice as well, to make sure the live chat widget enhances the appeal of your site, rather than detracting from it. You should also consider the best colors and fonts for your industry and the type of service you want to provide with your live chat.

To help you find the right live chat widget for you, we spent some time looking at the market leaders for live chat and chat bots and gathering some key design information, along with screenshots of the default chat widget each company provides. You can scroll through the gallery below to find the names, websites, main color hex codes, and some of the primary font families used by many of the most popular live chat platforms available online.

Let us know your favorite options and design insights in the comments below, and you may be featured in an upcoming article looking deeper at the aesthetic and design of live chat widgets.


wp-live-chat-support

3CX Live Chat

Website URL: www.3cx.com/live-chat
Primary Widget Color: #0596d4
Secondary Widget Color: #FFFFFF
Font Family: Arial


activengage

ActivEngage

Website URL: www.activengage.com
Primary Widget Color: #4e5760
Secondary Widget Color: #FFFFFF
Font Family: PT Sans Regular, Helvetica, Arial


ada-support

Ada Support

Website URL: https://www.ada.cx/
Primary Widget Color: #FFFFFF
Secondary Widget Color: #e8e8eb
Font Family: Apple Color Emoji, Segoe UI, Segoe UI Emoji


apexchat

ApexChat

Website URL: https://www.apexchat.com/
Primary Widget Color: #3b4150
Secondary Widget Color: #FFFFFF
Font Family: Roboto, sans-serif


appcues

Appcues

Website URL: https://www.appcues.com/
Primary Widget Color: #5C5CFF
Secondary Widget Color: #FFFFFF
Font Family: Open Sans, sans-serif


betterbot

BetterBot

Website URL: https://betterbot.ai
Primary Widget Color: #FFFFFF
Secondary Widget Color: None
Font Family: Segoe UI, Roboto, Oxygen


birdseed

BirdSeed

Website URL: https://www.birdseed.io
Primary Widget Color: #0062ff
Secondary Widget Color: #FFFFFF
Font Family: Source Sans Pro, sans-serif


bold-chat

Bold360

Website URL: https://www.bold360.com
Primary Widget Color: #095280
Secondary Widget Color: #FFFFFF
Font Family: Proximanova-regular, Helvetica, Arial


channel

Channel

Website URL: https://www.channel.io/en
Primary Widget Color: #4F5BFF, #4F5BFF, #6C4FFF (Gradient effect)
Secondary Widget Color: #F6F6F7
Font Family: NotoSansJP, NotoSansKR, Helvetica Neue


chatlio

Chatlio

Website URL: https://www.chatlio.com
Primary Widget Color: #FFFFFF
Secondary Widget Color: #b4c0cc
Font Family: Roboto, Sans-serif


chatra

Chatra

Website URL: https://www.chatra.com
Primary Widget Color: #FFFFFF
Secondary Widget Color: None
Font Family: Segoe UI, Roboto, Oxygen


chaty-premio

Chaty (Premio)

Website URL: https://www.premio.io
Primary Widget Color: #FFFFFF
Secondary Widget Color: #a886cd
Font Family: Lato, Sans-serif


clickdesk

ClickDesk

Website URL: https://www.clickdesk.com
Primary Widget Color: #009bff
Secondary Widget Color: #FFFFFF
Font Family: Verdana, Geneva, Sans-serif


cliengo

Cliengo

Website URL: https://www.cliengo.com
Primary Widget Color: #f7f7f7
Secondary Widget Color: #FFFFFF
Font Family: Nunito, Sans-serif


collect-chat

Collect.chat

Website URL: https://www.collect.chat
Primary Widget Color: #FFFFFF
Secondary Widget Color: #f8f8f8
Font Family: Open Sans, Sans-serif


comm100

Comm100

Website URL: https://www.comm100.com
Primary Widget Color: #0094D4, #0082BB (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: SourceSans Pro, Arial


continually

Continually

Website URL: https://www.continual.ly
Primary Widget Color: #1d82d0, #1471b9 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Helvetica, Arial


crisp

Crisp

Website URL: https://www.crisp.chat
Primary Widget Color: #1972F5, #004AB5 (Gradient effect)
Secondary Widget Color: #f5f8fb
Font Family: Crisp Noto Sans Bold, Sans-serif


drift

Drift

Website URL: https://www.drift.com
Primary Widget Color: #0A5BFF
Secondary Widget Color: #FFFFFF
Font Family: Open Sans, Sans-serif


fibotalk

Fibotalk

Website URL: https://www.fibotalk.com
Primary Widget Color: #3a79b7
Secondary Widget Color: #FFFFFF
Font Family: Helvetica, Arial, Sans-serif


formilla_widget_upd

Formilla

Website URL: https://www.formilla.com/
Primary Widget Color: #1169ea
Secondary Widget Color: #f3f8ff
Font Family: Poppins, Sans-serif


freshchat

Freshchat

Website URL: www.freshworks.com/
Primary Widget Color: #002d85
Secondary Widget Color: #f4f5f7
Font Family: Segoe UI, Segoe UI Emoji, Roboto


getbutton-io

GetButton

Website URL: https://getbutton.io
Primary Widget Color: #0084FF
Secondary Widget Color: #FFFFFF
Font Family: Roboto, Helvetica Neue, Sans-serif


happy-fox-chat

HappyFox

Website URL: https://www.happyfox.com
Primary Widget Color: #E85C41
Secondary Widget Color: #f9f9f9
Font Family: Source Sans Pro, Sans-serif, Segoe UI


help-on-click

HelpOnClick

Website URL: https://www.helponclick.com
Primary Widget Color: #2e2e2e, #292929, #1e1e1e (Gradient effect)
Secondary Widget Color: #eee
Font Family: Arial, Helvetica, Sans-serif


helpcrunch

HelpCrunch

Website URL: https://helpcrunch.com
Primary Widget Color: #5184D8
Secondary Widget Color: #6995DD
Font Family: HelveticaNeueCyr, Sans-serif


hubspot-messages

HubSpot

Website URL: https://www.hubspot.com
Primary Widget Color: #425B76
Secondary Widget Color: #FFFFFF
Font Family: Avenir Next W02, Helvetica, Arial


iflychat

iFlyChat

Website URL: https://www.iFlyChat.com
Primary Widget Color: #1D4A88
Secondary Widget Color: #FFFFFF
Font Family: Helvetica, Arial, Sans-serif


intercom

Intercom

Website URL: https://www.intercom.com
Primary Widget Color: #3047EC, #0F22A7 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Intercom-font, Helvetica Neue, Apple Color Emoji


jivochat

JivoChat

Website URL: https://www.jivochat.com
Primary Widget Color: #2F324A, #424867 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Arial, Sans-serif


wame-chat

Join.chat

Website URL: https://join.chat
Primary Widget Color: #128c7e
Secondary Widget Color: #e6ddd4
Font Family: Segoe UI, Roboto, Oxygen


kayako

Kayako

Website URL: https://www.kayako.com
Primary Widget Color: #25497F
Secondary Widget Color: #00ADDF
Font Family: Arial, Sans-serif


landbot

Landbot

Website URL: https://www.landbot.io
Primary Widget Color: #F1F3F4
Secondary Widget Color: #07A35E
Font Family: Open Sans, Sans-serif


liveadmins

LiveAdmins

Website URL: https://www.liveadmins.com
Primary Widget Color: #ebebeb
Secondary Widget Color: #FFFFFF
Font Family: Segoe_light


livechat

LiveChat

Website URL: https://www.livechat.com
Primary Widget Color: #F6F6F7
Secondary Widget Color: #FFFFFF
Font Family: Noto Sans, Sans-serif


livehelpnow

LiveHelpNow

Website URL: https://www.livehelpnow.net
Primary Widget Color: #4094cf
Secondary Widget Color: #FFFFFF
Font Family: LHN Open Sans, Sans-serif


liveperson

LivePerson

Website URL: https://www.liveperson.com
Primary Widget Color: #ff6900
Secondary Widget Color: #FFFFFF
Font Family: Helvetica Neue-Light, Helvetica-Light, Arial


livesupporti-1

LiveSupporti

Website URL: https://www.livesupporti.com
Primary Widget Color: #FFFFFF
Secondary Widget Color: #F1F1F1
Font Family: Helvetica Neue, Helvetica, Arial


maxwell-ai

Maxwell AI

Website URL: https://maxwell.ai
Primary Widget Color: #FFFFFF
Secondary Widget Color: #0304FF
Font Family: Segoe UI


mobilemonkey

MobileMonkey

Website URL: www.mobilemonkey.com
Primary Widget Color: #2E4EF7
Secondary Widget Color: #FFFFFF
Font Family: Open Sans, Sans-serif


mylivechat

My Live Chat

Website URL: https://mylivechat.com
Primary Widget Color: #0275D8
Secondary Widget Color: #FFFFFF
Font Family: Poppins


ngage-live

Ngage Live

Website URL: https://www.ngagelive.com
Primary Widget Color: #2b2b2b
Secondary Widget Color: #FFFFFF
Font Family: Proxima Nova Rg Regular, Helvetica Neue, Helvetica


olark

Olark

Website URL: https://www.olark.com
Primary Widget Color: #3d3683
Secondary Widget Color: #FFFFFF
Font Family: Noto Sans, Sans-serif


online-chat-centers

Online Chat Centers

Website URL: www.onlinechatcenters.com
Primary Widget Color: #F2F2F2
Secondary Widget Color: #3fb2de
Font Family: Arial


onwebchat

onWebChat

Website URL: https://www.onwebchat.com
Primary Widget Color: #43568c
Secondary Widget Color: #FFFFFF
Font Family: Arial, Verdana, Sans-serif


live2support

ProProfs Chat

Website URL: www.proprofs.com/chat
Primary Widget Color: #2F74AC
Secondary Widget Color: #FFFFFF
Font Family: Sans-serif


provide-support

Provide Support

Website URL: www.providesupport.com
Primary Widget Color: #f57c00
Secondary Widget Color: #fef8f2
Font Family: Open Sans, Verdana, Sans-serif


pure-chat

Pure Chat

Website URL: https://www.purechat.com
Primary Widget Color: #A9A1B6, #B6AFC1 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Roboto, Oxygen


reachlocal-live-chat

ReachLocal Live Chat

Website URL: https://www.reachlocal.com
Primary Widget Color: #EE7523
Secondary Widget Color: #FFFFFF
Font Family: Roboto, Sans-serif


reamaze

Re:amaze

Website URL: https://www.reamaze.com
Primary Widget Color: #10A1C5, #58BDD6 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Nunito, Helvetica, Arial


replain

Re:plain

Website URL: https://www.replain.cc
Primary Widget Color: #FFFFFF
Secondary Widget Color: #f9f9f9
Font Family: Sans-serif


respage

Respage

Website URL: https://www.respage.com
Primary Widget Color: #198d9c
Secondary Widget Color: #FFFFFF
Font Family: Apple-system, BlinkMacSystemFont, Segoe UI


reve-chat

REVE Chat

Website URL: https://www.revechat.com
Primary Widget Color: #7FA5C7
Secondary Widget Color: #FFFFFF
Font Family: Roboto, Sans-serif


rocket-chat

Rocket.Chat

Website URL: https://rocket.chat
Primary Widget Color: #666666
Secondary Widget Color: #FFFFFF
Font Family: Helvetica Neue, Arial, Sans-serif


salesforce-live-agent

Salesforce Live Agent

Website URL: https://www.salesforce.com
Primary Widget Color: #205CA0
Secondary Widget Color: #FFFFFF
Font Family: Salesforce Sans, Sans-serif


shopify-chat

Shopify Chat

Website URL: apps.shopify.com/chat
Primary Widget Color: #224201
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Roboto, Oxygen


smallchat

Smallchat

Website URL: https://small.chat
Primary Widget Color: #222232
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Roboto, Oxygen


smartsupp

Smartsupp

Website URL: https://www.smartsupp.com
Primary Widget Color: #E2AC46, #D99682 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Ubuntu, Sans-serif


snapengage

SnapEngage

Website URL: https://snapengage.com
Primary Widget Color: #ff9900
Secondary Widget Color: #FFFFFF
Font Family: Lato, Sans-serif


social-intents

Social Intents

Website URL: www.socialintents.com
Primary Widget Color: #0E71EB
Secondary Widget Color: #F9FAFB
Font Family: Helvetica Neue, Helvetica, Arial


sonetel-chat

Sonetel Chat

Website URL: https://sonetel.com
Primary Widget Color: #68D0D0
Secondary Widget Color: #FFFFFF
Font Family: FontAvenir, Arial, Helvetica


smooch

Sunshine Conversations

Website URL: https://smooch.io
Primary Widget Color: #03363d
Secondary Widget Color: #FFFFFF
Font Family: ProximaNova, Arial, Helvetica Neue


tawk-to

tawk.to

Website URL: https://www.tawk.to
Primary Widget Color: #03a84e
Secondary Widget Color: #FFFFFF
Font Family: Lato, Open Sans, Sans-serif


tidio

Tidio

Website URL: https://www.tidio.com
Primary Widget Color: #2A27DA, #00CCFF (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Muli, Sans-serif


uhchat

uhChat

Website URL: https://uhchat.net
Primary Widget Color: #3B3B3B
Secondary Widget Color: #F7F7F7
Font Family: Times New Roman


userlike

Userlike

Website URL: https://www.userlike.com
Primary Widget Color: #0D8CFF
Secondary Widget Color: #FFFFFF
Font Family: UEmoji, Open Sans, Sans-serif


velaro

Velaro

Website URL: https://velaro.com
Primary Widget Color: #62A70F
Secondary Widget Color: #e6e6e6
Font Family: Open Sans, Sans-serif


virtualspirits

Virtual Spirits

Website URL: www.virtualspirits.com
Primary Widget Color: #5083cf
Secondary Widget Color: #FFFFFF
Font Family: Roboto, Helvetica, Arial


websitealive

WebsiteAlive

Website URL: www.websitealive.com
Primary Widget Color: #FB693D
Secondary Widget Color: #222222
Font Family: Work Sans, Open Sans, Helvetica


whoson

WhosOn

Website URL: https://www.whoson.com
Primary Widget Color: #808080
Secondary Widget Color: #FFFFFF
Font Family: Helvetica Neue, Helvetica, Arial


zopim

Zendesk Suite

Website URL: https://www.zendesk.com/
Primary Widget Color: #03363d
Secondary Widget Color: #FFFFFF
Font Family: Proxima Nova, Arial, Sans-serif


zoho-salesiq

Zoho SalesIQ

Website URL: www.zoho.com/salesiq
Primary Widget Color: #06C, #2182DF (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Salesiq-font


Which colors, fonts, and design elements stand out for you? Remember to let us know which live chat widgets are your favorites in the comment section below.

Join the Formilla blog!

We offer actionable advice about live chat, chat bots, marketing automation, customer service, and sales. Sign up and we'll send you the best of the blog, from articles to infographics, every two weeks.

100% privacy. Unsubscribe any time.