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:
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.
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.
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.
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!
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???
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
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.
Thanks.
Genifer
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.
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
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.
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.
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!
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 :
Tq for sharing. I’ve been looking for this. Will give a try.
Thanks Michael. I used it in a cool button link, works great.
Excellent technique for Pay per Call Campagins for affiliate marketing. This is gold! Thanks Michael.
Nice I used it today. Cool code! Love the Click to call function for mobile websites.
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
whoa man, you got me…we have never implemented that. If you come up with a solution, please post another comment and we’ll publish it.
I am using a free wordpress site…,I an gonna try it on my site. Hope it works… Thanks
For WordPress websites is possible to use this: http://wordpress.org/extend/plugins/call-now-button.
Please, see and this: http://wordpress.org/extend/plugins/search.php?q=call
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.
Can you post this code please?
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!
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.
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.
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:”
Hmmn…that’s a pretty good idea.
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
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.
Thank you, i add call button on my site.
Too easy, i found out there is a list on the net see http://en.wikipedia.org/wiki/URI_scheme#callto
many thanks
This is great. So easy! I was wondering how to do this, can’t believe it was that simple. Good tutorial.
I like how this is an alternative to a heavy plugin. I was always using Plugins for this for client sites, but I will give this a try now!
I am using the call now button Plugin for wordpress review, but can not be accessed Appears when AMP version, please anyone can help ..