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
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>
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...
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
This works for me in a pwa (January 2020)
config.xml
<access launch-external="yes" origin="whatsapp://*" />
Then in your html
Link
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
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}`
or
HTML:
<a href=`https://api.whatsapp.com/send?phone=${phoneNumber}`>Link</a>
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:
Link
Set this conf inside your config.xml
<access launch-external="yes" origin="whatsapp://*" />
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
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>
Chat
</ion-col>
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>
Hello I have a problem whit Ionic, I have a button with a link to send a whatsapp, for android works perfectly. But IOS does not open the conversation.
This is my code:
HTML:
<a [href]=“makeUrl(propiedad)”>
<button class=“button-footer”>
<ion-icon class=“icon-footer” name=“logo-whatsapp”>
</button>
JS:
this.trustedDashboardUrl = this.sanitizer.bypassSecurityTrustResourceUrl(“whatsapp://send?text=hello&phone=”+AppSettings.whatsapp+"&abid="+AppSettings.whatsapp);
return this.trustedDashboardUrl;
CONFIG XML:
<access launch-external=“yes” origin=“whatsapp:" />
<allow-intent href="whatsapp:” />
I don't know if thats the right way to send a whatsapp message ...
check the Social Share Plugin
<div class="fb-like" data-href="http://www.mywebsite.com" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
Tweet
<div class="fb-messengermessageus"
messenger_app_id="xxx"
page_id="xxx"
color="white"
size="large">
</div>
I am trying to show Facebook Like, Share and Twitter tweet buttons on my phonegap app.
When running the above codes on my actual device, Facebook related buttons are totally not visible.
Twitter tweet button is visible, but if you press it, there is an error that says 'Refused to display 'https://twitter.com/intent/tweet?....'
If I try to add the following in my config.xml:
<access origin="tel:*" launch-external="yes" />
<access origin="http:*" launch-external="yes" />
<access origin="https:*" launch-external="yes" />
Then pressing tweet button will have no error, but still, nothing shows up.
Why? How to make these buttons open up corresponding apps or external browser?
In Phonegap you can open the in app browser like so:
window.open('fb://profile/xxxx', '_blank', 'hidden=yes');
Please refer to This documentation in order to move forwards. You may have to encode all of the parameters you mentioned above in your URL.
<ion-content>
<div class="item item-button-right ng-click="CallingTel({{user.phone1}})">
<h2><b>Mobile No.</b></h2>
9999999999
<button class="button button-positive">
<i class="icon ion-ios-telephone" ></i></button>
</div></ion-content>
The above fragment of code is from HTML page which has Phone call button.
The below fragment of code explains about functionality of Phone calling functionality.
angular.module('starter.PhoneController',[])
.controller('PhoneCtrl',function($state,$scope,$rootScope)
{
$rootScope.home = true;
$rootScope.telnumber1 = " 9999999999";
$scope.CallingTel = function(tel) {
window.location.href = 'tel:'+ $rootScope.telnumber1;
}
});
I have even added the "<access origin="tel:*" launch-external="yes" />" code in config.xml. Can anyone give me the solution on how to automatically bypass call without displaying the dialer pad?
<access origin="tel:*" launch-external="yes" />
You need to add this line in two places , project_name/config.xml and project_name/platforms/android/res/xml/config.xml.
I want to open a link say www.google.com in Phonegap Android... I've tried lot of things but I'm not able to open any link.
<access origin="http://google.com" /> is already added to config.xml.
navigator.app.loadUrl('http://google.com'); is giving an error.
$('#pageID').load('http://google.com',function(){
$('#pageID').trigger('create');
});
is loading the page but the images are not displayed, which is required in my case.
Can anyone explain how to actually open a link in Phonegap.
Well it seems its not possible ..... but I found that we can do it other way round.
We know this works :-
<a data-role="none" id="someID" href="#" target="_blank">
So we can write jQuery as :-
$('#idAnchorTag').attr('href','some URL');
So the complete code is :- (Assuming that click was made on an image)
<a data-role="none" id="idAnchorTag" href="#" target="_blank">
<img id="idIMG" src="some IMAGE">
</a>
And the JS :-
$(function() {
$("#idIMG").click(function(){
$('#idAnchorTag').attr('href','some URL');
});
});
try
$('#pageID').onClick(function(){
document.location.href="http://google.com";
})