[html] Mobile website "WhatsApp" button to send message to a specific number

A mobile website can be customized to allow users to share a pre-filled message in WhatsApp to a manually chosen contact. As given here it is done using Custom URL Scheme. An example:

<a href="whatsapp://send?text=Hello%20World!">Hello, world!</a>

To call a particular number we use:

<a href="tel:0123456789">Call</a>

Similarly, can we send a WhatsApp message to a specific number (or at least open the chat) without user choosing the phone number manually rather it will be one of the predefined parameters/attribute values?

On android, you can try

href="intent://send/[countrycode_without_plus][number]#Intent;scheme=smsto;package=com.whatsapp;action=android.intent.action.SENDTO;end

replace [countrycode_without_plus][number] with the number,

WhatsApp is now providing a much simpler API https://wa.me/ This isn't introducing any new features, just a simpler way to execute things. There's no need to check for user agent while implementing this API as it will also work with native apps as well as the web interface of whatsapp (web.whatsapp.com) on desktop.

This can be used in multiple use cases

• A Click to chat button : Use https://wa.me/whatsappphonenumber to open a chat dialog with the specified whatsapp user. Please note that the whatsappphonenumber should be a valid whatsapp number in international format without leading zeros, '+', '-' and spaces. e.g. 15551234567

  <a href="https://wa.me/15551234567">Whatsapp Me</a>

• A Share this on whatsapp button : Use https://wa.me/?text=urlencodedtext to open a whatsapp contact selection dialog with a preset text. e.g.

  <a href="https://wa.me/?text=I%20found%20a%20great%20website.%20Check%20out%20this%20link%20https%3A%2F%2Fwww.example.com%2F">Share on WhatsApp</a>

• A Contact me button with prefilled text : A combination of the above two, Might be useful if you want to get a prefilled custom message from users landing on a particular page. Use format https://wa.me/whatsappphonenumber/?text=urlencodedtext

  <a href="https://wa.me/15551234567?text=I%20am%20interested%20in%20your%20services.%20How%20to%20get%20started%3F">I am interested</a>

For official documentation visit https://faq.whatsapp.com/en/general/26000030

Official WhatsApp doc Says-:

https://api.whatsapp.com/send?phone=countrycode+phonenumber&text=urlencodedtext

Use: https://api.whatsapp.com/send?phone=15551234567&text=urlencodedtext

Don't use: https://api.whatsapp.com/send?phone=+001-(555)1234567

https://faq.whatsapp.com/en/general/26000030

unfortunately, there is not option to put number in whatsapp protocol. only is possible with parameter ABID (address Book ID), but you must have this contact with specific name to do this. check WhatsApp Documentation

As noted by others, the official documentation is available here: WhatsApp.com FAQ: Android -> Chats -> How to use click to chat. The documentation states:

Example: https://wa.me/15551234567?text=I'm%20interested%20in%20your%20car%20for%20sale

BUT! Why don't we try copying that into a new tab in your browser and going there right now?

https://wa.me/text=testtesttesttest

Results: ERROR PAGE NOT FOUND.

What gives???

Fix it easily by using one of THESE format:

https://api.whatsapp.com/send?text=YourShareTextHere
https://api.whatsapp.com/send?text=YourShareTextHere&phone=123

No wa.me domain in this URL!

This answer is useful to them who want click to chat whatsapp in website to redirect web.whatsapp.com with default content or message and in mobile device to open in whatsapp in mobile app with default content to text bar in app.

also add jquery link.

<a  target="_blank" title="Contact Us On WhatsApp" href="https://web.whatsapp.com/send?phone=+91xxxxxxxxx&amp;text=Hi, I would like to get more information.." class="whatsapplink hidemobile" style="background-color:#2DC100">
<i class="fa fa-fw fa-whatsapp" style="color:#fff"></i>
<span style="color:#fff">
    Contact Us On WhatsApp        </span>
</a>
<a  target="_blank" title="Contact Us On WhatsApp" href="https://api.whatsapp.com/send?phone=+91xxxxxxxxx&text=Hi,%20I%20would%20like%20to%20get%20more%20information.." class="whatsapplink hideweb" style="background-color:#2DC100">
<i class="fa fa-fw fa-whatsapp" style="color:#fff"></i>
<span style="color:#fff">
    Contact Us On WhatsApp        </span>
</a>

<script type="text/javascript"> 
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
if (mobile) { 

$('.hidemobile').css('display', 'none'); // OR you can use $('.hidemobile').hide();
} 
else 
{ 
$('.hideweb').css('display', 'none'); // OR you can use $('.hideweb').hide();
}
</script>

To send a Whatsapp message from a website, use the below URL.

URL: https://api.whatsapp.com/send?phone=XXXXX&text=dummy

Here the phone and text are parameters were one of them is required.

• phone: To whom we need to send the message
• text: The text needs to share.

This URL is also can be used. It displays a blank screen if there is no application found!

URL: whatsapp://send?text=The text to share!

Note: All the above will work in web, only if WhatsApp desktop app is installed

i used this code and it works fine for me, just change +92xxxxxxxxxx to your valid whatsapp number, with country code

<script type="text/javascript">
        (function () {
            var options = {
                whatsapp: "+92xxxxxxxxxx", // WhatsApp number
                call_to_action: "Message us", // Call to action
                position: "right", // Position may be 'right' or 'left'

            };
            var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
            var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
            s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
            var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
        })();
    </script>