Proper way to do mailto: and tel: links

1 Answer 1194 Views
HTML5, CSS, JavaScript
This question is locked. New answers and comments are not allowed.
J.
Top achievements
Rank 1
J. asked on 07 Feb 2013, 06:03 PM
I've got a Kendo UI Mobile listview and each item has a phone number and email address, both of which should be clickable/touchable and open the email app and phone dialer, respectively. I've tried several things, but none of them work in the simulator, and all of which only seem to work either extremely rarely or slowly on the phone. How should this look?

<ul data-role="listview">
<li>
option one<br />
<a href="mailto:sample@email.com">sample@email.com</a><br /> <a href=tel:1231231234">123-123-1234</a> </li> <li> option two<br /> <div onclick="window.location.href = 'mailto:sample@email.com';">sample@email.com</div>
<div onclick="window.location.href = 'tel:1231231234';">123-123-1234</div> </li>
</ul>





1 Answer, 1 is accepted

Sort by
0
Kristian D. Dimitrov
Telerik team
answered on 11 Feb 2013, 02:02 PM
Hi J.,

 You must specify, that you want to navigate to an external link using 'data-rel="external"' attribute. It still won't work in the simulator, because this functionality is not implemented inside it yet. However it will work as expected on real devices. You should modify your code like so:

<ul data-role="listview">
    <li>
        <a href="mailto:sample@email.com" data-rel="external">sample@email.com</a><br />
        <a href="tel:1231231234" data-rel="external">123-123-1234</a>
    </li>
</ul>

Regards,
Kristian D. Dimitrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
J.
Top achievements
Rank 1
commented on 12 Feb 2013, 02:44 PM

Thanks, Kristian. That works better, but I still have to tap the links several times before it opens. I'm wondering if having more than one link per <li> is the problem. You can view my project under this account (called MVCS). Here's the code I'm using:

<li>
<h3>Title</h3>
<p>
<a data-rel="external" href="mailto:test@test.com">test@test.com</a><br />
<a data-rel="external" href="tel:1231231234">(123) 123-1234</a>
</p>
</li>
J.
Top achievements
Rank 1
commented on 12 Feb 2013, 03:26 PM

Let me add something. I've got another place where I have web links ("Other Links" view if you look at my project) and I added data-rel="external" to them. I have to click the several times and then they open the web site in a browsers within my application. I'd like them to open the URL in the browser app. Here's the code:

<div data-role="view" id="tabstrip-otherlinks" data-title="Other Links">
<h1>Other Links</h1>
<ul data-role="listview">
<li data-icon="globe">
<a data-rel="external" href="http://www.test.org/" target="_blank">Website</a>
</li>
<li data-icon="pinterest">
<a data-rel="external" href="http://pinterest.com/" target="_blank">Pinterest</a>
</li>
</ul>
</div>
J.
Top achievements
Rank 1
commented on 14 Feb 2013, 08:26 PM

Since you haven't had a chance to respond to this thread yet, let me tag a third related question on to the first two:

In addition to:
1) linking the user to sites in the phone's native browser app and
2) linking with mailto: and tel: links

I'd also like to know:
3) how to open a link to an embedded PDF in the native browser app.

Thanks!
J.
Top achievements
Rank 1
commented on 15 Feb 2013, 04:13 PM

Hi J.,

For the issue with "mailto:" and "tel:" just update the Kendo Mobile with the latest version shipped with Icenium (v2012.3.1315) and this should solve it. To update Kendo just copy the Kendo files(or their content) from a new blank Kendo Mobile project.

To open sites in the default browser you should modify your code as shown below.

HTML:

<ul data-role="listview" data-click="navigateToAddress">
    <li data-icon="globe">
        <a data-rel="external" data-link="somelink.com" target="_blank">Somelink</a>
    </li>
</ul>

JavaScript:
navigateToAddress = function(e){
       var that = this,
             data = e.target.data();
        if(device.platform.toLowerCase() === "android"){
              navigator.app.loadUrl(data.link, { openExternal:true } ); 
         } else {
              window.location.href = data.link;
         }
}

We made a sample application to demonstrate open PDF file in both Android and iOS using Icenium and the Child Browser plugin. Everyone can Clone it from Sample Projects in Graphite or Mist. Note that plugins do not work in simulators, so test on real device only.

You might want to hide the Android splash-screen as soon as Cordova fires "deviceready" event. To do so, just add the following line of code inside the "deviceready" handler:

function onDeviceReady() {
    navigator.splashscreen.hide();
}

Greetings,
Kristian D. Dimitrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.
J.
Top achievements
Rank 1
commented on 18 Feb 2013, 06:22 PM

Thanks, Kristian. I'll give that a try.
Sam
Top achievements
Rank 1
commented on 15 Dec 2013, 06:02 PM

Hopefully this is a good place for this. We have an app that used the following HTML:

<div data-role="navbar">
    <a id="btnUploadPics" data-click="uploadPics" data-role="button" data-align="right">Add Photos</a>
</div>

JS: 
function uploadPics() {
    var sLink = "mailto:test@test.com?subject=test";
    window.open(sLink, "emailWindow");
}

This was working fine for the last 2 years until the latest KendoUI update. I've tried
window.location.href = "mailto:test@test.com"
window.location = "mailto:test@test.com"

Nothing seems to work. Now I get a 'null' in the recipient and nothing else. 
Zdravko
Telerik team
commented on 18 Dec 2013, 08:28 AM

Hello Sam,

I updated kendo to 2013.3.1119 version and the code below works perfect. Your code works as well, but it opens the link in the browser first so I modified it.
app.upl=function () {
        var sLink = "mailto:test@test.com?subject=test";
        //window.open(sLink, "emailWindow");
        window.location.href=sLink;
    };

<div data-role="navbar">
    <a data-rel="external" id="btnUploadPics" data-click="app.upl" data-role="button" data-align="right">Add Photos</a>
</div>

If you send me your project I could take a look.
Thanks.

Regards,
Zdravko
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
Sam
Top achievements
Rank 1
commented on 18 Dec 2013, 12:48 PM

Thanks for the response. I did get it working by just using the href attribute on the anchor tag. I was using a function because I had to change out the parms being sent so I'm just updating the attribute instead and it works fine now. Thanks again for the quick reply. 
Ram
Top achievements
Rank 1
commented on 28 Jul 2015, 03:03 PM

Hi,

Im using appBuilder extension on visual studios 2015 rc and im using Kendo UI to build an app..

            <ul data-role="listview">
                <li>
                    <a class="btn" data-rel="external" target="_blank" data-role="touch" href="tel:01628788788">Call us</a>
                    <a class="btn" data-rel="external" target="_blank" data-role="touch" href="mailto:info@parkcarsexecutive.com?subject=Contact via App">Mail us</a>
                </li>
            </ul>

both links are doing nothing on android phone.. I haven't tested it on iOS.

Can someone please help me?

more details:

OS: windows 7, Visual studios 2015rc with AppBuilder Extension, Kendo UI with Tabstrip template

 

 

Ventsislav Georgiev
Telerik team
commented on 31 Jul 2015, 02:52 PM

Hello Ram,

Thank you for contacting us. I am afraid I was not able to reproduce the issue.

I have tested your exact code snippet on Android 4.0.4 and 5.0 device:
  • The "tel:*" link opens the dialer with the number already in.
  • The "mailto:*" opens a popup to choose a mail client.
The test was made with a newly created project from the Kendo UI TabStrip template in Visual Studio.
The Kendo UI version was Kendo UI Core v2014.1.624 which is the default version coming with the template. I also tested with an updated version - Kendo UI Core v2015.2.727.

Users have experienced issues with external links after Cordova 3.6 was released as external links had to be explicitly white listed. We have already addressed the issue by extending the default configuration files. You can find more information in the External Application Whitelist section of this article. You can also check this Stack Overflow thread.

Here is a useful link about how to access the configuration files for the different platforms inside an AppBuilder project. Make sure your configuration files white list the tel: and mailto: links. If that doesn't help, please send over your project so we can further investigate the issue.

Regards,
Ventsislav Georgiev
Telerik
 

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

 
Trisha
Top achievements
Rank 1
commented on 23 Jul 2016, 10:29 AM

Hi 

I tested your code in Js.do you forgotten a quote. I added in only the phone link work and launch my skype. I put a real email address to see if it open my email or outlook but it does nothing.

<html>
<body>
<ul data-role="listview">
<li>
option one<br />
<a href="mailto:girlfridayz@girlfridayz.com" data-rel="external">sample@email.com</a><br />
<a href="tel:1231231234" data-rel="external">123-123-1234</a>
</li>

<li>
option two<br />
<div onclick="window.location.href= 'mailto:girlfridayz@girlfridayz.com';">sample@email.com</div>
<div onclick="window.location.href = 'tel:1231231234';">123-123-1234</div>
</li>
</ul>

</body>

 

rashmi
Top achievements
Rank 1
commented on 09 Aug 2017, 06:15 AM

Hi,

I have a doubt how will the '' behave when there is no email client application in mobile devices

Tags
HTML5, CSS, JavaScript
Asked by
J.
Top achievements
Rank 1
Answers by
Kristian D. Dimitrov
Telerik team
Share this question
or