Pin It
512-535-2492

The TastyPlacement Blog

enjoy...

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

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!

33 Responses

  1. Syedhasan

    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.

    1. Jeff

      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. 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. 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

    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. 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.

    1. kappadev

      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??

      Thanks

      1. 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.

  6. Acardillac

    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.

  7. 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!

  8. Andy

    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 :

  9. Andrea

    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

    thanks,
    Andrea

  10. Lorne

    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.

  11. 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!

  12. Kurtis Hentschel

    A standard website very seldom translates well to your mobile platform. The mobile version of your website must be much simpler than much of your website-your menu structure may wish to be redone completely, and you might want to eliminate many of the graphics that this main site contains. Still, depending on the mobile device getting used, the visitor may choose to see your standard site, so give them the possibility if their smartphone can easily accommodate it. Provide a simple and readily-accessible toggle change so visitors can simply select the version they prefer.,,…

    My very own internet page <http://caramoanpackage.com/index.php

  13. Ben Alicea

    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. 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.

    1. 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. :D

      Thanks,
      Mitch

      1. 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