Making Phone Call from App - href="tel:123"

you can see my settings in my previous post :stuck_out_tongue:

you try it:
at first you check out : cordova platform android/ios -v is top!

and this:

  1. bower update
  2. cordova platform update android/ios
  3. ionic platform android/ios
  4. cordova plugins add cordova-plugin-whitelist
  5. ionic build android/ios

it should be ok

Hello Mike,
What if we want to use icons in top of the button where Iā€™m forced to use <div> tag how to solve this issue in that case?

config.xml :frowning: add this code)

and try it, its working for me

1 Like

Has anyone managed to dial a number starting with a star? like ā€œ*054ā€ ?
it seems that on iOS (9) (havenā€™t tested on Android yet) any number starting with a star wonā€™t work
either if you use the ā€œaā€ method or windows.open oneā€¦

Solution <access launch-external="yes" origin="tel:*" /> in config

Hi emaV this worked like a charm just wanted to add that since we changed config.xml we might need a rebuild.

I added: <access origin="tel:*" launch-external="yes" and didnā€™t work but after launching a rebuild through ionic run android -l -c it worked perfectly!!! thanks!!

Hi!

I have read your posts, did what it says (I guess) but canā€™t figure out why it does not work on android devices.
I have made an update of everything. Firstly I use ionic view to check out the app on devices, is that ok?
It seems to be working on iOS devices (iPad mini and iPhone 4S) but not on android (Nexus 4 up-to-date)
I have installed Whitelist and InAppBrowser.

This is what I have in my app:

In my app.js
.config(function($stateProvider, $urlRouterProvider, $compileProvider){ $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|geo|mailto|tel|chrome-extension):/); $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//); })

In config.xml
<access origin="*"/> <access origin="tel:*" launch-external="yes"/> <access origin="geo:*" launch-external="yes"/> <access origin="mailto:*" launch-external="yes"/> <access origin="sms:*" launch-external="yes"/> <access origin="market:*" launch-external="yes"/> <access origin="https://*" launch-external="yes"/> <access origin="http://*" launch-external="yes"/>

In view
<a class="item item-icon-left assertive" ng-href="tel:0473384237"><i class="icon ion-ios-telephone"></i>Appeler le 04 73 38 42 37</a>

Any ideas?

Best regards,

Quentin

Seems to be working when app is built and on device (android with .apk)

may be issue is you forgot to add WHITELIST plugin.
The second thing you forgot add WHITELIST META tag to your index.htmlā€™s header

All of the above things I have implemented,

  1. Install whitelist plugin
  2. Add ā€œā€ in config.xml

But in my case, it working in some section and in some case itā€™s not. Then I start debug the issue

Working situation:

When click on Direct Call its working in Browser and Android both, in the below case its not working even the browser also.

Name of Police Station

Now, here is the solution " Just replace label tag with span or div." I donā€™t know why but its working for me. Share here, if any one stuck in the above situation. Thanks.

Hi, I see everyone talks about e.g. <access origin="tel:*" launch-external="yes"/> in this thread, but the correct way to specify this according to the whitelist plugin is to use allow-intent instead; <allow-intent href="tel:*" />

1 Like

Bingo, finally. I was struggling with all of the answers above, but @eirikh yours is the only one that got me any kind of result. I just shouldā€™ve listened to the errors that were showing in the Xcode console:

ERROR External navigation rejected - <allow-intent> not set for url='tel:+16107492830'`
ERROR External navigation rejected - <allow-navigation> not set for url='tel:+16107492830'

Hereā€™s what I learned. Updating the config.xml with <allow-intent href="tel:*" /> or <allow-navigation href="tel:*" /> works.

Using <allow-intent href="tel:*" /> works but will not show the prompt to the user to make the call and will just immediately start dialing the number. Itā€™s a bit odd of a UX to me. There is a bit of a delay till the phone starts dialing and it feels weird because nothing happens for a second.

Using <allow-navigation href="tel:*" /> works as well and is a much nicer UX because of the prompt that shows:

Notes:

  • Cordova Version: 6.0.0
  • Iā€™m not using $compileProvider.aHrefSanitizationWhitelist or anything like that. We do have the cordova-whitelist-plugin installed but I canā€™t say that itā€™s causing it to work/not work because before I tried this allow-intent/allow-navigation, nothing else worked.
  • I have not done any testing on Android
5 Likes

hello mhartington, can you help me in this issue phonecall, i am testing it through phonegap where it doesnā€™t direct to dialer.
But when i test it in a browser, it redirects to the dialer.
I dont know why it doesnā€™t work in phonegap. can you help me out here?

1 Like

I was having this problem until I say this answer :slight_smile:
<access origin="tel:*" launch-external="yes" />
worked for me.

1 Like

Thanks @dwilt4rville!

Adding:
<allow-navigation href="tel:*" />
<allow-navigation href="mailto:*" />

ā€¦ in config.xml worked great, but only tested on my iPhone6 (9.2) so far. Iā€™ll see if I can find an Android tester and report back.

Iā€™m calling it with:
<a ng-href="tel:+1{{phone}}" class="button button-stable icon ion-ios-telephone"></a>

I didnā€™t add anything else, but do have the whitelist plugin if that means anything.
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.3.1
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
ios-deploy version: 1.8.6
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v5.8.0
Xcode version: Xcode 7.2.1 Build version 7C1002

Confirmed working on Android 5.1

Thank you so much. Itā€™s been driving me crazy. I was trying to update my app and realized tel and mailto no longer worked. adding the cordova whitelist plugin solved it! canā€™t believe it was that :slight_smile:

Thanks @emaV. This really helped me.

Big thank you! This answer still holds true 2 years latter! Thanks again!