May 5, 2022 10 min read

How to add a WhatsApp chat to your website

Written by
WhatsApp as a chat on your website

WhatsApp is the most popular messaging app worldwide. It has over 2 billion active users. And that number is growing steadily.

The app is used to communicate with friends, family, and businesses. For businesses, it’s a gateway for personal, accessible, and informal conversations with their customers. That’s why many of them are now putting a WhatsApp chat button on their websites.

In this article, we’ll explain how you can do that too.

Want to get started right away? Sign up for a 14-day free trial and integrate WhatsApp on your website in no time.

Why you should add a WhatsApp webchat to your website

There are two main reasons you should consider embedding WhatsApp on your website.

Keep in touch after the visitor leaves

When a website visitor reaches out via live chat, you won’t be able to contact them after they leave. And with patience running thinner every day, customers tend to leave faster than ever. Unless you have the time to instantly reply all day long.

But when a visitor gets in touch via WhatsApp, they get the same experience — without having to stay on your website to await an answer. This gives them a better experience, and it gives you more time to reply.

Add a personal touch

Where live chat used to feel informal and personal, it has grown into a communication channel that many businesses treat the same way as email. This makes it less attractive and special for website visitors.

WhatsApp, on the other hand, is an app we all use to talk to our friends and family every single day. By inserting your business into that environment, you automatically build a more personal relationship with your customer. Especially if you can manage to reply fast and use the right informal tone of voice.

How to embed a WhatsApp chat on your website

There are three ways to let your customers contact you via WhatsApp as a chat on your website.

  • Click and chat
  • QR code
  • Trengo multichannel widget

1. Click to chat

The click to chat feature lets customers click an URL in order to directly start a chat with another person or business via WhatsApp. You don’t need to save any phone numbers in your phone to do this. With the link, you simply open a chat and start typing. This works for the smartphone app as well as for WhatsApp Web.

With this feature, you could hyperlink a sentence such as ‘WhatsApp us!’ to WhatsApp. You could also type out your phone number and hyperlink it.

A click and chat link is obviously fine to offer on your contact page, but it gets a little difficult when you want to offer WhatsApp throughout your entire online customer experience. Having to share this link on every single page will make your website look messy.

How to add a WhatsApp link to your website

To make a click to chat link, you need to edit this link: https://wa.me/[WhatsAppNumber]. Replace ‘WhatsAppNumber’ with the phone number you would like to use.

2. QR code

Having to add a phone number to your contacts to start a WhatsApp conversation can feel time-consuming for your customers. Especially when you want to offer this channel as a business, this isn’t a feasible way. Think about the steps a customer has to take:

  1. First, they have to look up your phone number
  2. Next, they have to save you as a contact. This includes the name of your company and phone number. If they need to do this for all the companies they are in contact with, their contact list may explode one day.
  3. Finally, the customer has to navigate to WhatsApp, look you up, and only then can they start a chat.

This doesn’t take hours. But it also doesn’t make for a flawless customer experience. And that’s the goal.

That’s why some companies have started to create QR codes to start a conversation. All they have to do is create the code and place it on their website for customers to easily start a chat.

To create such a QR code, one must first create a click to chat link. This link can then be turned into a QR code via websites such as QR Code Generator or QR Code Monkey.

Want to know how using a QR code feels for a customer? Try out starting a conversation with our own Trengo WhatsApp account via this QR code:

Using a QR code to add WhatsApp to your website.

3. Trengo multichannel widget

So far, we’ve discussed two options. But neither of them is a true WhatsApp integration with your website.

The best way to add a WhatsApp chat icon on your website is by using a multichannel chat widget, such as Trengo. With this, your customers can contact you via a WhatsApp button on your website.

A WhatsApp chat on your website with Trengo's multichannel widget.
An example of a Trengo website widget with WhatsApp Business as one of the available channels.

Another important advantage is that Trengo offers the possibility to use WhatsApp with multiple users, which isn’t possible with the official app. Your team can easily collaborate on conversations in one WhatsApp account. In the inbox, they can @tag each other and assign messages to specific colleagues or teams.

WhatsApp chat button on your website: HTML code or Google Tag Manager

Once you have started your free trial at Trengo, you can add a WhatsApp chat widget to your website in two different ways:

  1. By pasting the widget script into your website’s HTML source code.
  2. By using Google Tag Manager.

For a technical explanation of both methods, you can visit this article.

How to integrate WhatsApp into a WordPress website

We often get asked how businesses can add a WhatsApp chat to their WordPress website. With Trengo, the process to get this done is straightforward. Simply add the Javascript code to the header or footer of your WordPress website with this plugin.

You can also ask for some help from your developer and add the source code to your WordPress template.

Use cases of a WhatsApp widget on your website

Marketing and sales

Online shopping is bigger than ever. But it still doesn’t come close to the experience of shopping in the real world. Seeing and feeling the products. Trying on a new pair of shoes. Having a conversation with the store assistant.

By adding a WhatsApp chat to your website, you add a conversational element to the online experience. It enables your team to collect leads, advise products, and even make sales — all in a personal and informal way.

Once the customer leaves the website, the conversation still continues on WhatsApp. This is a big benefit of using WhatsApp over regular live chat.

Learn how automotive company Muntstad collects leads via WhatsApp on their website.

Customer service

Modern consumers shun phone calls or emails. They take too much effort and time. When they have a question, they prefer asking it via a messaging app or simply looking up the answer themselves in a help center.

That’s why WhatsApp is a great solution for your customer service team. Because of WhatsApp’s informal etiquette, you can have a personal and authentic conversation that’s efficient for both the customer and your team.

How to automate the WhatsApp chat on your website

Customers will wait two days for a reply to an email. They’ll sit in a waiting line on the phone. But when they’re using WhatsApp, they expect almost instant replies. For customer service teams, these expectations are both a gift and a curse. If you deliver, customer satisfaction sky-rockets. But if you fail, you frustrate your customers.

With these automations in place, you enable your team to keep up with the expected speed.

Quick replies

Ever get any repetitive questions? About your business hours, stock, return policy, or delivery methods? Of course you do. And if you don’t automate answering these questions, you’ll waste valuable time.

An example of using quick replies to answer WhatsApp chats via your website.
An example of a quick reply for WhatsApp.

By creating templated messages, a.k.a. quick replies, you can automate answering these FAQs. Here are 15 templates you can use right away.

Auto-replies

By setting an auto-reply, your customers always get an instant response. This buys you some time when you’re not able to respond right away. Which especially comes in handy outside of business hours.

How to add a WhatsApp chat to your website
An auto-reply outside of business hours.

Here are 8 auto reply samples for some inspiration.

Rules

If you’re dealing with a lot of inbound messages, it can be tough to stay organized. By creating rules, you can automate this organization process. In Trengo, you can also do this for your WhatsApp conversations.

An example of a rule that automates assigning a WhatsApp conversation.
With this rule, messages that contain the word ‘orders’ get assigned to Anna Davis.

You can automatically add labels to conversations, assign conversations to a team member and inform customers during peak hours.

Chatbots

If you’re ready to take it to the next level, you can also use Trengo to build a chatbot for the WhatsApp chat on your site. A bot will answer frequently asked questions and even collect leads — also outside of opening hours.

A WhatsApp chatbot conversation on a website.
A bot informs a customer about the shipping costs.

Building a bot all by yourself may sound intimidating. But with Trengo, you can use a no-code chatbot builder. It’s straightforward and fast. You can even test and play around with it before you go live.

Add a WhatsApp chat to your website today

Ready to add a WhatsApp chat to your site? With Trengo, you can start a 14-day free trial to test how this works. This way, you can take the time to figure out how your visitors react to it. Good luck!

Try Trengo for free.

Further reading

Written by

More great articles