28

This is driving me crazy. I'm working on a Ionic app (Cordova, Angular etc). I have a contact us link which contains a mailto: href

href="mailto:[email protected]?subject=my%20App"

I've read countless posts on SO that say you have to remove

<access origin="*"/>

from the config.xml in the project root and replace it with:

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

Which I've done. When I run ionic build it gets added to the config.xml in platforms/android/res/xml. But no matter what I do the link doesn't open the mail app on any Android simulator (even when email is configured in the simulator).

Sadly I don't have a device to test on - so is this just a emulator thing or am I missing something?

3
  • 1
    Can you try adding inAppBrowser plugin and set the target to _system May 20, 2015 at 18:46
  • 1
    if you're using latest version of cordova, maybe you have to configure CSP in your html?
    – QuickFix
    May 21, 2015 at 8:41
  • I did not replace <access origin=""/> but put it right after <access origin="mailto:" launch-external="true" />, which works well for my case
    – Heribert
    Sep 9, 2016 at 11:49

7 Answers 7

32

You must install the cordova plugin whitelist:

cordova plugin add cordova-plugin-whitelist

or if you want to save the reference to your config.xml file:

cordova plugin add cordova-plugin-whitelist --save

and that you have to add the intent to your config.xml file:

<allow-intent href="mailto:*" />

You can find more info here.

4
  • @bagusflyer: same rule apply.
    – LeftyX
    Feb 27, 2016 at 11:55
  • 3
    when I try this approach with cordova 6.4.0 and cordova-plugin-whitelist 1.3.1 on android 5.0, I end up with popup saying "Unsupported action -- this actions is not currently supported"
    – Peter
    Jan 12, 2017 at 9:27
  • @Peter: I think things might have changed now. I haven't used the latest cordova version so cannot be much help. Cheers.
    – LeftyX
    Jan 13, 2017 at 9:28
  • Indeed. Nothing on this page worked for me except the simple swap of window.open('mailto:xxxx') to window.location.href='mailto:xxxx")
    – brianfit
    Feb 6, 2018 at 20:27
9

Try this:

window.location.href = "mailto:[email protected]?subject=Works on iOS too";
2
  • 3
    OMG. I tried EVERYTHING else on this page, this, THIS is what worked for me. So simple. Should be the accepted answer.
    – brianfit
    Feb 6, 2018 at 20:25
  • 1
    Actually this one worked well for me too. Dec 17, 2020 at 21:41
5

I just solved this thanks to the responses & articles above. I'm not sure what has or hasn't changed since the above postings, but for the reference of others; I now have http://, https://, tel:, & mailto: working with only the inappbrowser plugin installed and no manual edits to config.xml needed. I did everything mentioned above & it still wasn't working, so I started fiddling and found that I the window.open() call requires the second parameter of "_system" to work correctly (it tried to use the browser and "navigate" to http://mailto:xxx... without the "_system" flag).

However, for curiousity's sake, I uninstalled the whitelist plugin and removed the manual edits in config.xml and it still works.

Notes:

-I don't remember all the variations I tried, but onclick couldn't access the Ionic/Angular/Cordova scope(s), so I stuck with ng-click.

-I did not / have not tried using href="..." with any of the options. (If I remember, I'll test them and update this to reflec my results.)

So, with only the cordova-plugin-inappbrowser installed and no config.xml edits, here are my working / tested solutions:

ng-click="window.open('http://somesite.com', '_system')"
ng-click="window.open('https://google.com', '_system')"
ng-click="window.open('tel:(123) 345-4567')"
ng-click="window.open('mailto:[email protected]', '_system')"

Tested 9/20/2016 Using:

HTC One M8, android 6 ,cordova v6.3.1, cordova-plugin-inappbrowser v1.5.0, ionic v2.0.0, jdk1.8.0_101, android SDKs 21, 23, & 24 installed

3

what if you replace "true" with "yes"... I use this in my app and it works.

<access origin="tel:*" launch-external="yes"/>
7
  • I really thought that would fix it, sadly it doesn't. Does your link work in the emulator? As thats whats I'm testing on...
    – Jimothey
    May 20, 2015 at 17:05
  • It does work for me in an emulator. Have you updated to the latest version of cordova and android? (cordova 5.0.0, android 4.0.0.) I had to update my project in order to get it to work.
    – dave
    May 20, 2015 at 19:07
  • Correction, it doesn't work for me in my emulator..It returns with the error "This action is not supported." I tested a phone number initially, and it worked. I just tested an e-mail on my phone (droid turbo, openned the email in "Inbox") though, and it worked
    – dave
    May 20, 2015 at 19:17
  • Thanks Dave - will test on a device before update cordova as it looks like it breaks a few things with ionic. If it works I'll mark as correct.
    – Jimothey
    May 20, 2015 at 19:19
  • 1
    No luck on device. Nightmare.
    – Jimothey
    May 20, 2015 at 19:36
3

Ran into this today and noticed something that affected mailto, but not tel, links:

In addition to adding the intent to the cordova config as described by dave's answer

<allow-intent href="mailto:*" />

I also had to allow mailto links in the csp header of my page

<meta http-equiv="Content-Security-Policy" content="default-src 'self' mailto:*">

Didn't see any documentation around this behaviour of CSP headers.

2

Just in addition to use Cordova's WhiteListPlugin ;

It worked for me in this way: in config.xml

<access origin="*"/>
<access origin="mailto:*" launch-external="true" />
<allow-intent href="mailto:*" launch-external="yes"/>

And specially for ios add :

<platform name="ios">
    <allow-navigation href="mailto:*" launch-external="yes"/>    
    ...
 <platform name="ios">
0

Altering Cordova's WhiteListPlugin in config.xml did not work for me -- <access >,`. I tried many combinations, including those above. Doesn't mean these won't work necessarily, just for my setup it doesn't. (Building for Browser, Android, and iOS)

However, using the Cordova InAppBrowser Plugin worked:

As mentioned above, use the inAppBrowser plugin and set the target to _system.

This by passes the issues I was seeing in iOS with unsupported url, and launches the native systems web browser (i.e., Does not rely on WhiteListPlugin to allow the URL call).

Hope this helps.

Cordova version 6.3.1.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.