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>
so i'm trying to load a PDF from external source into an iframe, it works fine on desktop and mobile view but when it comes to cordova android application it doesn't load, the iframe just goes/shows blank
I've tried using cordova whitelist.
added these in config.xml
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />
but still no luck
<div id="QR" data-role="view" data-model="Your data model name"></div>
Please above code put in your HTML file
Then Below code put in your click button event
Please replace PDF url instated of "http://www.google.in";
//Append iframe
$("#iframe1").find(".view-content").append('<iframe id="iframe2" src="" target="_parent"></iframe>');
var iFr1 = document.getElementById('iframe2');
iFr1.src = "http://www.google.in";
var $if1 = $("#iframe1").find("#iframe2");
$if1.load(function () {
alert("iframe loaded");
});
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
<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 render a remote HTML page when my Cordova app starts, instead of "./index.html"
Tried this in config.xml
<content src="http://example.com/index.html" />
<access origin="*" />
And also tried placing this into ./index.html
window.location.href = 'http://example.com/index.html';
Both load a blank white screen when I start the app. Got no errors in the device log. Using Cordova version 5.3.3.
Any ideas?
If you want to use <access origin="*" /> you need to add this meta tag to your html page(s) in your cordova app:
<meta http-equiv="Content-Security-Policy" content="*">
I hope this helps you!
In your index.html page, you can write windows.onload() function inside this write redirect to this http://example.com/index.html
You can change the loadUrl statement in the native code e.g. in Android, you need to find MainActivity.java under platforms/android/src....
I myself am currently looking for a way to do this from index.html (to display for e.g. a loading screen / error message in case of network issues).
I believe I had tried using window.location.href but that simply opened the browser to the specified URL. I want it to open up in the app's WebView of course.