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.
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.
Website URL: www.3cx.com/live-chat
Primary Widget Color: #0596d4
Secondary Widget Color: #FFFFFF
Font Family: Arial
Website URL: www.activengage.com
Primary Widget Color: #4e5760
Secondary Widget Color: #FFFFFF
Font Family: PT Sans Regular, Helvetica, Arial
Website URL: https://www.ada.cx/
Primary Widget Color: #FFFFFF
Secondary Widget Color: #e8e8eb
Font Family: Apple Color Emoji, Segoe UI, Segoe UI Emoji
Website URL: https://www.apexchat.com/
Primary Widget Color: #3b4150
Secondary Widget Color: #FFFFFF
Font Family: Roboto, sans-serif
Website URL: https://www.appcues.com/
Primary Widget Color: #5C5CFF
Secondary Widget Color: #FFFFFF
Font Family: Open Sans, sans-serif
Website URL: https://betterbot.ai
Primary Widget Color: #FFFFFF
Secondary Widget Color: None
Font Family: Segoe UI, Roboto, Oxygen
Website URL: https://www.birdseed.io
Primary Widget Color: #0062ff
Secondary Widget Color: #FFFFFF
Font Family: Source Sans Pro, sans-serif
Website URL: https://www.bold360.com
Primary Widget Color: #095280
Secondary Widget Color: #FFFFFF
Font Family: Proximanova-regular, Helvetica, Arial
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
Website URL: https://www.chatlio.com
Primary Widget Color: #FFFFFF
Secondary Widget Color: #b4c0cc
Font Family: Roboto, Sans-serif
Website URL: https://www.chatra.com
Primary Widget Color: #FFFFFF
Secondary Widget Color: None
Font Family: Segoe UI, Roboto, Oxygen
Website URL: https://www.premio.io
Primary Widget Color: #FFFFFF
Secondary Widget Color: #a886cd
Font Family: Lato, Sans-serif
Website URL: https://www.clickdesk.com
Primary Widget Color: #009bff
Secondary Widget Color: #FFFFFF
Font Family: Verdana, Geneva, Sans-serif
Website URL: https://www.cliengo.com
Primary Widget Color: #f7f7f7
Secondary Widget Color: #FFFFFF
Font Family: Nunito, Sans-serif
Website URL: https://www.collect.chat
Primary Widget Color: #FFFFFF
Secondary Widget Color: #f8f8f8
Font Family: Open Sans, Sans-serif
Website URL: https://www.comm100.com
Primary Widget Color: #0094D4, #0082BB (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: SourceSans Pro, Arial
Website URL: https://www.continual.ly
Primary Widget Color: #1d82d0, #1471b9 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Helvetica, Arial
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
Website URL: https://www.drift.com
Primary Widget Color: #0A5BFF
Secondary Widget Color: #FFFFFF
Font Family: Open Sans, Sans-serif
Website URL: https://www.fibotalk.com
Primary Widget Color: #3a79b7
Secondary Widget Color: #FFFFFF
Font Family: Helvetica, Arial, Sans-serif
Website URL: https://www.formilla.com/
Primary Widget Color: #1169ea
Secondary Widget Color: #f3f8ff
Font Family: Poppins, Sans-serif
Website URL: www.freshworks.com/
Primary Widget Color: #002d85
Secondary Widget Color: #f4f5f7
Font Family: Segoe UI, Segoe UI Emoji, Roboto
Website URL: https://getbutton.io
Primary Widget Color: #0084FF
Secondary Widget Color: #FFFFFF
Font Family: Roboto, Helvetica Neue, Sans-serif
Website URL: https://www.happyfox.com
Primary Widget Color: #E85C41
Secondary Widget Color: #f9f9f9
Font Family: Source Sans Pro, Sans-serif, Segoe UI
Website URL: https://www.helponclick.com
Primary Widget Color: #2e2e2e, #292929, #1e1e1e (Gradient effect)
Secondary Widget Color: #eee
Font Family: Arial, Helvetica, Sans-serif
Website URL: https://helpcrunch.com
Primary Widget Color: #5184D8
Secondary Widget Color: #6995DD
Font Family: HelveticaNeueCyr, Sans-serif
Website URL: https://www.hubspot.com
Primary Widget Color: #425B76
Secondary Widget Color: #FFFFFF
Font Family: Avenir Next W02, Helvetica, Arial
Website URL: https://www.iFlyChat.com
Primary Widget Color: #1D4A88
Secondary Widget Color: #FFFFFF
Font Family: Helvetica, Arial, Sans-serif
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
Website URL: https://www.jivochat.com
Primary Widget Color: #2F324A, #424867 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Arial, Sans-serif
Website URL: https://join.chat
Primary Widget Color: #128c7e
Secondary Widget Color: #e6ddd4
Font Family: Segoe UI, Roboto, Oxygen
Website URL: https://www.kayako.com
Primary Widget Color: #25497F
Secondary Widget Color: #00ADDF
Font Family: Arial, Sans-serif
Website URL: https://www.landbot.io
Primary Widget Color: #F1F3F4
Secondary Widget Color: #07A35E
Font Family: Open Sans, Sans-serif
Website URL: https://www.liveadmins.com
Primary Widget Color: #ebebeb
Secondary Widget Color: #FFFFFF
Font Family: Segoe_light
Website URL: https://www.livechat.com
Primary Widget Color: #F6F6F7
Secondary Widget Color: #FFFFFF
Font Family: Noto Sans, Sans-serif
Website URL: https://www.livehelpnow.net
Primary Widget Color: #4094cf
Secondary Widget Color: #FFFFFF
Font Family: LHN Open Sans, Sans-serif
Website URL: https://www.liveperson.com
Primary Widget Color: #ff6900
Secondary Widget Color: #FFFFFF
Font Family: Helvetica Neue-Light, Helvetica-Light, Arial
Website URL: https://www.livesupporti.com
Primary Widget Color: #FFFFFF
Secondary Widget Color: #F1F1F1
Font Family: Helvetica Neue, Helvetica, Arial
Website URL: https://maxwell.ai
Primary Widget Color: #FFFFFF
Secondary Widget Color: #0304FF
Font Family: Segoe UI
Website URL: www.mobilemonkey.com
Primary Widget Color: #2E4EF7
Secondary Widget Color: #FFFFFF
Font Family: Open Sans, Sans-serif
Website URL: https://mylivechat.com
Primary Widget Color: #0275D8
Secondary Widget Color: #FFFFFF
Font Family: Poppins
Website URL: https://www.ngagelive.com
Primary Widget Color: #2b2b2b
Secondary Widget Color: #FFFFFF
Font Family: Proxima Nova Rg Regular, Helvetica Neue, Helvetica
Website URL: https://www.olark.com
Primary Widget Color: #3d3683
Secondary Widget Color: #FFFFFF
Font Family: Noto Sans, Sans-serif
Website URL: www.onlinechatcenters.com
Primary Widget Color: #F2F2F2
Secondary Widget Color: #3fb2de
Font Family: Arial
Website URL: https://www.onwebchat.com
Primary Widget Color: #43568c
Secondary Widget Color: #FFFFFF
Font Family: Arial, Verdana, Sans-serif
Website URL: www.proprofs.com/chat
Primary Widget Color: #2F74AC
Secondary Widget Color: #FFFFFF
Font Family: Sans-serif
Website URL: www.providesupport.com
Primary Widget Color: #f57c00
Secondary Widget Color: #fef8f2
Font Family: Open Sans, Verdana, Sans-serif
Website URL: https://www.purechat.com
Primary Widget Color: #A9A1B6, #B6AFC1 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Roboto, Oxygen
Website URL: https://www.reachlocal.com
Primary Widget Color: #EE7523
Secondary Widget Color: #FFFFFF
Font Family: Roboto, Sans-serif
Website URL: https://www.reamaze.com
Primary Widget Color: #10A1C5, #58BDD6 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Nunito, Helvetica, Arial
Website URL: https://www.replain.cc
Primary Widget Color: #FFFFFF
Secondary Widget Color: #f9f9f9
Font Family: Sans-serif
Website URL: https://www.respage.com
Primary Widget Color: #198d9c
Secondary Widget Color: #FFFFFF
Font Family: Apple-system, BlinkMacSystemFont, Segoe UI
Website URL: https://www.revechat.com
Primary Widget Color: #7FA5C7
Secondary Widget Color: #FFFFFF
Font Family: Roboto, Sans-serif
Website URL: https://rocket.chat
Primary Widget Color: #666666
Secondary Widget Color: #FFFFFF
Font Family: Helvetica Neue, Arial, Sans-serif
Website URL: https://www.salesforce.com
Primary Widget Color: #205CA0
Secondary Widget Color: #FFFFFF
Font Family: Salesforce Sans, Sans-serif
Website URL: apps.shopify.com/chat
Primary Widget Color: #224201
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Roboto, Oxygen
Website URL: https://small.chat
Primary Widget Color: #222232
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Roboto, Oxygen
Website URL: https://www.smartsupp.com
Primary Widget Color: #E2AC46, #D99682 (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Segoe UI, Ubuntu, Sans-serif
Website URL: https://snapengage.com
Primary Widget Color: #ff9900
Secondary Widget Color: #FFFFFF
Font Family: Lato, Sans-serif
Website URL: www.socialintents.com
Primary Widget Color: #0E71EB
Secondary Widget Color: #F9FAFB
Font Family: Helvetica Neue, Helvetica, Arial
Website URL: https://sonetel.com
Primary Widget Color: #68D0D0
Secondary Widget Color: #FFFFFF
Font Family: FontAvenir, Arial, Helvetica
Website URL: https://smooch.io
Primary Widget Color: #03363d
Secondary Widget Color: #FFFFFF
Font Family: ProximaNova, Arial, Helvetica Neue
Website URL: https://www.tawk.to
Primary Widget Color: #03a84e
Secondary Widget Color: #FFFFFF
Font Family: Lato, Open Sans, Sans-serif
Website URL: https://www.tidio.com
Primary Widget Color: #2A27DA, #00CCFF (Gradient effect)
Secondary Widget Color: #FFFFFF
Font Family: Muli, Sans-serif
Website URL: https://uhchat.net
Primary Widget Color: #3B3B3B
Secondary Widget Color: #F7F7F7
Font Family: Times New Roman
Website URL: https://www.userlike.com
Primary Widget Color: #0D8CFF
Secondary Widget Color: #FFFFFF
Font Family: UEmoji, Open Sans, Sans-serif
Website URL: https://velaro.com
Primary Widget Color: #62A70F
Secondary Widget Color: #e6e6e6
Font Family: Open Sans, Sans-serif
Website URL: www.virtualspirits.com
Primary Widget Color: #5083cf
Secondary Widget Color: #FFFFFF
Font Family: Roboto, Helvetica, Arial
Website URL: www.websitealive.com
Primary Widget Color: #FB693D
Secondary Widget Color: #222222
Font Family: Work Sans, Open Sans, Helvetica
Website URL: https://www.whoson.com
Primary Widget Color: #808080
Secondary Widget Color: #FFFFFF
Font Family: Helvetica Neue, Helvetica, Arial
Website URL: https://www.zendesk.com/
Primary Widget Color: #03363d
Secondary Widget Color: #FFFFFF
Font Family: Proxima Nova, Arial, Sans-serif
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.
