Social share component with WhatsApp Web

support
1

i just installed the social share component then added Whatsapp link:

When i tried to share i got this message: see image!

IMG_20190208_152149
IMG_20190208_152149.JPG800×808 21.3 KB

how can this be fixed?

2

Mmm I’m not sure, I just tested the component on Try and it works as usual. Now it’s enabled, see if you have the same error

1 Like
3

lemme try it again…

4

Can you repro the error on Try?

1 Like
5

i tried it again and still got the same error message : (

6

Are you able to make a video to see where is the problem? It’s a bit late for me now, I can take a look tomorrow or early next week.

1 Like
7

i had to try again and i think it worked. see image:

IMG_20190208_203125
IMG_20190208_203125.JPG800×971 35.5 KB
.

but when i pushed the SEND button it took me to google playstore and instructed i should update my whatsapp app. i will update soon. thanks for your help:)

8

I think that component is mostly for iPhones where it will open in the WhatsApp app.

On Android we will launch the native share dialog and that will already have Whatsapp.

On Desktop, I’m not sure if WhatsApp desktop app will handle that.

3 Likes
9

@dave_odiakaose if you are trying to share it via whatsapp web you need to use this link https://web.whatsapp.com/send?text= instead of https://wa.me/?text=. In this case be sure to explain in the Title that the button works only on Desktops using WhatsApp Web. On mobile this is what happens:

image
image.png462×635 22.4 KB

(topic title edited)

6 Likes
10

thanks i will work on that

11

So, you can use a trick to use both whatsapp (on mobile) and whatsapp web (on desktop) without problems.

You need to use 2 different icon. In the example below I will use

  • whatsapp for Whatsapp and
  • whatsapp-square for WhatsApp Web

  1. Add both social links inside the theme component setting:
    a. WhatsApp,fab-whatsapp,share with WhatsApp,https://wa.me/?text=
    b. WhatsApp Web,fab-whatsapp-square,share with WhatsApp Web,https://web.whatsapp.com/send?text=

  2. Add fab-whatsapp and fab-whatsapp-square in the svg icon component setting.
    The result will be:
    image

  3. Now create a new theme component, go to the common > CSS tab of the component and add:

    .desktop-view .social-link .fa.d-icon.d-icon-fab-whatsapp.svg-icon.svg-string, 
.mobile-view .social-link .fa.d-icon.d-icon-fab-whatsapp-square.svg-icon.svg-string {
  display: none;
}

    Add this new component in the main theme(s) of your site.
    In this way on desktop you will have only the whatsapp-square icon that will send you to WhatsApp Web.
    image

    On mobile there will be only the whatsapp icon that will open the app

    image-fb0bcc9e-aa8a-4da2-a966-81cb17cd18ef
    image-fb0bcc9e-aa8a-4da2-a966-81cb17cd18ef.jpg1037×721 129 KB

11 Likes
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.