'Open whatsapp chat for a number ionic 3/4

I have developed an app that should open a whatsapp chat using this plugin.

I installed it using ionic CLI ionic cordova plugin add https://github.com/ranjitpandit/whatsapp-phonegap-plugin.git and the used it as below:

home.page.ts

...

declare var cordova;

...
constructor(public platform: Platform) {}

chat() {

    this.platform.ready().then(() => {

      cordova.plugins.Whatsapp.send('+263783187321');

    });

}

Then in home.page.html I then did this:

<ion-row>
    <ion-col size="12" no-padding>
      <img src="assets/imgs/chat.jpg" (click)="chat()" class="chat" />
    </ion-col>
</ion-row>

The problem is that it's not opening a Whatsapp chat window when I click the image. Nothing happens. Please help. Thank you

Solution 1:^[1]

This is how it works in 2019 with Ionic 4

In config.xml add:

<access launch-external="yes" origin="whatsapp://*" />

In your html:

<a href="whatsapp://send?phone=YOUR_NUMBER">Link<a>

Solution 2:^[2]

It's very simple but it has a trick.

<a ion-button href="whatsapp//send?phone=54119998888">SEND</a>

but you have to allow the "whatsapp" in the config.html or it's going to be blocked (by security). So include this:

<access origin="whatsapp//*" launch-external="yes" />

be careful not to include "https://*" because it's not gonna work...

Solution 3:^[3]

I've searched on the ionic forum's and found this with 15 votes.

By going to this URL "https://api.whatsapp.com/send?phone= 573{The phone number}" for more info - check this : https://faq.whatsapp.com/en/26000030/?category=5245251 540

Solution 4:^[4]

This works for me in a pwa (January 2020)

config.xml

<access launch-external="yes" origin="whatsapp://*" />

Then in your html

<a href="https://wa.me/whatsappnumber?text=Hello%20world">Link</a>
 or
<ion-button href="https://wa.me/whatsappnumber?text=Hola%20Mundo">

You should use international format (without spaces of course)

1 xxx xxx xxxx USA
52 1 xxx xxx xxxx México
54 9 xxx xxx xxxx Argentina

in mobile it doesn't work in serve mode but in prod it does

Solution 5:^[5]

This simple method works for me in my PWA both in web and mobile(android) versions without having to add access into the config file:

JS:

window.open(`https://api.whatsapp.com/send?phone=${phoneNumber}`

HTML:

<a href=`https://api.whatsapp.com/send?phone=${phoneNumber}`>Link</a>

Solution 6:^[6]

If you want to call it in your js, you could simulate an <a> element and dynamically click it:

      var  element = document.createElement('a') as HTMLElement;
      element.setAttribute('href', 'https://wa.me/5959333033226?text=Hello%20How%20are%20you');
      element.setAttribute('style', 'display:none;');
      element.click();

Also you could do it on your html:

<a href="https://wa.me/5959333033226?text=Hello%20How%20are%20you">Link</a>

Set this conf inside your config.xml

<access launch-external="yes" origin="whatsapp://*" />

Solution 7:^[7]

Official WhatsApp Sharing Documentation. It seems that they are recommending you use wa.me. Let's try it out, then! https://wa.me/?text=mytest. I see...

We couldn't find the page you were looking for

After thorough testing, I have found that the following URL formats are the only ones that allow you to use any parameter or combination of parameters:

https://api.whatsapp.com/send?text=YourShareTextHere

https://api.whatsapp.com/send?phone=123

https://api.whatsapp.com/send?text=YourShareTextHere&phone=123

You can always test for yourself!

If you are interested in watching a project that keeps track of these URLs, then check us out!: https://github.com/bradvin/social-share-urls#whatsapp

Solution 8:^[8]

If you are using JavaScript or TypeScript then go through:

chat() {
this.platform.ready().then(() => {
  window.open("https://api.whatsapp.com/send/?phone=[PHONENUMBER]&text=Hi,%20Test%20Message&app_absent=0");
});}

OR If you are using HTML then go through:

<ion-row>
<ion-col size="12" no-padding>
  <a href="https://api.whatsapp.com/send/?phone=[PHONENUMBER]&text=Hi,%20Test%20Message&app_absent=0&app_absent=0">Chat</a>
</ion-col>

Solution 9:^[9]

add a function to

 cally(ph) {
    window.open('https://api.whatsapp.com/send?phone=' + ph);
  }

then in your html u can use ion fab which make it neat

<ion-fab vertical="center" horizontal="end" slot="fixed" (click)="cally('+2349136442229')">
            <ion-fab-button>
              <ion-icon name="logo-whatsapp"></ion-icon>
            </ion-fab-button>
          </ion-fab>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Ari Waisberg
Solution 3	TehGaz7
Solution 4
Solution 5	Marci
Solution 6	FDaumas
Solution 7	Community
Solution 8	Shravan
Solution 9	Emmanuel Iyen-Mediatrees

'Open whatsapp chat for a number ionic 3/4

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]