Adding a WhatsApp Button to Your Website

This article was originally published in Turkish on 2024-05-28 and migrated from our previous website. This English version translates the archived article. Promotions, prices, product features, roles and service availability are historical information, not current offers or guarantees.

Topics

If you want to add WhatsApp to your website (create a wa.me link) and communicate directly with visitors, it can be added with HTML. Options vary with your site’s structure. Let us examine them; this article covers creating a WhatsApp contact link.

What Is WhatsApp?

WhatsApp is an instant messaging and calling application founded in 2009 by Jan Koum and Brian Acton. It provides messaging, voice and video calls, file sharing and group chat over the internet. Users register with phone numbers and communicate free of charge. Acquired by Facebook (Meta) in 2014, it is used by billions worldwide. End-to-end encryption provides secure communication for individuals and businesses.

As of 2024, WhatsApp is among Türkiye’s leading messaging applications with approximately 60 million users. It is used by 86.2% of internet users. Its user-friendly interface, messaging, calls and media sharing make it indispensable for personal and professional communication.

Its central role in everyday communication in Türkiye shows how messaging platforms maintain connections throughout life.

Adding WhatsApp with HTML to PHP, ASP or ASP.NET Sites

You can easily add a button with HTML. Replace 905XXXXXXXXX in the example with your number.

<a href="https://wa.me/905XXXXXXXXX" target="_blank">WhatsApp ile bağlan</a>

Adding WhatsApp with JavaScript to PHP, ASP or ASP.NET Sites

Insert the following code between the website’s head tags. Customize it through these parameters:

• brandName: Your website or brand name.
• brandSubTitle: A subtitle for the website or brand.
• brandImg: Change the icon or logo URL.
• welcomeText: The first message shown to the customer or visitor.
• messageText: The message the visitor sends when connecting.
• backgroundColor: The background color.
• ctaText: The text shown with the chat icon.
• phoneNumber: Your WhatsApp number.

<script>
var url = 'https://wati-integration-service.clare.ai/ShopifyWidget/shopifyWidget.js?52710';
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var options = {
"enabled":true,
"chatButtonSetting":{
"backgroundColor":"#4dc247",
"ctaText":"",
"borderRadius":"25",
"marginLeft":"0",
"marginBottom":"50",
"marginRight":"50",
"position":"right"
},
"brandSetting":{
"brandName":"WEb Site Adınız",
"brandSubTitle":"Alt Başlık Durum azısı",
"brandImg":"https://cdn.clare.ai/wati/images/WATI_logo_square_2.png",
"welcomeText":"ZİYARETÇİYE GİDECEK HOŞGELDİN  MESAJI",
"messageText":"ZİYARETÇİNİN GÖNDERECEĞİ İLK MESAJ {{page_link}}",
"backgroundColor":"#0a5f54",
"ctaText":"GÖRÜŞMEYİ BAŞLAT",
"borderRadius":"25",
"autoShow":false,
"phoneNumber":"+90 İLE BAŞLAYAN TELEFON NUMARANIZ"
}
};
s.onload = function() {
CreateWhatsappChatWidget(options);
};
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
</script>

Adding a WhatsApp Chat Button to WordPress and WooCommerce

You can use the HTML and JavaScript methods above, or plugins for a richer chat window. We discuss Joinchat, a useful free plugin. Log in to WordPress, open Plugins → Add New, search for joinchat, then install and activate the plugin shown.

The settings are straightforward, but let us explain them.

Telephone: Enter the number used for WhatsApp.
Message: Enter the automatic message the visitor sends. TITLE and URL insert the visited page’s title and address, helping identify the originating site if you use one number on several sites.
Image: Select the displayed image.
Tooltip: Text shown with the chat image.
Position on Screen: Left places the button at the bottom left; Right at the bottom right.
Button Delay: Choose how long after loading the button appears.

Mobile Only: Show the button only on mobile devices.
On Desktop: Choose redirection behavior.
Display QR Code to scan with phone: Requires scanning a QR code to connect.
Open directly WhatsApp Web: Opens WhatsApp directly.
Call to Action: Create a welcome message for customers entering the chat.
Button Text: Set text displayed on the chat button.