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
Related
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");
});
<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.
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.
I've a problem with links.
I want to add an android / ios market link. and mail link and image from external url.
tried for market link;
1. App
2. App
3. App
tried for mail link;
my#my.com
and config.xml file;
<access origin="mailto://my#my.com" launch-external="yes" />
image from external URL;
<img src="http://a.my.com/img.png" />
config.xml file;
<access origin="http://*.my.com" />
but not working. How can I add links? Thanks..
install inappbrowser plugin
install email composer
To open Temple Run in play store
<script type="text/javascript">
function openTR(){
window.open("market://details?id=com.imangi.templerun2", "_system");
}
function sendEmail(){
cordova.plugins.email.open({
app: 'gmail',
to: 'my#my.com',
subject: 'Greetings',
body: 'How are you?'
});
}
function openLink(link){
window.open(link, '_blank', 'location=yes');
}
</script>
<input type="button" value="Temple Run" onclick="openTR()">
<input type="button" value="Send Email" onclick="sendEmail()">
EDIT check openLink function defenition above
while creating <li> elements using js
"<li onclick='openLink(\"+"value.link+"\")' />"+value.title+"</li>"
Output
From Javascript,
window.location.href = "mailto:support#google.com";
window.location.href = "market://details?=com.my.app";
This will do the wonder.
I usually do something like this:
In string file
<string name="my_link"><a ref="https://google.com">Click This Link!</a></string>
in layout
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:text="#string/my_link"
android:autoLink="web" />