Skip to main content

How To Make A Phone Call With Ionic Apps

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post i will show you how to make a phone call with ionic framework apps. I will start from scratch but you can use you existing app as well. I will use the side menu project. No plugins are needed for this to work. Also No JavaScript is required as well to make the call.

Note: As this tutorial is for Ionic 1.x apps. As Ionic has evolved to Ionic 2 i have written another tutorial for Dialing a number in Ionic 2 here.

Watch Video Tutorial Of This Post Here:

 

Step 1)

Firstly we will do the usual and create a new ionic project you can work with an existing one, so write the following in the command prompt

 

Step 2)

Now we need to do to prepare a button pressing which we will dial a number.

Make sure that you use this particular format of creating a button to make it work. The thing to note here is that this works with the href attribute so any element that takes the href attribute will work.

Step 3)

Allow access in the config.xml file by adding the following

And that’s it. Now you can dial numbers using your ionic app.

 

FOR USSD CODE:

USSD code has # in it, when you use the normal way as shown above the # is removed. So to have USSD codes you need to encode them, meaning replace every occurrence of # with %23. For USSD code to work instead of using the following

You can use this

 

Note: A thing to note here is that if you are using a hybrid app to make a call using your app when u click the dial button the number will appear “Typed in” the dial pad the user still has to tap the call button in the phone’s dialer.

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Romulo_Ctba

    Nice tip here, bro, thank you for sharing.
    Keep up the good work!

  • Pingback: Ionic 2 Beginner : Dial A Number In Ionic 2 Apps - pointDeveloper.com()

  • Harry

    hello, i cant connect the call through ionic …these following methods cant b working properly it just pending to make call.can u plz elaborate for how to make outgoing call in ionic?

  • Nice tip, thanks!

  • Akeel Ameen

    works like a charm! Thank you 🙂

  • Fasseu Joel

    Not working. I have tried everything, all possible solutions that people gave but still not working, it just populates the numbers in the dialpad, but i want it to launch the call directly

  • Gustavo Meredyk

    Hi, is possible to identify de end of call and the duration of this call ?

  • Mende T

    Perfect ! Thanks !

  • Ashwita Palekar

    hello, there is a slight problem coming in my app regarding the call. So when i make a call, it works from the laptop( since its a mac and connects to my phone to make a call ) but the moment i make an apk and open the apk on a phone, it does not function at all.

  • Chirag thaker

    i want to call a number by code NOT ANY HTML TAG

  • Preetham Rai

    Will it works if I add pause followed by extn?

    • yes the video shows in detail with different variations

  • meetdilip

    Thanks for the info. Can you tell me how to open a telephone no in WhatsApp instead of dialer ?

  • Thank you. Is there any way to prevent discarding # from dial number?? I want to call a USSD code. Something like: *70#

    • Yeah I had the same issue but after a good 20 mins of head banging I found a solution. Will update the post as I get the chance.

      what you need to do is to replace # with %23 … AKA you have to URl encode the string. You can do this dynamically using this function http://www.w3schools.com/jsref/jsref_encodeuricomponent.asp

      Hope it helps.

      🙂

      • Expressuals

        Hi! I’m really struggling with getting my Ionic 2 app to dial a USSD. It works with normal numbers, but not USSDs. I have tried the javascript encoding function but still unsuccessful 🙁

  • giri prasath

    how to make free call in ionic like whatsapp

  • Kiran Ghuge

    Thank you so much…works the way I want.

  • Pingback: How to dial a number with your ionic framework app – Your Gadget()

%d bloggers like this: