CODEWITHSUNDEEP
javascriptbuttonsharewhatsapp
Pri101
Pri101

Reputation: 9

Whatsapp share button for web version

I have this script but its only share from mobile version.

$(document).ready(function() {
    $(document).on("click", '.mc_whatsapp_btn', function() {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            var text = $(this).attr("data-text");
            var url = $(this).attr("data-link");
            var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
            var whatsapp_url = ".whatsapp://send?text=" + message;
            window.location.href =  whatsapp_url;
        } else {
            alert("Please use an Mobile Device to Share this Status");
        }
    });
});

Can anyone modify this?

Upvotes: 0

Views: 1182

Answers (3)

Georgi Georgiev
Georgi Georgiev

Reputation: 33

According the WhatsApp docs: https://faq.whatsapp.com/general/chats/how-to-use-click-to-chat/?lang=en

To create a link with just a pre-filled message, use https://wa.me/?text=urlencodedtext

Example: https://wa.me/?text=I'm%20inquiring%20about%20the%20apartment%20listing`

The result should be something like:

$(document).ready(function() {
    $(document).on("click", '.mc_whatsapp_btn', function() {
    // this 3 rows will be used for both - desktop and mobile      
        var text = $(this).attr("data-text");
        var url = $(this).attr("data-link");
        var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            var whatsapp_url = ".whatsapp://send?text=" + message;
        } else {
            var whatsapp_url = "https://wa.me/?text=" + message;
        }
        // again for both
        window.location.href =  whatsapp_url;
    });
});

Upvotes: 1

jkutkut
jkutkut

Reputation: 21

Following the mentioned documentation; this worked for me, both for Desktop and mobile:

<a href="https://wa.me/?text=Hey! Check this awesome page! https://stackoverflow.com/questions/65457914/whatsapp-share-button-for-web-version" target="_blank" rel="noopener noreferrer">
  Share by Whatsapp!
</a>

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76943

This line

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

checks for mobile and if true, the share logic is executed. In the else branch (meaning it's not a mobile) you get an error message. If you want the same to happen in both versions, just omit the if:

$(document).ready(function() {
    $(document).on("click", '.mc_whatsapp_btn', function() {
        //if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            var text = $(this).attr("data-text");
            var url = $(this).attr("data-link");
            var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
            var whatsapp_url = ".whatsapp://send?text=" + message;
            window.location.href =  whatsapp_url;
        //} else {
            //alert("Please use an Mobile Device to Share this Status");
        }
    });
});

Upvotes: 0

Related Questions