How to Make a Mobile Site Click to Call Link

A “click to call” button or link on a mobile or smartphone website can mean the difference between getting a customer to call or losing them forever. Converting customers with mobile sites is a different discipline from converting customers on desktop websites: mobile website visitors are unlikely to read long sales copy, are similarly unlikely to send an email, and are certainly not going to fill out a lengthy web form. In the mobile environment, a phone call is your best route to conversion–after all, your visitors have the phone in their hand!

Coding the Click to Call Link for Mobile Phones (updated for 2015)

To create a click to call link, use the following code:

<a href="tel:8005551212">800-555-1212</a>

“Selling” the Click

Now, let’s improve our click to call link. After all, all we’ve done with the above link is make the phone number clickable; will users know that the phone number is a click to call link? We can “sell” the click by adding a call to action to our link:

<a href="tel:8005551212">Click HERE to Call: 800-555-1212</a>

That’s an improvement, it serves to highlight the link and directs users with a call to action.

Pro Tip: Visually Improving the Click to Call Button

To take our click to call link even further, we can add an arrow to visually guide users to the desired action–and maybe even add a second call to action. You can see this technique in action on the following mobile site:

Click to Call in Action!

Pro Tip: Advanced Analytics Tracking for Mobile Calls

We’ve written a tutorial on how to track the phone calls through a click to call link with Google Tag Manager and Google Analytics.

33 replies
  1. Syedhasan
    Syedhasan says:

    This is a very handy technique when a person is browsing your website from a mobile device and may turn out to be a highly convertible one.

    • Jeff
      Jeff says:

      Agreed. I have a service business and most of my customers already come through my website. I didn’t know how easy it was to create a click to call link. Maybe it will generate a few more calls per month and more business for me. Thanks for this article.

  2. Adam P.
    Adam P. says:

    I am web designer I had no idea how easy this was! I have been meaning to learn about this but putting it off due to feeling overworked and overwhelmed, just now I queried this and wow. Thanks for the article and for including a discussion of ways to increase it’s effectiveness such as using an arrow and call-to-action. Bookmarked and shared!

  3. Chuck
    Chuck says:

    Very handy to know, Thanks much.
    As I have a service business and most people want to talk to you. It is a good tool for the smartphones. This way they will not have to exit, then go to phone and then call.
    Much easier to click and let the phone do the work.
    Boy are we all gettin lazy, or is this technology???

  4. Rajeev
    Rajeev says:

    I am looking for similar function. But I would like to dial into my IVR from the mobile.
    For ex my no is +99999999999 there will be many IVA Menus associated with the no
    ex – my web page will have options like +99999999999 111 , +99999999999 2222 , +99999999999 333
    So once the user clicks on +99999999999 111 first the call to +99999999999 will be made & then 111 digit needs to be inputted manually so that it can land on my particular IVR.
    Let me know how this can be achieved

  5. Genifer
    Genifer says:

    Hey Ive searched for a same to create that link on my website. Thank for your sharing. Looking more more such impressive tips from you.

  6. Sharena
    Sharena says:

    This is great knowledge! Works great on mobile. I’m wondering how when someone clicks on this link on a pc what code I could use to have it directed to perhaps a ContactUs page. Right now it goes to an error page on pc.

    • kappadev
      kappadev says:

      Yeah i have the same problem.
      It works fine on smartphones but when i click the button on a PC i get an error “The address wasn’t understood”.
      Did you find a solution for that??


      • Michael David
        Michael David says:

        but PCs aren’t meant to understand the link–there is no way a PC could act on it. The key is to make the link show up only if a mobile device is employed to view the page. So that brings you to responsive design, which we at TastyPlacement feel is the best way to deliver a web property to mobile devices in a commercial environment.

  7. Acardillac
    Acardillac says:

    I’m with Sharena. Since the link goes to an error page on a PC, does this hurt SEO for the website? I’m creating a site using responsive design and am concerned about the error page hurting our rankings.

  8. Pete
    Pete says:

    Awesome! I was wondering how to do this, can’t believe it was that simple! I’ve called several companies directly from mobile browsing simply because it’s so quick I don’t have time to change my mind. Thanks Michael!

  9. Andy
    Andy says:

    Very nice.
    How do you do it if the phone nr is specific per person and entered in the backend? For example in the case of a Real Estate agency where there are several agents and the code is this :

  10. Andrea
    Andrea says:

    Hi Michael,
    have you had an escenario where besides the phone number you would have to add pauses and waits ?
    I’m currently trying to accomplish so and I’m having to define the CTI characters per device type.
    for example +1111 {pause} 3{wait}
    would be:
    +111,3* on iphone
    +111p3: on android


  11. Lorne
    Lorne says:

    Handy little article!

    I took it one step further by hiding the click to call button on the desktop version of the site, and only having it display on the mobile version.

    This was accomplished by creating the div and then styling it for the mobile media query. For the desktop version I simply told the style sheet to set the visibility to hidden, and then to visible in the mobile media query.

  12. a2clicks
    a2clicks says:

    Thanks for the tip Michael.
    Do yo know if there is any trouble using “a href=”tel:”… links? I mean it is a lot like the mailto, and we all know these mails are harvested robots and used for spam. Is this the same case but with phone numbers instead of e-mail adresses? Any tip on how to prevent that?
    Tkans again!

  13. Ben Alicea
    Ben Alicea says:

    Hey guys, thus is all fine and dandy, but I am trying to figure out how to track how many people actually click on this function.. It’s great to have this on a mobile site, but you will only know if it something your customers use by tracking it.. I’m trying to figure it out in google a analytics, but am not sure how. I’m pretty sure I need to create a goal/event, but not sure exactly how those are suppose to be set up.

    Any help is appreciated.

  14. Neil Smith
    Neil Smith says:

    I am designing my new site with a call button but want it to go to a contact page if on a screen over 650 px wide. Isn’t there just a css rule I could implement for the destination of that one link. My entire goal is to not have to design 2 separate versions of my site. I have accomplished that beyond my expectations (haven’t launched it yet) but need a solution to this one issue. Any thoughts? And yes, I did read your answer to this above.

  15. Jess Carranza
    Jess Carranza says:

    I created both a PC and Mobile “call no” link on my site that looks like this:

    Call now: [ PC ] [ Mobile ]

    The PC link uses “callto” while the Mobile link uses “tel:”

    • Mitch Powell
      Mitch Powell says:

      Is “callto:” specifically for Skype? Suppose I don’t wish to rely on the user having Skype?

      From your comment, Jess, I presume that the [PC] and [Mobile] are simply two links. Is that right?

      Suppose I styled one very pretty button for my responsive site, and I wanted anyone on a device larger than a tablet to be directed to a page, like Neil is asking? Would I need a javascript or something? I wouldn’t want the desktop user to go to an error page. Is there a simple script that would accomplish this? The desktop user can obviously see that he can just pick up his phone and manually dial the number, but if the pretty button is so inviting, he might just naively click it. 😀


      • Michael David
        Michael David says:

        Nope. It’s completely independent from Skype. Skype’s annoying plugin finds ANY phone number sequence on a webpage and makes it a link to call. “callto” is more universal and is generally used by all phone devices.

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *