How to integrate your website with WhatsApp for customer communication in chat

We’ve put together an easy guide to help you integrate WhatsApp onto your business’ website, boosting sales and engagement by allowing your customers to start chatting with a single click. 

WhatsApp is the biggest messaging app in the world, eclipsing even Facebook messenger. In most markets around the world, it’s pretty much the only thing going, with other messaging apps falling far behind. 

More and more, businesses are leveraging this popularity as a way of opening up a direct line to their customers. WhatsApp has the potential to open up a direct channel of communication between a business and its customers, increasing sales and fostering a sense of brand loyalty. 

Why you should add a WhatsApp “Click-to-chat” button to your website

When people ask about integrating WhatsApp onto a website, they’re generally asking about a WhatsApp button, known in official channels as “click-to-chat.” This is a small button located somewhere out of the way, generally programmed with some fancy code so that it follows the user as they scroll down the page. The button allows potential customers to open up a chat with a single click. 

From a user’s perspective, the WhatsApp Click-to-chat button presents a pretty big increase in convenience compared to doing it the old-fashioned way: scanning the page for the phone number, adding it to your contacts, and then navigating to the WhatsApp app to open up a chat. It also boasts several additional benefits, such as autocompleted text templates. These templates allow you to automatically insert pertinent information into their text box based on where your customer clicked, saving them the hassle of needing to remember product names or other details.

Another benefit of the WhatsApp click-to-chat button is that it allows you to keep contact with the user even after they leave your website and exit the chat. You now have a constantly open line of communication with the user, should you choose to take advantage of it. 

How to integrate a WhatsApp button onto your business’ website

WhatsApp's click-to-chat feature allows any website to integrate a WhatsApp button right onto the page. Typically, this icon follows the user as they stroll down the page, functioning as a ‘scrolling CTA’ for the user as they browse your website. Users don’t need to save any phone numbers or remember any usernames, they just click and start chatting! 

charles Bubbles can be added to your website in just five easy steps—read on for a quick outline of how to do it! 

Step 1: writing a teaser message

After selecting Landing Page Bubble in the charles backend, you’ll be prompted to create an optional teaser message in the first tab. This message is displayed inside a speech bubble for a number of seconds you choose and serves to draw the user’s attention to the bubble. If you don’t want it, simply disable it using the toggle underneath the tabs. 

Tip: the preview button can be great for checking how your teaser message will look to the user. This is especially useful for testing the length of time the teaser is displayed for—the longer the message, the longer you’ll want to give the user to read it. 

Step 2: customizing the button’s appearance

One of the benefits of the charles Landing Page Bubble are the robust aesthetic customizations it supports. You can adjust the button’s design by changing its colors and size, adding logos, moving where it appears on the page, and more. No need for the preview button here—it’s all updated in real-time. 

Step 3: intro message

This is the message that appears after the user clicks the button. It’s your best chance to seal the deal and make contact with the user, so make sure you write something friendly, engaging, and to the point! Here you can also adjust some parameters of the button that appears. 

Step 4: more button configuration

Here you can configure your button down to the finest detail. Want it on mobile only? This is where you can set that. Want it all over your site, or only on specific pages? Set that here. 

Step 5: setting priorities

This is for when you’ve configured multiple buttons. Depending on the parameters you set in step 4, it’s likely that some pages qualify for more than one button. In this case, you can set relative priorities to make sure the most important button is the one that’s displayed. 

For more detailed instructions, head to this guide.

Other ways to integrate WhatsApp onto your business website

There are actually several variations on the WhatsApp button suited to different situations. In addition to using charles to seamlessly add a WhatsApp button to your website, you can also do it manually without too much trouble. These options obviously require a little bit more work and technical knowledge. 

Click-to-chat / inline chat link

This is just about the simplest way to add a WhatsApp contact to your website. Click to chat allows users click a URL to directly start a chat in WhatsApp. Like the button, it doesn’t require the user to save any contacts or install any app (unless they don’t already have WhatsApp installed, obviously). User simply clicks the link and starts chatting—if they’re using a smartphone, the WhatsApp app will be opened, while on desktop they will be redirected to WhatsApp Web. 

To add a WhatsApp link to your website, you simply need to add a simple HTML hyperlink to the following URL: 

https://wa.me/[PHONENUMBER]

So the final code would look something like this: 

<a href="https://wa.me/[PHONENUMBER]">Chat with us on WhatsApp!</a>

For the user, this would be displayed as a normal text hyperlink with whatever link text you choose. 

Obviously, this solution is simple a quick, but it comes with a few downsides. If you’re not a coder, wrangling with your site’s HTML directly can be tricky and accident-prone, so it’s important to back everything up and exercise caution. The HTML link above also doesn’t support much customization, though more advanced coders will be able to make more detailed adjustments if they so please. 

There is also the issue of user trust and familiarity—clicking a text hyperlink to start a WhatsApp conversation is not a process that users are extremely familiar with. The user may skim over the relatively plain-looking text link or otherwise not notice it—definitely not what you’re looking for! 

Finally, the plaintext WhatsApp link doesn’t support any of the intro messages, teasers, or animations offered by the charles WhatsApp Button. 

Adding a WhatsApp QR Code to your website

QR codes offer a nice middle ground between the robust, customizable WhatsApp button and the plaintext HTML link. Like the other two, they offer ease and simplicity by allowing the user to bypass adding the phone number as a contact and all the other steps associated with starting a chat that way. 

QR codes are much simpler—essentially, you just go through the HTML plaintext link steps above and then use a QR code generator online to create a QR code for that link. You can generate your WhatsApp QR code using our WhatsApp Link & QR Generator.

Tip: Some QR codes also support adding your logo or other information to the code for further customization. 

After generating the QR code, it’s just a couple steps to include that image on your website (or even on your marketing materials!). The user can scan the QR code and begin talking directly with your representative. 

Generally, users are somewhat more familiar with the idea of scanning a QR code to produce an effect in their phone, so the QR code might be superior to the plaintext HTML link in that area. 

Third-party software and plugins

The final way to add WhatsApp link to your website is to set it up using a third party solution. Obviously, we’re partial to the robust WhatsApp communication suite offered by charles (AKA, the website where you’re reading this article). charles’ WhatsApp integrations offer a powerful set of business communication tools that allow you to connect to customers in new and interesting ways—and stay in touch with them long-term. 

Other than that, there are several other third party options available, as well as Wordpress and Shopify plugins (integrations also supported by charles, incidentally.) 

The do’s and don’ts of adding a WhatsApp button or link to your website

DO have representatives available to answer users’ chats within a reasonable amount of time. If you’re a small outfit, users usually don’t expect an answer immediately (especially during off hours), but within business hours it’s good if your chat representatives can answer sooner rather than later. 

DO make sure the users have a reason for chatting in the first place. charles’ software supports autofilled text, contextual information about where the user is clicking into the cat from, and other data that can help your representative give the best service possible. 

DON’T hide the link—make it as obvious and eye-catching as possible. A great way is with the bespoke animations and attention-getting CTAs supported by the charles WhatsApp button. 

DON’T use your personal account—this just screams unprofessionalism and seems like amateur hour. Take the time to set up a WhatsApp Business Account and set an image of your logo as the profile picture. 

Easily add a WhatsApp Button to your website with charles

To see how you can integrate WhatsApp into your business processes, schedule a demo call with us. The charles sales team will help you design a strategy that fits your eCommerce needs and drive more leads into your sales funnel. Get in touch here.