Opening dialer and email via url

Plugins
1

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

2

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.

3

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?

4

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

6

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!

7

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: GitHub - microsoft/cordova-simulate: Simulates your Apache Cordova application in the browser.

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.