Dynamic Page Sharing on Whatsapp

Community resources Webflow Tips
1

Following @sabanna 's article on dynamic social media share buttons, I looked around for a way to add dynamic page sharing on WhatsApp. Hope this article will be of help to someone.

1. CREATE AND STYLE THE SHARE BUTTON

Drag a div, link or button from elements tab in the designer, place it on the page(s) you want to share and give it a class e.g. whatsapp

2. ADD CUSTOM CODE SNIPPET TO HEAD AREA

First, we need to include a specific version of jQuery here. It does not seem to be working with the one included in Webflow. Add this to the head area of the custom code tab in the dashboard.

i.e. Paste this in Site Settings > Custom Code > Head Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Next, add the following script. Make sure the class .whatsapp referenced below is substituted for the class you used to name your button

<script>
  $(document).ready(function() {
     $('.whatsapp').on("click", function(e) {
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            var article = $(this).attr("data-text");
            var weburl = $(this).attr("data-link");
            var whats_app_message = encodeURIComponent(document.URL);
            var whatsapp_url = "whatsapp://send?text="+whats_app_message;
            window.location.href= whatsapp_url;
        }else{
             alert('You Are Not On A Mobile Device. Please Use This Button To Share On Mobile');
        }
     });
  });
</script>

That’s it. Basically, what we are telling the browser here is to listen for a click on the whatsapp button and if on a mobile device, then it will share the page URL which WhatsApp in turn parses in to a readable link complete with page title, description and image if provided in page settings in the designer.

A good practice would be to hide this button on desktop and show it on tablet and mobile. I hope you find this helpful.

Happy sharing.

4 Likes
2

how can we add image too with text

3

Hey @Fazal_Sandhi . Please explain some more.

4

im using this code to share blogs all meta properti are working fine on facebook share
but when i share blog on whatsapp it does not show image preview
look here is the example:

http://www.firesafeasia.com/index.php?option=blogdetail&id=30

5

Kindly read this html - Provide an image for WhatsApp link sharing - Stack Overflow

1 Like
6

i have alredy visited this page but didnt work:pensive:

7

UPDATE:

There are some reports that this method does not work consitently with higher versions of Android and IOS. We can format the link using the initial method by @sabanna but direct the share to whatsapp this way;

<a href="whatsapp://send?text=" title="Share On Whatsapp" onclick="window.open('whatsapp://send?text=%20Take%20a%20look%20at%20this%20awesome%20page%20-%20' + encodeURIComponent(document.URL)); return false;"></a>

This will take care of pulling all dynamic titles and meta content, including the page’s meta image if set in the designer.

2 Likes
8

This is a good share. Thanks.

1 Like
9

thanks, that is perfect!

1 Like
11

But If Message have some emoji ,then how we can share this on whatsapp.

i have a div means message with emojies …i copy the div element content and store in a variable and letter pass that variable as message text ,butt it content emoji with message
we didnt able to send emojies

13

It is ok with content of website but i have image which i have to share as thumbnail for this article so how can i share this

14

Update to the Whatsapp share link.
Please note: I am using an icon from the Awesome Fonts service in a div inside the tag.

<a class="w-inline-block social-share-btn fb" href="whatsapp://send?text=" title="Share on Whatsapp" target="_blank" onclick="window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;">
<div><i class="fab fa-whatsapp"></i></div>
1 Like
15

but how to use it with your code and i want all data dyanamic like image text and video in every link how it can be possible help me plz

16

I have been trying to share text content of DIV on whatsapp. But, no success yet. I do not want to share the whole document. I just want to share a part of it. Please help!

17

Hi @Parag_Agarwal!

Here’s a solution I could adapt:

Paste this in Inside < head > tag of the page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Paste this in Before < /body > tag

<script type="text/javascript">
(function clickMe() {
  const button = document.getElementById("button");
  var divblock = $('.divblock').text();
  button.addEventListener("click", event => {
    // Whatsapp Message on Button Click
    window.open("https://api.whatsapp.com/send?phone=9999999999999&text=Show div text: " + divblock)
  });
})();
</script>

You have to make sure:
• Your div class is the same as it is in here: var divblock = $(‘.divblock’).text();
div

• Your button ID is the same as it is in here: const button = document.getElementById(“button”);
button

This is how the website looks like:
print1

And this is the result from Whatsapp API:

print2
print2815×109 1.98 KB

Hope it solves your problem!

18

Hi @vkoetz,
Wow! I wasn’t expecting a reply so soon. Thank you for helping me out. I will surely try your code. However, I just have one request. Can you please check the preview once again? The button is not throwing any output. I tried on desktop as well as on my mobile. Thanks once again!

1 Like
19

Dear @vkoetz,
It works like a charm. Thanks a ton! Really appreciate your help.

1 Like
20

Please Help!

How Can I change the URL That was sent via WhatsApp? and not the Current Page?

21

it’s not working with this version na3 whatsapp when i embed code after some time not work