Social share component with WhatsApp Web

[dax (Daniela)]

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:
   

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.
   

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