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

ionic-v1
21

Did you see @emaV post? Try whitelisting telephone numbers

22

Thanks… I’ll take a look!

23

Hi @henkjurriens I have the same problem.
Try this:

<div onclick="window.open('tel:555-555-555', '_system', 'location=yes')"></div>

And you need the Cordova plugin InAppBrowsing

1 Like
24

It’s really helpful to me! Thanks a lot!

25

Thanks guys!!

worked for me after adding the following two lines to config.xml

access origin=“tel:" launch-external=“yes”
access origin="mailto:” launch-external=“yes”

didn’t work with

access origin=“*”

Well, I’m running Cordova .4.0.0

5 Likes
26

@emaV Thanks a lot. This is really help me.

1 Like
27

Thanks a lot @emaV !!! (one more ;))

28

I have the same problem and my first thought is something wrong with the Android’s Webview. After many hours pulling my hair, I end up modify the CordovaCallNumberPlugin follow the answer on StackOverflow (How do I get the dialer to open with phone number displayed?)

But emaV’s answer is more bulletproof and should be recommended.

29

Thanks a Lot @emaV…
I just had to thank you again, as the relief your answer caused was immense.

I have been struggling since hours. But the issue just got sorted with your reply.

30

I know everyone does, but here I go again.
Thank you for pointing this out, been googling for almost an hour!

31

Hey guys,

 I have been following all of your steps and i am so close, thanks to all your suggestions.   I am having trouble getting the phone number to dislplay on my andriod .    I have used all the codes and suggestions.  This is what i have included;

In index.html
(403)314-0607

In index.js
$scope.phoneno = “4033140607”
.controller(‘HomeTabCtrl’, function($scope) {
console.log(‘HomeTabCtrl’);
});

In config.xml


So on my android, my button opens up my phone but doesn’t display the phone number. Any suggestions would be appreciated. Thanks

-chris

32

my code in html

a class=“button icon-left ion-ios-telephone button-full button-positive” ng-href=“tel:{{phoneno}}”>(403)314-0607

33

also,

my code in config.xml

34

access origin=“tel:" launch-external="yes"
access origin="mailto:” launch-external=“yes”

35

Not sure if anyone on this thread has stumbled onto this android bug but androids support for tel: has a problem that doesnt happen on IOS. The issue is that if you want to add more characters or pauses after the phone number is dialed, android ignores the digits. IOS will go ahead and use them but Android doesnt. I ended up writing a android plugin to deal with this . https://github.com/chalettu/dialer-plugin it uses a lower level telephony api in android that will properly handle the extra digits.

36

I did it but still facing the issue.

Ionic CLI Version: 1.3.18 Ionic version 1.0.0-rc.2 Cordova version: 3.8.0

Can anybody please help?

37

Have you whitelisted it in your angular config?

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|geo|mailto|tel|chrome-extension):/);
1 Like
38

thank you yurinondual,

no! I’m writing my first Ionic app so everything is new.
I’m not sure how to add it, just tried the following:

.config(function($compileProvider){ $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|geo|mailto|tel|chrome-extension):/); })

but I get the following errors in the iOS simulator console:

CDVWebViewDelegate: Navigation started when state=1 Failed to load webpage with error: CDVWebViewDelegate: Navigation started when state=1 Failed to load webpage with error: The URL can’t be shown

btw, this is the code I use:

<a class="tab-item" href="#" onclick="window.open('tel:0039340123456')"><i class="icon ion-ios-telephone-outline"></i></a>

:frowning:

39

You don’t need window.open. My url looks liek this:

<a  ng-href="tel:{{ ::vm.article.tel}}" class="col button button-icon icon ion-android-call"></a>
40

<a class="tab-item" href="tel:0039340123456"><i class="icon ion-ios-telephone-outline"></i></a>

same problem:
Failed to load webpage with error: The URL can’t be shown