Jump to content

Whatsapp Live Chat + Share Buttons without module


Recommended Posts

Hello to everybody

To create a Whatsapp Live Chat Link:

you just need to copy the code below into your footer or anywhere else to set up a clickable link for a whatsapp chat. Then you adjust the phone number within the link to your own number including the international country code without the plus. For example for a German number like +49 177 0000000 you just remove the plus and the spaces and add it to the url like shown below. Once your customer click on the link for android or iphone user whatsapp will start or for computer user web.whatsapp will start in his browser.

<p><i class="fab fa-whatsapp fa-lg"></i><a href="https://wa.me/491730000000" target="_blank"> anrufen per Whatsapp</a></p>

 

To add a Whatsapp Share Button

to the module Social Media Buttons (v2.1.0)

You just need to open the file /prestashop/modules/ps_sharebuttons/ps_sharebuttons.php

find

protected static $networks = ['Facebook', 'Twitter', 'Pinterest'

replace with

protected static $networks = ['Facebook', 'Twitter', 'Pinterest', 'Whatsapp'

find

&& Configuration::updateValue('PS_SC_PINTEREST', 1)

add the following line after it

&& Configuration::updateValue('PS_SC_WHATSAPP', 1)

find

        if (Configuration::get('PS_SC_PINTEREST')) {
            $social_share_links['pinterest'] = [
                'label' => $this->trans('Pinterest', [], 'Modules.Sharebuttons.Shop'),
                'class' => 'pinterest',
                'url' => 'https://www.pinterest.com/pin/create/button/?media='.$sharing_img.'&url='.$sharing_url,
            ];
        }

and add the following code after it

        if (Configuration::get('PS_SC_WHATSAPP')) {
            $social_share_links['whatsapp'] = [
                'label' => $this->trans('Whatsapp', [], 'Modules.Sharebuttons.Shop'),
                'class' => 'whatsapp',
                'url' => 'https://web.whatsapp.com/send?l=en&text='.$sharing_url,

            ];
        }

 

Or you just download the following file for the whatsapp share button:

ps_sharebuttons.php

Edited by Afriluka
Forgot to add tags and the file (see edit history)
  • Like 2

Share this post


Link to post
Share on other sites

I forgot to mention how to change the share button icon:

Well that depends on your theme and is the harder part. In the classic theme for example you have to modify the following file:

/prestashop/themes/classic/assets/css/theme.css

There, for example you can find the css rules for the pinterest icon:

.pinterest {
 background-image:url(../css/afb2ed6d67613a724a420a39b4fe5b0d.svg);
}
.pinterest:before {
 content:"";
 background-image:url(../css/b1db819132e64a3e01911a1413c33acf.svg);
}
.pinterest.icon-gray {
 background-image:url(../css/99db8adec61e4fcf5586e1afa549b432.svg);
}
.pinterest.icon-gray:hover {
 background-image:url(../css/b1db819132e64a3e01911a1413c33acf.svg);
}

You just need to copy them and adjust them for your new whatsapp icon.

Edited by Afriluka (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites
  • 5 months later...
  • 2 months later...
  • 3 weeks later...

Thanks for it.

But sorry the WhatsApp Social Share Link doesn´t work as expected.
The link is wrong.

I add all and all is working fine.
But when I cleck on the whatsapp button at the social share links at a product page, I get redirected to sign in by whatsapp web.
This is doing on both browsers: desktop and mobile.
For desktop, it is right. But it is wrong and "somekind of bad" at mobile browsers.
Therefore the link is wrong for mobile browsers.

It should be like this:

Social Share Link at product Page
-> I want to send / share this product with my whatsapp friend.

=> Version 1:
On Desktop PC and full browser:
I click on the whatsapp share button and it opens WhatsApp Web

==> ok , this is working now with your adding and your link!


=> Version 2: (this is much more important because whatsapp is working on mobile) 
On mobile and mobile browser:

Now with your link: I click on the whatsapp share button and it opens WhatsApp Web 
=> this is not what wanted

it should be like this:

 - I click on the whatsapp share button and my WhatsApp App on my mobile is opening
-  I select the person
- and there is the link and url of the product from my shop
like for example
https://www.xyz.com/clothes/women/printed-sweater.html#/size1

So what is the right link and code to have it working.....

Thanks for letting all us know, because your code+instruction and finally kind of module is great and working

and thanks for your work and sharing with of us!! 

Share this post


Link to post
Share on other sites
  • 2 weeks later...
On 3/19/2021 at 6:45 AM, Bjorn Lothbrok said:

Thanks for it.

But sorry the WhatsApp Social Share Link doesn´t work as expected.
The link is wrong.

I add all and all is working fine.
But when I cleck on the whatsapp button at the social share links at a product page, I get redirected to sign in by whatsapp web.
This is doing on both browsers: desktop and mobile.
For desktop, it is right. But it is wrong and "somekind of bad" at mobile browsers.
Therefore the link is wrong for mobile browsers.

It should be like this:

Social Share Link at product Page
-> I want to send / share this product with my whatsapp friend.

=> Version 1:
On Desktop PC and full browser:
I click on the whatsapp share button and it opens WhatsApp Web

==> ok , this is working now with your adding and your link!


=> Version 2: (this is much more important because whatsapp is working on mobile) 
On mobile and mobile browser:

Now with your link: I click on the whatsapp share button and it opens WhatsApp Web 
=> this is not what wanted

it should be like this:

 - I click on the whatsapp share button and my WhatsApp App on my mobile is opening
-  I select the person
- and there is the link and url of the product from my shop
like for example
https://www.xyz.com/clothes/women/printed-sweater.html#/size1

So what is the right link and code to have it working.....

Thanks for letting all us know, because your code+instruction and finally kind of module is great and working

and thanks for your work and sharing with of us!! 

do you Tryed with this?

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

I'll try tomorrow 

Good luck

Share this post


Link to post
Share on other sites
  • 2 weeks later...
On 13/6/2020 at 15:02, Afriluka said:

Hola a todos

Para crear un enlace de chat en vivo de Whatsapp:

solo necesita copiar el código a continuación en su pie de página o en cualquier otro lugar para configurar un enlace en el que se pueda hacer clic para un chat de WhatsApp. Luego, ajusta el número de teléfono dentro del enlace a su propio número, incluido el código de país internacional sin el signo más. Por ejemplo, para un número alemán como +49177 0000000, simplemente elimine el signo más y los espacios y agréguelo a la URL como se muestra a continuación. Una vez que su cliente haga clic en el enlace para el usuario de Android o iPhone, se iniciará whatsapp o para el usuario de computadora web.whatsapp se iniciará en su navegador.


   

 

Para agregar un botón Compartir de Whatsapp

al módulo Botones de redes sociales (v2.1.0)

Solo necesita abrir el archivo /prestashop/modules/ps_sharebuttons/ps_sharebuttons.php

encontrar


    

reemplazar con


     

encontrar


  

agregue la siguiente línea después de ella


  

encontrar


            
                   
                  
                  
            
        

y agregue el siguiente código después de él


            
                   
                  
                  

            
        

 

O simplemente descarga el siguiente archivo para el botón de compartir de WhatsApp:

ps_sharebuttons.php 7.87 kB · 50 descargas

Thanks for the contribution, however the module works halfway.
In the version for pc it shares the link well, however on mobile phones (I have only tried with android) it sends me to the official whatsapp page, it does not open the sharing application.

Share this post


Link to post
Share on other sites

Hi. Here my little contribution.

I improved the Afriluka solution for Whatsapp product sharing with the correct URL.

It has been tested on PS1.7 with module Ps_sharebuttons v2.1.1, web and Android. It works fine.

PHP code with the right link:

if (Configuration::get('PS_SC_WHATSAPP')) {
   $social_share_links['whatsapp'] = [
     'label' => $this->trans('Whatsapp', [], 'Modules.Sharebuttons.Shop'),
     'class' => 'whatsapp',
     'url' => 'https://api.whatsapp.com/send?text='.$sharing_url,
   ];
}

CSS to add in your stylesheet:

.social-sharing li.whatsapp:before {
content: "\f232";
color: #31ba46;
}

The other things you have to do the same as in Afriluka's original post.

 

  • Thanks 1

Share this post


Link to post
Share on other sites
22 hours ago, captiva said:

Hi. Here my little contribution.

I improved the Afriluka solution for Whatsapp product sharing with the correct URL.

It has been tested on PS1.7 with module Ps_sharebuttons v2.1.1, web and Android. It works fine.

PHP code with the right link:


if (Configuration::get('PS_SC_WHATSAPP')) {
   $social_share_links['whatsapp'] = [
     'label' => $this->trans('Whatsapp', [], 'Modules.Sharebuttons.Shop'),
     'class' => 'whatsapp',
     'url' => 'https://api.whatsapp.com/send?text='.$sharing_url,
   ];
}

CSS to add in your stylesheet:


.social-sharing li.whatsapp:before {
content: "\f232";
color: #31ba46;
}

The other things you have to do the same as in Afriluka's original post.

 

Thanks for the input,

Im using the same version of the module Ps_sharebuttons v2.1.1
Unfortunately, when integrating the new code to my store, the problem persists that the mobile opens the browser with the official WhatsApp website and does not share through the app.


  Hope someone can help me fix this problem.
image.png.b8d89f01d857f8392784fd482dc4e77b.pngimage.thumb.png.f17d399cf64a4f1417244ce53cff1a7e.png

Share this post


Link to post
Share on other sites
Posted (edited)

Hi,

 

first of all: thanks captiva for the new code.
It works like a charm.

Therefore I don´t know why it doesn´t work at your shop Samuel Almanza.

Did you clear cache at the backoffice and did you clear cache at the mobile browser?
Maybe this is a solution.

And for sure, you need to delete the old code at file /prestashop/modules/ps_sharebuttons/ps_sharebuttons.php

OLD
if (Configuration::get('PS_SC_WHATSAPP')) { $social_share_links['whatsapp'] = [ 'label' => $this->trans('Whatsapp', [], 'Modules.Sharebuttons.Shop'), 'class' => 'whatsapp', 'url' => 'https://web.whatsapp.com/send?l=en&text='.$sharing_url, ]; }

with this

NEW
if (Configuration::get('PS_SC_WHATSAPP')) { $social_share_links['whatsapp'] = [ 'label' => $this->trans('Whatsapp', [], 'Modules.Sharebuttons.Shop'), 'class' => 'whatsapp', 'url' => 'https://api.whatsapp.com/send?text='.$sharing_url, ]; }


That´s how I made it and it works perfectly.

Edited by Bjorn Lothbrok (see edit history)

Share this post


Link to post
Share on other sites

By the way, this would be the cherry on top of the cream  😉

Actually all social buttons including the new WhatsApp button are opening a new tab at pc browser.
So there is somewhere a link like _blank.

It would be great when a new window will open in front of your shop.
This window should be much smaller and maybe right side corner up the page.

So your shop is below and in front there is a new addional window.
Then the customer is not off from our shop.

For sure it need a css code.

Maybe someone will know it how to do it.
Would be great.

Share this post


Link to post
Share on other sites

Thank you all very much for your contributions,
The code works correctly! ☺️

In short, I will compile the necessary code:

1) open the file: /prestashop/modules/ps_sharebuttons/ps_sharebuttons.php

find:

 protected static $ networks = ['Facebook', 'Twitter', 'Pinterest'


replace with:

protected static $ networks = ['Facebook', 'Twitter', 'Pinterest', 'Whatsapp'

find:

Configuration :: updateValue ('PS_SC_PINTEREST', 1)


add the following line after it:

Configuration :: updateValue ('PS_SC_WHATSAPP', 1)

find:

if (Configuration :: get ('PS_SC_PINTEREST')) {
            $ social_share_links ['pinterest'] = [
                'label' => $ this-> trans ('Pinterest', [], 'Modules.Sharebuttons.Shop'),
                'class' => 'pinterest',
                'url' => 'https://www.pinterest.com/pin/create/button/?media='.$sharing_img.'&url='.$sharing_url,
            ];
        }


and add the following code after it:

if (Configuration :: get ('PS_SC_WHATSAPP')) {
   $ social_share_links ['whatsapp'] = [
     'label' => $ this-> trans ('Whatsapp', [], 'Modules.Sharebuttons.Shop'),
     'class' => 'whatsapp',
     'url' => 'https://api.whatsapp.com/send?text='.$sharing_url,
   ];
}

2) Now in themes / yourtheme / class / css / theme.css

add this code:

.social-sharing ul li.whatsapp {
border-color: # 6af11c;
}
.social-sharing ul li.whatsapp a: before {
content: "\ F232";
color: # 31ba46;
}
.social-sharing ul li.whatsapp: hover {
background-color: # 22ff2d;
}
.social-sharing ul li.whatsapp: hover a: before {
color: #ffffff;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More