5 min read

WhatsApp Website Integration- Learn How To Add WhatsApp On the Website

Learn how to add WhatsApp to your website and improve customer engagement easily.
March 1, 2023
Musa
Product Marketing Manager, Donut.cx

Since you are here with your decision to integrate WhatsApp on your Website, it's obvious that you're looking for ways to do so!

Adding WhatsApp to their Website allows businesses to utilize WhatsApp's easy chat functionality, making it easy for customers to contact them and receive quick responses to their questions and concerns. 

This blog will show you how to make WhatsApp an integral part of your website. From highlighting the benefits of having a WhatsApp for websites to different ways to add it, we've got all the tricks up our sleeves. So, sit back, relax, and take the first step towards making your customer service as easy as a pie."

Reasons to Add WhatsApp On the Websites

WhatsApp is a widely used messaging platform that has become essential for businesses to connect with customers and provide excellent customer service. Some of the key reasons why businesses should look to WhatsApp integration on websites are

1. Faster communication

WhatsApp allows for real-time communication, which means customers can get quick answers to their questions or complaints. The average Android WhatsApp user spends around 19 hours per month on the app, placing it second only to Facebook worldwide.

Such a significant presence of people on WhatsApp insists businesses to start using WhatsApp for websites in order to improve customer satisfaction and help build trust in their business.

2. Cost-effective

Using WhatsApp for customer support can be more cost-effective than other methods, such as phone or email. It doesn't require additional hardware or software, and you can handle multiple chats simultaneously with a team.

3. Easy to Implement

WhatsApp website integration is easy to implement and doesn't require a lot of technical expertise. You can use WhatsApp Business API or third-party tools to add WhatsApp to your website.

4. Increased Reach

WhatsApp is used by over 2 billion people in 180 countries and has been downloaded nearly 600 million times, exhibiting its extensive reach and making it a great tool to reach customers where they are.

5. Direct Marketing

Using WhatsApp for websites enhances direct marketing by providing businesses with a direct line of communication with their customers. Having a WhatsApp button on a website allows customers to reach out to a business easily and quickly, increasing the chances of them making a purchase. 

WhatsApp for websites also enables businesses to have personalized communication with their customers directly, which helps to build trust and loyalty. Additionally, WhatsApp allows businesses to send targeted messages and promotions to customers, which can help increase sales and revenue.

6. Multilingual support

WhatsApp is available in over 40 languages on the iPhone and up to 60 languages on Android.

WhatsApp for websites allows businesses to communicate with customers in different languages by setting up other WhatsApp accounts for different languages and the appropriate WhatsApp integration on website. 

WhatsApp can be used for customer support in multiple languages, making it a useful tool for businesses that serve a diverse customer base.

7. Branding

Using WhatsApp for websites can give your brand a sense of accessibility, showing that your company is always available to customers and helping them to feel more valued.

By providing an easy and convenient way for customers to reach out, WhatsApp helps businesses to improve their brand image and increase customer loyalty, which ultimately helps to enhance overall branding efforts.

Examples of D2C (Direct-to-Consumer) businesses that use WhatsApp for Websites include-

Direct-to-Consumer (D2C) businesses have become increasingly popular in recent years, with many companies utilizing digital channels to sell their products and services directly to consumers. 

One such channel is utilizing WhatsApp for Websites, which enables businesses to integrate the messaging app into their websites, allowing customers to communicate with them in real-time. 

In this section, we will provide examples of D2C businesses that are successfully using WhatsApp for Websites to enhance their customer engagement and drive sales.

1. E-commerce businesses: Online retailers and marketplaces can use WhatsApp for Websites to provide customer support and handle customer inquiries, such as tracking an order or returning a product.

Example- Barò Cosmetics builds a sales and customer care channel over WhatsApp to provide more interactive, personalized customer experiences, driving higher message open rates and order volumes, resulting in increased revenue.

2. Service-based businesses: Businesses such as plumbers, electricians, and home cleaners can use WhatsApp for Websites to schedule appointments and provide service updates.

Example- When 21K School developed two WhatsApp channels to increase enrollment and provide customer support, the online school saw a surge in new students while improving service speed and quality.

3. Food delivery businesses: Restaurants and food delivery businesses can use WhatsApp for Websites to receive orders and answer customer questions.

4. Healthcare providers: Healthcare providers can use WhatsApp for Websites to schedule appointments, provide telemedicine services, and answer patient questions.

Example- ATGen is a biotechnology company in Uruguay that expanded its services to include COVID-19 testing to the general public. With the WhatsApp Business Platform, they can provide direct information about appointments and tests.

5. Travel agencies: Travel agencies can use WhatsApp for Websites to provide customer support, answer travel-related questions, and help customers plan their trips.

The above-mentioned examples are just a few examples of how D2C businesses can use WhatsApp for Websites to improve customer engagement and increase conversion rates. With the help of WhatsApp for websites, businesses can improve customer service, increase brand awareness, and build stronger relationships with their audience.

Ways to Add WhatsApp on the Website:

There are four primary methods for WhatsApp website integration

  • Via WhatsApp Click-to-Chat Link
  • Via WhatsApp Button
  • Via Pop-up Form
  • Via Donut.cx Multichannel Widget

How to Integrate WhatsApp into Website?

WhatsApp for Websites: How To Connect WhatsApp to Website via Click-to-Chat Link

About Click-to-Chat

Click-to-chat features enable you to start a chat with anyone without having their phone number saved in your phone's address book by using a URL hyperlink to the short text or your phone number.

Through the Link, one can easily click and open the chat directly with the requirement that the person has an active WhatsApp account that works for both smartphone devices and WhatsApp web.

Steps to do WhatsApp Website Integration via Click-to-Chat Link- 

  • Step 1: Create Your Own Link

For WhatsApp integration on the website, use & edit the link https://wa.me/ to add your phone number in front of the link in order to make it work for your click-to-chat formation. Make sure to include a full phone number in the international format, with no zeroes, brackets, or dashes.

  • Step 2: Create your own link with a custom message

If you want to dedicate WhatsApp services for a specific purpose, you can add a pre-filled (custom) message while creating your own link to further label and organize the chats.

For example-

(Use %20 for space)

Ta Daa!! This is what your Click-to-Chat button will look like

About Chat button

  • Use the latest version of the button. You can download the button designs here.
  • Make sure the button is visible and easy to read.
  • You can use the WhatsApp button in many places, such as Landing Pages, Contact Pages, Help Pages, mobile apps, etc. 

WhatsApp for Websites: How To Add WhatsApp Button On the Website                                               

There are two types of Buttons to execute whatsapp website integration-

  • Local WhatsApp Button
  • Floating WhatsApp Button

How to Add WhatsApp Button on the Website: Local WhatsApp Button

The local WhatsApp Button is the WhatsApp logo image that is added to your homepage, landing page, contact page, or help section for operational efficiency. 

To embed WhatsApp on website, follow the same steps as the click-to-chat process described above.

  • Step 1: Create your own link
  • Step 2: Create & customize your WhatsApp Button
  • Step 3: Update the settings by adding the brand name, phone number & and onboarding message.  
  • Step 4: Add a WhatsApp logo image to all the pages you want and link it to the generated link. 

How to Add WhatsApp Button on a Website: Floating WhatsApp Button

On your website, visitors can open a WhatsApp chat or a small window with a call-to-action message with just one click using a "floating" WhatsApp button.

Here's an example of how to embed WhatsApp on website:

You can use the WhatsApp Web API to add a floating WhatsApp button on your website. Here are the steps you can take to add it:

  • Step 1: Go to the WhatsApp Web API page (https://developers.facebook.com/docs/whatsapp/web/web-integration/) and click on "Get started"
  • Step 2: Create a new WhatsApp account if you don't have one, and log in to the WhatsApp Web API
  • Step 3: Create a new application and get your API key
  • Step 4: Add the API key to your website's HTML code using a script tag
  • Step 5: Add the WhatsApp button code to your website's HTML code using a div tag
  • Step 6: Customize the button's design and position using CSS

Keep in mind that there are also third-party plugins available for website platforms, such as WordPress, Shopify, Wix, etc., that you can use to add a WhatsApp button. These will be a good choice if you are uncomfortable editing website code.

WhatsApp for Websites: How To Embed WhatsApp on Website Via Pop-up Form

WhatsApp integration on website via a pop-up can be done by using a third-party plugin or service. Here's an example of how you might do this:

  • Step 1: Search for a plugin or service that can create a pop-up WhatsApp button for your website. 
  • Step 2: Once you've found a plugin or service that you like, download and install it on your website.
  • Step 3: Configure the plugin or service to match your desired settings. This might include setting the phone number or account to which the user will be connected, customizing the text on the button, and choosing the timing or trigger for the pop-up form to appear.
  • Step 4: Once the plugin or service is configured, the pop-up WhatsApp button will appear on your website when a user clicks a designated button. Based on the trigger you set, they can start a conversation with the predefined phone number or account specified in the plugin.
  • Step 5: It is also important to make sure that you have someone dedicated to monitoring and responding to messages received via WhatsApp in a timely manner to make the most of it.

Note: While this method can provide a simple way to WhatsApp website integration, you may need to pay for a plugin or service, which is the cost of using a third party. Also, you should test the plugin to ensure it works with your website and is compatible with your platform before you use it.

How To Connect WhatsApp To Website Via Donut.cx Multichannel Chat Widget

With the Donut.cx Multichannel Chat Widget feature, you can easily track and provide contextual support to your customers' conversations from various channels in one place. You can also easily route conversations with Donut.cx to the right agents while tracking key metrics and measuring performance across all customer activities.

With a Donut Account, you can easily connect to WhatsApp on the Website and gain easy access to the WhatsApp API account.

There are a few things you will require before creating a Donut account,

You must have the documents listed below:

  • An active phone number that will be used when first registering for a Donut account
  • E-Commerce Account (Shopee/Shopify) or Social Media account (Facebook/Instagram)
  • Laptop Device to access Donut Desktop

You can connect your Donut account with WhatsApp by-

  • Open “Integration” on the Setting menu and click WhatsApp
  • Connect with the WhatsApp Business API. 
  • Complete your WhatsApp Business Profile and click “Save”

After you've created a Donut Account, you can add a WhatsApp chat widget to your website in two ways:

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

Bonus Ways:

  • WhatsApp Website Integration: Add WhatsApp Login to your signup page

To add WhatsApp Login to your signup page, you must use the WhatsApp Business API. The WhatsApp Business API allows businesses to integrate WhatsApp functionality into their own systems and applications, including website signup pages.

Here is a general overview of how to add WhatsApp Login to your signup page:

  1. Obtain a WhatsApp Business API account: 
  2. Create a WhatsApp Login button 
  3. Add the button to your signup page
  4. Handle the callback
  5. Save the user's information

Please note that WhatsApp Business API is a paid service, also, you need to make sure you comply with WhatsApp's terms of service and privacy policy.

  • WhatsApp Website Integration Via WhatsApp QR code

To embed WhatsApp on website via a QR code, you need to generate a QR code that links to your WhatsApp account or chat. You can use a free QR code generator tool to create the code.

Once you have generated the QR code, you can add it to your website by inserting the code into the HTML of the webpage or by using a plugin or widget that supports QR code integration.

You can create a Click-to-Chat Link and turn it into a QR code via websites such as.

Conclusion

WhatsApp integration on website can be a valuable tool for businesses to improve customer engagement, increase conversions, and provide better customer service. With the help of WhatsApp for websites, businesses can improve customer service, increase brand awareness, and build stronger relationships with their audience.

There are several ways to add WhatsApp to a website, including a WhatsApp chat widget, a WhatsApp click-to-chat link, or a WhatsApp API. Each method has its own advantages and disadvantages, and businesses should consider their specific needs and resources when choosing the best method for their website.

WhatsApp integration on website can be useful for businesses looking to improve their customer service and communication efforts.

Donut.cx is the perfect solution for businesses looking to streamline their customer support efforts and increase their team's productivity. To begin,

Book a Demo

Table of content

Direct conversations for durable customer relationships

Enhance customer loyalty with Donut.cx