Simple Customer Support Chat System using jQuery & WhatsApp API

In this post, we are going to see how to integrate whatsapp chat system in your website by using jQuery. If you want to communicate with your website visitors through whatsapp then this post will help you to achieve your task.

With just few lines of code, you can easily create an whatsapp customer support channel in your website. You can show multiple accounts, when clicked it will take the visitor to that particular account on whatsapp application with predefined text and link that you can customize it as well.

Previously I wrote an article on How to Share a Content on WhatsApp using jQuery and you cannot send message to particular account.

1st we need to create an anchor tag with two attributes

data-message – A custom message by default
data-number – A genuine whatsapp account number with country code

Please see the below code for anchor tag

<a class="w3-button" data-number="919944667345" data-message="Hi! I would like to know more about amazon EC2. Will you help me?" >

Contents

Javascript code to detect mobile devices

Below code is used to identify mobile devices in javascript which is used to change the whatsapp API url

var isMobile = {

Android: function() {

return navigator.userAgent.match(/Android/i);

},

BlackBerry: function() {

return navigator.userAgent.match(/BlackBerry/i);

},

iOS: function() {

return navigator.userAgent.match(/iPhone|iPad|iPod/i);

},

Opera: function() {

return navigator.userAgent.match(/Opera Mini/i);

},

Windows: function() {

return navigator.userAgent.match(/IEMobile/i);

},

any: function() {

return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());

}

};

jQuery code to enable Instant WhatsApp Chat

Below code is used to load whatsapp application from your mobile or from desktop with custom message after clicking the link

Desktop API url : https://web.whatsapp.com/send

Mobile API url : whatsapp://send

Custom Parameters : phone – whatsapp account number with country code, text – custom message to be sent.

After clicking the button, below code will take the data attributes from the anchor tag and creates an API url and pass it to whatsapp application.

$(".w3-button").on("click", function()

{

var text = $(this).attr("data-message");

var phone = $(this).attr("data-number");

var message = encodeURIComponent(text);
if( isMobile.any() ) {

//mobile device

var whatsapp_API_url = "whatsapp://send";

$(this).attr( 'href', whatsapp_API_url+'?phone=' + phone + '&text=' + message );

} else {

//desktop

var whatsapp_API_url = "https://web.whatsapp.com/send";

$(this).attr( 'href', whatsapp_API_url+'?phone=' + phone + '&text=' + message );

}

});

Thats it Guys!

Everyone should integrate this small whatsapp chat widget in your website and its hardly wont take more time to implement. By having this in your website, I’m sure that you will get more customers.

If you are selling anything in online, then you must need this whatsapp customer support chat widget.

Please check our live demo and download the script by sharing this whatsapp chat widget with your friends

View Live Demo