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


#1

Hi all

I have been struggling this arvo trying to get my ionic app to use the phones (ios or android) calling feature.

Basically adding a href with a tel: type doesn’t work. (ala href=“tel:12345678”). This code does work if used in a simple mobile website. It will open the phones calling screen and populate the number.

I have added the sanitize code to the config and added angular-sanitize to the index.html

Do I need to include any particular cordova plugin to have this work.

Any help or working example would be great.

Thanks
Darren


Phone Number not clickable on IOS
Making Phonecall using ionic in phonegap
#2

Hmm I’ve never done this before so I’m not sure how much help I can be, but theres this article about making phone calls from cordova apps, although it maybe a bit dated.

Let me know if this helps at all.


#3

Thanks

I did read that article - as you say very dated and I’m sure it is not that involved now but I just can’t nail it yet.

Assuming it is a cordova issue as the code works in browser site on mobile.
Could be permissions or something


#4

Hmmm, I just tried it on a device and got it to work.

 <a href="tel:+1-1800-555-5555" class="button button-positive">Call me</a>

How were you writing the href? I haven’t mess with my config.xml too much so I don’t think its a permission issue.


#5

mine is more like

  <div class="button icon-left ion-ios7-telephone button-calm button-outline">
    <a ng-href="tel: {{phoneno}}">Call (03) 9533 1100</a>
  </div>

however I have tried the simpler href like your above and no go. will try it again but reckon i have other issues then.
are you using angular sanitize?
any chance I can see your project or config?

i’m using 0.9.27

thanks for your help


#6

Ahh I see the issue, its how you have the button written out. Instead of wrapping the a in a div, just apply the classes to the a like so

<a class="button icon-left ion-ios7-telephone button-calm button-outline" ng-href="tel: {{phoneno}}">Call (03) 9533 1100</a>

In your code you’re tapping the div and not getting the actual a tag. Tried it and it worked for me.


#7

hi mike

I tried your code and it worked straight away on my android 4.3 device. will try ios tomorrow - it’s 1:30am here

it has me baffled but at least your way is working.

many thanks again mike


#8

wow - makes sense now
must have tried everything but the right way - thanks

do you think it needs sanitize to work - will try with out tomorrow


#9

Glad to be able to help!

In regards to using angular-sanitize, I think it depends on where this data is coming from. If people are able to add this themselves then I would use it but if its something that you have control over, I don’t see the purpose of it.

Now keep in mind I’ve never used the sanitizer so I’m not an authority on this. I’d suggest you do some research on the sanitizer, dig though the docs and find out if where it fits in.


#10

I also want to add calling feature in my ionic project. I have used same code as you have suggested like

< a class=“button icon-left ion-ios7-telephone button-calm button-outline” ng-href=“tel: +91-99123789446”>Call +91-99123789446
< /a>

but I get the message “Safari cannot open the page as address is invalid”.

Do I need to include any other thing in config file or any other plugin?


#11

Off the top of my head, I don’t think you need to add anything else, but I’m not too knowledgeable about making phone calls. @darrenahunter what did you do to set up making phone calls in your app


[IONIC] make phone call in IOS
#12

My code is basically as above

<a class="button icon-left ion-ios7-telephone button-calm" ng-href="tel: {{phoneno}}">Call (03) 9533 1100</a>

And phoneno is defined as $scope.phoneno = “61395331100”;

I would suggest @charmi removing the ‘+’ and '-_ chars from you number though I haven’t had a chance to test it


#13

@darrenahunter and @mhartington
Thanks a lot for your reply!! My problem is resolved. I was checking on ios simulator that’s why the href was not working. I have tested on actual device (iPhone) and it’s working fine!


#14

I’ve been trying this on my Android device and Android emulator, and it does not work.
The links never, ever trigger the phone call - and now I’m starting to loose my hair…

Here’s what I’ve tried:
(All of them work on the browser, none works on android emulator nor device - didn’t try in IOS)

<!-- Using ng-href -->
<a class="button" ng-href="tel:{{Phonenumber}}">Call {{Phonenumber}} now!</a>

<!-- Using href -->
<a class="button" href="tel:{{Phonenumber}}">Call {{Phonenumber}} now!</a>

<!-- Using ng-href, concatenating directly -->
<a class="button" ng-href="{{'tel:' + Phonenumber}}">Call {{'tel:' + Phonenumber}} now!</a>

<!-- Not even the most basic link triggers the call -->
<a href="tel:123456789">Call me!</a>



<!-- Also tried to trigger by function, like this: -->

<!-- On template: -->
<a class="button" ng-click="phonecallTab(Phonenumber)"></a>

<!-- on the Controller -->
$scope.phonecallTab = function ( phonenumber ) {
    var call = "tel:" + phonenumber;
    alert('Calling ' + call ); //Alert notification is displayed on mobile, so function is triggered correctly!
    document.location.href = call;
}

All these leads me to believe the problem must be somewhere else. I’ve also tried to customize the permissions of the [project_root]/platforms/android/AndroidManifest.xml, by adding the following just before the </manifest> closing tag.

<uses-permission android:name="android.permission.CALL_PHONE" />

My setup:

  • Ionic CLI 1.2.5
  • Ionic version 1.0.0-beta.12
  • Cordova version 3.6.3-0.2.11

I definitely couldn’t succeed in any way, and now I’ve run out of options.
What can I do now? Any sugestions? Shouldn’t this be a common problem?


#15

I couldn’t find a solution to my problem, so I tried a workaround that proved to be quite something.

While searching for solutions to my problem, all problems seem to lead to the WebView, used by Cordova/Phonegap to run the app at runtime. So I seached what other alternatives could exist, and I stumbled upon CrossWalk, which basically runs your app in a Chromium runtime instead of WebView.

My problem (and some other small nuissances) were solved into thin air, and the app became much more “native”-responsive! Can’t wait for the day that the Ionic team absorbs CrossWalk to their CLI!!! (They’re considering it, according to https://github.com/driftyco/ionic/issues/1119).

So, if you’re having the same kind of problems, or are developing for an older set of Android devices (circa Samsung Galaxy SII), or want to use WebGL on your app, my advice is to simply try it.


#16

Same issue with:

  • Ionic CLI 1.2.7
  • Ionic version 1.0.0-beta.13
  • Cordova version 3.6.3-0.2.13

It seems to open only http/https links. It doesn’t work with geo, tel, mailto…

Well, there is a reason!

Cordova 3.6.0 introduces a second whitelist, for restricting which URLs are allowed to launch external applications. In previous versions of Cordova, all non-http URLs, such as mailto:, geo:, sms: and intent, were implicitly allowed to be the target of an a tag. Because of the potential for an application to leak information, if an XSS vulnerability allows an attacker to construct arbitrary links, these URLs must be whitelisted as well, starting in Cordova 3.6.0.

Cordova 3.6.0 Whitelist Guide

So you need to add explicitly in the config.xml:

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

#17

@emaV thank you very much,this answer help to me


#18

Amazing answer, thank you emaV.


#19

Thanks for the answer!

It makes total sense, of course.


#20

Hi, I still got the problem, tel: is not working…