Social share component with WhatsApp Web

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

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

how can this be fixed?

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

lemme try it again…

Can you repro the error on Try?

1 Like

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

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

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

.

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:)

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

@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:

(topic title edited)

6 Likes

thanks i will work on that

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

9 Likes