Why (& how) we built and launched the simplest live chat widget on the planet

Last week, we launched Chat by KeyReply, the simplest live chat widget on the planet.

We’ve been getting lots of questions about why we wanted to build this widget, when it’s different from our core product. It’s a great question, and we want to take the opportunity to talk about the chat trends that are now powering our world of communications.

We also included how we built it, including our thought process on the engineering, design and launch.

And why is it called simplest? Read on and find out.

Major communication pains for SMBs

Through building our core product KeyReply, we realized that there were lots of pains around making it easy for site prospects to contact business owners.

Imagine this: You’re an owner of a business selling, let’s say, flowers (or cakes, or bikes, or cigars — you get the idea.) A couple years ago, setting up a phone number would suffice, and someone could call you directly to make an order. Later came contact forms on your site, and SMS numbers so people could text you their orders.

Maybe you also tried using live chat widgets on your site, but find they are too desk-bound, feature-heavy or just aren’t particularly necessary if it’s just a couple of you running the business.

And then, you had to set up a Facebook page because your customers started expecting you to update them and talk to them on where they are on social media. They started texting you on Messenger, WhatsApp, Telegram, Snapchat, and wherever was convenient. Suddenly, you had to support these channels too, and since you’re an awesome store owner, you happily do it and find that it’s actually making it easier to connect with customer personally and quickly. Contact forms became less timely, and chatting became the de facto way of keeping up conversations with customers.

Question: Wouldn’t it be awesome if there was just a simple and direct way to connect you to your customers on social and messaging apps, so you can focus on running your business and building your customer relationships?

Conceptualizing the widget

The three main tenets we passionately believe in when we build products as a team (and that we consistently applied to building the Chat by KeyReply widget) are these:

  1. We don’t take users away from where they already are. They’re already familiar with these services, and are there for a reason. For example, chat apps are improved on by large teams of people at Facebook, Telegram, Skype, etc on a daily basis — i.e. Awesome products people should use.
  2. The product must be global and accessible. There are businesses all over the world, and we want to help them too. So we also gathered the understanding that we should add e.g. WeChat, Line, KakaoTalk support, too.
  3. It should be simple and delightful to use. Simple as that!

Especially with our empathy for our SMB (small & medium businesses) friends, we decided that we needed to do something about the exploding number of social channels they already manage — and to make it easy for them to communicate with their site visitors/prospects/customers on the site.

Some of the bigger companies and enterprises have the resources to hire teams of customer service and support agents to engage with customers, but SMBs don’t. They have to take matters into their own hands, and work hard on their own terms every day.

This is why we’re building this widget: We care deeply about how they can communicate better and faster with their customers.

Building the chat widget

After thinking and talking about it with SMB customers and site owners for about a month, while busy rolling out v1.2 of KeyReply, we finally got the insights together and built the first iteration of the widget in 3 days.

Cool new widget! Yay! (These are just the channels we’re using ourselves.)

Implementation factors & constraints

There were a few different factors we had to consider:

  1. Web vs. Mobile
    An obvious one, since there are certainly discrepancies between showing a channel on web and showing it on mobile. For example, it doesn’t make much sense to show text messaging on the web (for most users). It was also important from a design perspective to keep the widget as clean as possible, and not show these channels that wouldn’t work on web — so it’d prevent visitors from clicking on it and getting error messages.
  2. Channel-specific deeplinks
    For each of the chat apps, we went through an investigation process of how their deeplinks worked. To make it as seamless as possible, we wanted to ensure that the site owners just had to set it up once, and their contact details should propagate immediately when site visitors wanted to contact them.
  3. Chat apps with no deeplinks
    This was particularly tricky since the experience is less seamless than what we’d prefer. Still, for owners with chat apps that don’t allow direct deeplinks (looking at you, WeChat & WhatsApp), we believe that the site owners will have their QR codes stored somewhere and can easily upload this.
  4. iOS vs. Android
    We’ve got 2 iOS users and 1 Android user on the team, so we managed to test the differences easily from the start. And there are differences. As an example, Skype on iOS comes with a :// while on Android it doesn’t. Subtle differences we learnt through our rampant trial and error process 😁
  5. Mac vs. Windows + Non-chat channels
    It’s funny (but no surprise, haha) that our entire team uses Mac OS. So we enlisted the help of Windows users for testing so we can figure out if the widget and deeplinks work too, like opening Mail apps or native chat windows, for example.

Privacy of data was also a huge factor, and we decided to not collect any of the inputs that people were putting in to the set up form. Which, by the way, looks like this:

Just input contact details, and boom!

Designing the widget

The design of the widget obviously had to look good, because it was going on the sites of people whose business matters. Also, we don’t believe in creating yet another ugly chat widget 😂

We decided on a round aesthetic since it should translate pretty well on most pages, takes up less space, well still looking chat-like and elegant. It also looks better with the logos of the messaging services emblazoned on it. To make it stand out, consistent with Material Design principles, we applied a light shadow to the widget to show that it’s floating just slightly above the page — and call out for site visitors to click on it.

We also resisted using libraries to avoid the widget becoming too heavy, and defaulted instead to using CSS magic to create the effects we wanted.

Designing the form

The form was another essential element of the Chat by KeyReply product. We wanted to make it as inviting as possible for users to input their contact details, so we deliberately gave each channel a large box in its brand color. Not only does it look pleasing to the eye, it also allows us to put in more hints wherever they’re needed. For example, Facebook requires you to know your FB ID, and that’s not something that everyone remembers or knows, so we dropped in a subtle hint on the bottom right of the box.

We also ensured that users could customize the order of the boxes, so they can decide which channel they wanted to show and in which order, to allow for complete control of how the widget would look on their sites.

When we started, we also toyed around with the idea of using a toggle over the checkbox, but after trying it, it was obvious that it looked too detached from the box. So we stuck with the checkbox instead, for clarity’s sake.

The initial color schemes for the chat icon were picked from Flat UI Colors, but we thought it could become too restrictive for some site owners, and made it hex-coded instead so anyone with the code can change the color to fit their website theme.

We also experimented with placing the form both above and below the fold. We finally hid the form below the fold, until the user hit “Get it now” so that we didn’t bombard them with too much additional details until they had already made the decision to use the widget.

Encoding images

For non-text based channels like WeChat, which required uploading of QR codes, we encoded these images in binary so it wouldn’t require a server to store them (simple, remember?) The code gets crazy long, but it definitely doesn’t affect performance in any way. Probably just a little annoying to see in the HTML file.

Specific implementation of channels

A lot of the implementation was done through a mix of prior experience, Stack Overflow queries, and trial and error — with trial and error being the main modus operandi, since there aren’t that much documentation on how to build something like this 😏

We investigated the proper implementation methods for each of the different channels that we put up on the site on the first iteration, based on the factors we mentioned above. Each had its specific quirks, and we made sure to test the channels on as many devices as possible.

For a start, these were the ones we launched with: Phone call, mail, text message, Facetime, Facebook Messenger, WeChat, Telegram, KakaoTalk, and Line.

Launch

We made a cute little gif (in our opinion, anyways) to illustrate how a site owner can connect directly with a visitor on their site through all these different channels.

We ❤ this gif

We tested the widget internally and with a couple of our friends running their own sites, just to check that it’s working well and is actually useful to them. We timed their setup and was cheered to see that it really took under 5 minutes for them to finish the form and get the widget up on their site.

Sudden launch

We had briefly discussed within the team that we could launch the widget on Product Hunt, since we’re familiar with launching products on there (from previous products) and feel that there’d be lots of startups there who could really use something like this.

When we were done polishing the widget, at about 11.30pm on a Wednesday night (Hawaii time, where we’re currently based), Spencer Yang determined that we should probably just go ahead and post it on Product Hunt since it was a Thursday, and would probably get the most visibility than any other day, considering it was more of a productivity tool.

We were then put on the Featured section on the Tech section by the awesome Ben Tossell and hence, at about midnight our time, got to launching our new chat widget for real.

Reaching our communities

We’re really fortunate to be part of the amazing communities of Product Hunt, Slack communities Maker Hunt (run by Eric Willis), #EcommTalk, #Launch, #Startup (Startup Foundation), and #SmallBusiness, and so we got the word out to our friends there first so they could get first dibs at the product.

We also reached out to some of our supporters from other products and got them to take a look at our landing page keyreply.com/chat so they could figure out if this was something that could be useful to them.

Our advisors were also informed of the launch after we did it (sorry advisors lol), so they roped themselves in and helped us get the word out as well 😝 Thanks to Kevin Darmawan & James in particular for showing us support every time, no matter how many times we ask!

Feedback

Thanks to Daniel Kempe, Moin Uddin, Aurelija Pavilionyte, Keith Ng, Fabián Baptista, Jérémy Zaccherini, Ela, Dave Branson Smith, David Allison, Marco Gurnari, Douglas Deming, Blue Startups & Vladimir Kusnezo for all your great comments and encouragement! We’re super psyched to have your support, and we definitely think that giving business owners this instant messaging option is real value for them in engaging with customers too 😉 So we’ll keep working hard to make it useful for them.

Olivier El Mekki gave us a suggestion to improve the UX of the chat buttons, since it may not be too clear what the buttons are for site visitors, which Ben Halpern seconded. (More on this in the next section.)

Ouriel Ohayon and Antoine asked us what the catch is behind us giving it away for free, and Matt Brian wondered what the business model is. Nope, we don’t collect the fields you input, and nope, there really is no catch. Guess it’s pretty suspicious to give away free stuff these days? 🤔 (I guess read the first part of this post to understand why we’re giving this away?)

Shahab Shabibi suggested a Slack integration, which we’ll get to for sure. Shib Hussain also asked about WhatsApp, which we feel is extremely important to lots of people but is annoyingly hard to integrate because of the way it’s built. WhatsApp has also been separately requested by many more people, who contacted us through our own chat widget on the landing page. Dogfooding ftw! (Updates on WhatsApp later.)

Farbod Saraf gave a brilliant idea for us to specify time schedules in local time — i.e. to show and hide available channels based on when the business owner felt he/she would be available to attend to them during workdays/weekends. We’ll consider this at some point, too.

A shoutout to Carlos Garcia who called out a problem with WordPress that we managed to solve for after that.

Most of all, we want to give extra ❤ to Pieter-Paul Walraven, for your ongoing support, feedback and faith in our team right from our first product. We take lots of inspiration from you.

Improvements from feedback

Based on the feedback we received, we continued to fine tune the product over the weekend.

New available channels

We added WhatsApp, Skype, and Snapchat as new channel options. Skype is a direct deeplink into a conversation, Snapchat is a QR code, and WhatsApp was a pain.

To make the WhatsApp integration happen, we had to find a way to devise a vCard option so that site visitors can download a vCard of the business, add it to their contacts, before proceeding to talk to the business owner. Unfortunately, that’s the flow of getting to talk to someone on WhatsApp — either add them as a contact first, or add them from a group chat (the latter which we can’t use, of course.)

While it’s not the most seamless experience for WhatsApp that we hope for, it’s still easier than asking the site visitor to manually type and save the business information on their own. This removes some friction from the process and saves the visitor more time, so there is less mental and technological barriers to reaching the business owner in general.

Improved chat button design

Following the feedback that the channels may not be clear to the visitor, we’ve added a hover (on web)/light tap (on mobile) effect that slides out to display the name of the channel clearly.

Ooh new UI

And of course, we made a bunch of other improvements and fixes.

We’ll continue to improve the widget based on feedback, so keep them coming.

What’s next for Chat by KeyReply

An important consideration for us at this point is to increase the virality of the widget. This is an important, but potentially contentious, part that we need to get right.

We understand the frustration (and anger) of advertising branded chat widgets on our own sites, hence we refused to put any branding on the widget whatsoever in the first place. However, to spread the word for others to find it and use it too, we feel it’s important somehow to show how they can also get their own widget if they like it.

So the current solution is to put a small, 9–10px font next to the chat widget button when it’s opened, saying “Get this widget” (with NO branding 😡). It’s not obvious when it’s not clicked on, and is not in the way of the channels when users look at them. We’ll probably try other iterations, but this is probably the simplest way to show it.

We might also put in the option for the site owner to turn it off, but in the spirit of helping other site owners who may need it to find it, we do hope most of them will keep it on.

Therefore the priority for Chat by KeyReply is to scale up to more site owners, so more of our SMB friends can start communicating with their customers directly! If you know someone who could really use this, please, pass it on: keyreply.com/chat.

More about us (& why we think we can do this)

This product isn’t the first or only product that we’ve made together. Since the summer of 2014, we’ve been making products like GraphPaper (a visual collaboration tool), SlackDigest (a Slack conversation summary tool), and our core product now, KeyReply (a mobile keyboard for faster communications).

The story behind KeyReply started while talking to lots of people about their workflows. Did you know that there are 1.5 billion people who are considered “mobile workers” today? And there just aren’t enough tools supporting them. Also, for lots of teams, more than 70% of their responses can be covered by about 10–12 responses — So we fused together a few of these key insights and created KeyReply, a team-synced keyboard with stored responses on them to help people tap out customer replies faster.

In case you were wondering what it looks like

KeyReply is now helping small business teams and available on iPhone, iPad and on Mac. Here’s where we found out the need for, as the buzzword goes, “multichannel” or “omnichannel” communications. This means being where the customer is, and engaging with them on the channels they want you to be.

We know what our SMB site owners need (which is not another backend dashboard to manage), but a direct line to their customers which they already manage. It’s simple and site owners appreciate it. We can also see many users from many countries like China, Indonesia, Brazil and India really adopting part of their established workflow of chatting with their customers.

By spending our time in the trenches with our users, we get to know them, and their needs. That’s the basis of value, and that’s why we’re staking our time and energy on helping them as much as we can.

Try our chat widget at keyreply.com/chat — You know how to reach us with questions and feedback! 😄