How to add WhatsApp to your website? Guide for WhatsApp API users

March 29th, 2023 — by Zivko A.

8 min read

Illustration of woman building a page and adding WhatsApp to your website.

Share this article

Have you been searching for a way to boost customer engagement while saving money on WhatsApp conversation costs? Adding WhatsApp to a website as a live chat feature is the solution! And all you need is a 360dialog WhatsApp API account and this guide.

Having WhatsApp on your website can lower the cost of generating leads

With the WhatsApp chat option, WhatsApp Business API users get to use an opt-in method that motivates users to initiate a conversation. User-initiated conversations cost less and fall under Free Tier Conversations. The WhatsApp chat option drives more user-initiated conversations, which automatically reduces the cost per conversation after the free 1,000 conversations threshold.

Can the WhatsApp chat option increase the success rate of ads?

When users follow an ad to a landing page and like what you see, they want to be able to easily get in touch with a business. Having a WhatsApp chat button makes it easier for potential customers to engage with your business. It also builds trust since users are able to get real-time responses. Having a live chat service increases a company’s conversion rate by 3.87% (Popupsmart, 2023).

What about businesses that don’t have live chat?

Efficient as it is, not all businesses offer the live chat option, and there are alternative solutions for adding WhatsApp to your website. By using click-to-WhatsApp links and QR codes, businesses can help customers initiate a conversation from a variety of marketing channels. The link or code can lead customers to send messages to WhatsApp or it can lead them to a landing page, Contact Us page, etc.

Each WhatsApp interaction has the potential to become a conversion. That is why it’s important to store each number that initiates a conversation. WhatsApp API users can then create contact databases and send promotional bulk messages to engage customers. 

Using attributions to manage leads – why and how?

Understanding where leads are coming from can help a business personalize its approach, enhancing the chances of conversion. That is why in addition to integrating WhatsApp on a website, WhatsApp API users should explore third-party tools for tracking and managing contact lists. 

360dialog has numerous partners that offer customizable tools that users can easily integrate with WhatsApp:

  • Chatbots
  • CRMs
  • Automated Workflows via Zapier
  • Rule engine features

Explore our integration documentation to learn more about the different options available to 360dialog’s API users.

Why is having a WhatsApp Business API account essential?

If you are not already a WhatsApp API user, official WhatsApp API Business Solution Providers (BSPs) such as 360dialog can help you unlock the full potential of WhatsApp chat. The WhatsApp Business API integrates seamlessly with our chat widget and other business solutions such as Team inboxes, automation solutions, and CRMs. You can manage thousands of daily WhatsApp messages coming from your website through:

  • High Service level with no delays
  • Multiple users and multiple devices access
  • Automated responses and workflows (i.e. chat assignment and chat tagging)
  • Integration with your CRM or Helpdesk
  • 24/7 customer support with the addition of the WhatsApp chatbot feature.

The WhatsApp chat widget makes it easier for your business to respond to large volumes of customer queries, leading to a better customer experience.

The most efficient ways to add WhatsApp to your website

Illustration of man on bench looking at WhatsApp chat QR code - one of the ways to integrate WhatsApp on your website.

There are different approaches that WhatsApp API users can take to drive customers to engage with them:

The very first option businesses can offer to customers is a simple link that they can click on to start a WhatsApp conversation. Like any contact link, it can be easily integrated into ads, emails, landing pages, articles, and other online promotional materials.

Use https://wa.me/<number> where the <number> is your business phone number in international format. Omit any zeroes, brackets, or dashes when adding the phone number in international format. Example:

CORRECTWRONG
https://wa.me/4930577140875https://wa.me/+49(305)7714-0875

QR code

To create a QR Code for a number, go to Facebook Business Manager > WhatsApp Manager. You must have access to the WhatsApp API-enabled number (i.e. the number is visible in your WhatsApp Manager and is Connected). 

How to create the QR code

  1. In WhatsApp Manager, navigate to Phone numbers.
  2. Navigate to the phone number that you’d like to use for the code.
  3. Click Settings.
  4. Click Message links.
  5. Click Create message link.
  6. In the Message field, input the text for a pre-filled message that will populate for customers to edit and send to you after they scan the QR code. If you don’t add text, your QR code will pop up as an open-ended conversation when scanned.
  7. Click Save.
  8. You have the option to copy, download, edit, or delete the QR code link.

Our recommendation: create both a click-to-WhatsApp link and a QR code. Why? Because you can cover more ground in terms of communication. You can include links in any digital format while QR codes can be imprinted on product packages, promotional flyers, and other advertising materials. 

Put it together and your business covers all its bases in terms of interacting with customers during any stage of the customer journey.

WhatsApp chat widget

WhatsApp links and QR codes are simple and convenient, but far more practical for third-party communication channels and marketing campaigns. When it comes to your website, you want to simplify the user experience as much as possible. Having a visible and appealing chat button is what will drive the highest engagement rate.

Creating a WhatsApp chat widget is the most efficient solution by far, and you can do it on your own in 5 simple steps:

#1: Create a WhatsApp Business API account

whatsapp to your website

#2: Use 360dialog’s chat button generator and customize the chat widget

First step of creating a WhatsApp chat widget on 360dialog.
Second step of creating a WhatsApp chat widget on 360dialog.

#3: Generate the widget code (it will be forwarded to your email)

Third step of creating a WhatsApp chat widget on 360dialog.

#4: Add the widget code to your website

360dialog’s chat widget helps your business display a WhatsApp button on all of your website’s pages. All you have to do is follow the steps below:

  • HTML website – copy/paste the code before the </body> tag on every page of your website.
  • WordPress website – Go to Appearance → Theme file editor. Look for footer.php in the theme files. Paste your code in before the closing </body> tag. As an alternative, you can also use the plugin “Head, Footer, and Post Injections” to insert the code.
  • Shopify website – Online store → Themes → Current theme. Click on “Actions” and then “Edit Code”. Look for the ‘theme.liquid’ code file and paste your code right before the closing </body> tag.

#5: Test the WhatsApp chat button to ensure that everything is working correctly.

Test your WhatsApp chat regularly to ensure that it is functioning properly and that visitors are able to use it as you intended. Use analytics tools to track chat usage and identify areas for improvement. Modify canned responses in accordance with feedback from customers.

2 bonus tips to maximize the impact of your WhatsApp chat button

How you present WhatsApp on your website will impact how users interact with it. That is why you should take the time to properly customize and optimize your widget. Here are some of the practices necessary for guaranteeing maximum results:

Responsiveness

Fast responses show visitors that you value their time and are committed to providing excellent customer service. Additionally, quick response times can help you build a positive reputation and earn customer loyalty.

We advise using 360dialog’s solutions that include saved and automated responses that help you achieve this with ease.

Smart Automation

Automation tools can help you manage WhatsApp conversations efficiently, but they can’t answer all customer queries. Automated responses can feel impersonal and may not adequately address the needs of visitors.

We advise using automation tools to support your chat efforts but be prepared to respond personally to complex queries or sensitive issues such as refund requests, booking errors, complaints, etc.

Use these tips to effectively integrate WhatsApp on your website and enhance communication with site visitors. Consult 360dialog about any additional features or integrations that you might require.

How 360dialog can help you add WhatsApp to your website

In addition to the chat widget generator and detailed WhatsApp API documentation, 360dialog offers global support for its clients. Our team can provide businesses with the knowledge and tools to integrate WhatsApp on websites quickly and with ease. Use the full potential of WhatsApp Business API with the solutions, integrations, and support of our team!

Your chosen WhatsApp Business API solution provider

Praised by developers, small businesses, and
enterprises across the globe!

whatsapp to your website

Integration with Team Inbox, CRM, Helpdesk, and more

whatsapp to your website

Highly scalable SaaS pricing plans

whatsapp to your website

Fast and integrated onboarding