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

Are you testing it on real device? have you tried it with ng-href ?

testing on the iOS simulator for the moment.

tried ng-href and do not get the error, however it seem to do nothing both with:
tel:003912234

and with:
mailto:me@example.com

maybe the only way to get it work is to use it on a real device?

Yeah it is possible. I never tested it on simulator, but the url I posted above work on my iphone and android devices

will let you know when I will try it on a real device.

thank you again!

I solved this with inAppBrowser

I’m also using http://plugins.cordova.io/#/package/org.apache.cordova.inappbrowser but it does not help with mailto: and tel:

@camaleo, I wanna try to help you.
First of all copy this into your app module:

.config(['$compileProvider', function($compileProvider){        
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(geo|mailto|tel|maps):/);
}]);

Then, put this code in your ‘config.xml’ file:

<access origin="tel:*" launch-external="yes" />
<access origin="mailto:*" launch-external="yes" />
<access origin="geo:*" launch-external="yes" />
<access origin="maps:*" launch-external="yes" />

Build your application and finally, try it in a real iOS device. I think there’s no phone app on iOS emulator.

This worked for me for phone calls, emails and maps both Android and iOS devices.

PD: Sorry for my english. :disappointed:

1 Like

Ah yes, I just found this out the hard way! Tip: Whitelist external URLs in recent Cordova versions

thanks @ramon I just see the post and already did as you suggest.
yes, actually on a real device the links work: thank you!

@camaleo You’re welcome. :wink:

If you’re still running into this issue with newer versions of Cordova (I ran into it with 5.0.0) then please make sure that the cordova-plugin-whitelist is added to your project.

If not, then you can do it just by

cordova plugins add cordova-plugin-whitelist

And then add the <access> tags to your config.xml like you normally would.

Plugin: https://github.com/apache/cordova-plugin-whitelist

2 Likes

Worked for me too,

OS: Windows 8.1
Node Version: v0.12.0
Cordova CLI: 4.2.0
Ionic Version: 1.0.0-rc.1
Ionic CLI Version: 1.3.11

On a Motorola MotoG

Thanks!!!

I am facing a problem in calling too… It always popup a confirmation for call, Can I make it default by which call can be make directly without confirmation alert ?

Thanks this works for me!

Hi guys, i cant seem to get tel: to work on the device, it works fine on browser and on emulator, but not in any real device android or ios, so here is my setup:
Cordova CLI : 5.1.1
Gulp version: CLI version 3.9.0
Gulp local:

ionic Version: 1.0.1
Ionic CLI Version: 1.5.5
Ionic App Lib Version: 0.2.2
OS:w7
Node Version: v0.12.4

this is my view:

<div class="list">
  <a class="item item-thumbnail-left item-icon-right" ng-href="tel:{{lodging.custom_fields.client_name}}" collection-repeat="lodging in lodgings track by lodging.id">

lodging.custom_fields.client_name is actually his phone that is something like: +351923999999

my config.xml

<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"/>
<access uri="*" subdomains="true"/>

my app config:

app.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\//);

can someone help me with this? :expressionless:

Did you install inappbrowser plugin?

Hi @yurinondual! i have cordova inappbrowser 1.0.1 and cordova whitelist 1.0.0

you need add plugin whiteList

cordova plugins add cordova-plugin-whitelist

and config.xml

    <content src="index.html"/>
    <access origin="*"/>
    <access origin="tel:*" launch-external="yes"/>

it work for me

i must be doing something wrong because i have the whitelist plugin and my config.xml has the
in it, but still it doesnt work on devices.

do you update your cordova and ionic ?