Opening dialer and email via url

Hello, I have a contact page in my app with phone numbers and email addresses that I want the user to be able to tap and either open the phone dialer or their email application. Under PhoneGap build I used the whitelist plugin to allow this. I am basically using the same setup here, but updated for the latest cordova-plugin-whitelist plugin. This works fine under android, but not at all under iOS. Tapping the URLs doesn’t respond at all.

Here’s sample URL code from the .html page:
<a>href="tel:8004269794">(800) 426-9794</a>
<a>href="mailto:mailbox@mycompany.com?subject=SubjectText&body=BodyText" data-rel='external'>mailbox@mycompany.com</a>

Here are a couple different CSP’s I’ve tried with the same results:
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" />

Here are the relative config.xml settings:
<plugin name="cordova-plugin-whitelist" source="npm" spec="^1.3.4" />
<access origin="*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="mailto:*"/>
<allow-navigation href="*"/>
<platform name="android">
<allow-intent href="market:*"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
</platform>

I’m sure I’m doing something wrong. I just don’t know what it is.

thanks for any help

Tip : If you’re pasting code, html or config files, surround the code with triple back ticks (```), before the first line and after the last one. It will be formatted properly.

I’ll bet it’s your CSP settings.

Any chance you can watch your project with the Safari Remote Console to see the actual error messages?

I’m building in windows. Is there any way to do that without buying a Mac?

So after a bunch of googling I was able to figure out how to remote debug iOS from chrome. The console shows an error “GET tel:8001234567 unsupported URL”

I’ve tried updating my CSP to
<meta http-equiv="Content-Security-Policy" content="default-src 'self' mailto:* tel:* data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" />

I’ve also tried various versions of allow-intent and allow-navigation settings in config.xml. Currently I have:

  <access origin="mailto:*" launch-external="yes" />
  <access origin="tel:*" launch-external="yes" />
  <allow-intent href="https://*/*"/>
  <allow-intent href="tel:*" launch-external="yes"/>
  <allow-intent href="mailto:*" launch-external="yes"/>
  <allow-navigation	href="*"/>
  <platform name="android">
    <allow-intent href="market:*"/>
  </platform>
  <platform name="ios">
	<allow-navigation href="mailto:*" launch-external="yes"/>
	<allow-navigation href="tel:*" launch-external="yes"/>
    <allow-intent href="itms:*"/>
    <allow-intent href="itms-apps:*"/>
  </platform>

There is more googling to do, but if this gives anybody any clues I’m all ears!

If you develop Cordova in Windows, I highly recommend using “Cordova Simulate” from Microsoft Visual Studio.

See: https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/run-your-app/simulate-in-browser?view=toolsforcordova-2017
and: https://github.com/Microsoft/cordova-simulate

Simulate has saved me untold hours in the iterative development process. It doesn’t do everything testing your app on a real device or Safari remote console can, but it gets you 95% there. Your app runs in the Chrome browser, so you have access to the Inspector and JS console and everything you might need.

No Mac needed.