A tappable phone number is one a customer can touch to start the call, with nothing to copy or retype. On a small business site it belongs at the top of every page, in the first part a phone shows. It takes one line of plain HTML and no special software. Most problems come from a number that looks right and does nothing when touched, and you can check yours in about two minutes with the phone in your pocket.
Want this handled instead of DIY'd? See pricing and get a fixed-price quote.
A doorbell and a note taped to the door that says "please knock" both tell a visitor somebody is home. Only the doorbell does the work for them. A phone number typed on a website as ordinary text is the note: the customer has to remember ten digits, switch to the phone app, and type them back in with a thumb, possibly while holding a coffee or a leash. A tappable number is the doorbell. One touch, and the phone is ringing in your shop.
What "tappable" means
On a web page, a tappable number is a link. It works like any other link, except that instead of pointing at another page, it points at the phone's dialler. The number in these examples is made up; numbers in the 555-01 range are set aside for examples, so nobody's real phone rings.
That link has two parts. The first is its address, which is what the phone dials. It is written as tel: followed by a plus sign, a 1 and your ten digits, all run together with no spaces, dots or dashes, so 905-555-0123 becomes tel:+19055550123. The 1 is the country code Canada and the US share. The second part is the words your customer reads on the page, and those can be written any way you like, such as 905-555-0123 or (905) 555-0123. Write them the way you would say the number out loud.
When somebody taps that link on a phone, the phone app opens with the number already filled in, and one more tap places the call. Some phones show a small "Call 905-555-0123?" prompt first, which is fine. On a laptop, the browser usually hands the link to a calling app or asks which one to use; at worst nothing happens, so it does no harm there.
None of this needs JavaScript, a plugin or a widget; the tel: link is part of the web's own standards, so it needs nothing added. If somebody ever quotes you for a "click-to-call feature," this link is the feature.
Where it belongs: the first screenful
The first screenful is everything a phone shows before the reader has to scroll. On the Fort Erie page I describe putting your hours, your address and a tappable phone number up top, "where a person standing on a sidewalk in the rain can find them." That person is the one to build for. They are outside your shop, or in a parked car on Garrison Road, or on the beach at Crystal Beach with sand on their hands, and they want to know two things: are you open, and can I ask you something? Some will scroll to find out. Others will go back to the search results and tap the next business, and you will never know they were there. That is why the number goes in the header of every page: a visitor from search often lands on whatever page matched, and the header is the one thing every page shares.
Make it easy to hit. A number squeezed between two other links in small type is easy to miss with a thumb. The web's accessibility guidelines treat 24 pixels square as a minimum and 44 as the better target, about the size of a fingertip.
| Spot on the page | Who sees it there | Should the number be there? |
|---|---|---|
| Header, on every page | Anyone who landed from a search | Yes, and tappable |
| Contact page | Someone who went looking for it | Yes, large, with your hours beside it |
| Footer | Someone who read to the very end | Fine as a second copy, never the only one |
| Inside your logo or a banner photo | Nobody's thumb | Keep the picture if you like it, but add a real link nearby |
How it goes wrong
Each of these is easy to miss from a desk, which is why they last.
The number is part of a picture. The logo or the banner photo has the phone number designed right into it. It looks sharp, and it does nothing when tapped, because a picture of a number is still just a picture. A screen reader, the software a blind customer uses to have the page read aloud, may skip it entirely unless the image has a written description. Keep the design if you love it, and put a real text link beside it.
The number lives only in the footer. On a laptop the footer sits a short scroll away. On a phone, the same page stacks into one long column, and the footer can be several screens down, past every photo and paragraph. The person on the sidewalk has to read your whole page to find out how to reach you.
The number is typed as plain text. The digits were typed in and never made into a link. This one fools owners, because some phones, iPhones in particular, often spot a number-shaped string and make it tappable on their own. The owner checks on their own phone, it works, and the job looks done. On a different phone the same number may just sit there. The guess can also misfire the other way, turning an order number into a link that dials nonsense. Writing the link yourself takes the guessing out.
The link dials an old number. This is the quiet one. Because the readable part and the dialled part are separate, it is possible to update the number people see and forget the one inside the link. The screen shows your new line and a tap rings the old one. It tends to happen after a move or a phone plan change. When your number changes, ask whoever looks after the site to search for the old digits written with no spaces or dots, since that is how they appear inside the link.
Test it where your customer stands: on the sidewalk, with one free hand.
How to test it on a real phone
A desktop browser's "phone view" is fine for checking layout, but it cannot tell you what a real phone does when you tap. Use the real thing.
- Search for your business on your phone the way a stranger would, by what you do and the town, and open your site from the results. You will often land on an inside page, and that page needs to pass too.
- Before you scroll, look for the number. If you have to scroll, it is not in the first screenful.
- Tap it. The phone should offer to call your number or open the dialler with it filled in. Check every digit before you cancel.
- Repeat on the home page, one service page and the contact page.
- Borrow a phone of the other kind, an Android if you own an iPhone or the other way round, and run the same check. This is the step that catches the plain-text number.
- Do it once outdoors, one-handed. A number that is easy to hit at your desk can be fiddly in daylight with a bag on your shoulder.
- Place one real call and make sure it rings where you expect, at the hour a customer would try.
Test it where your customer stands: on the sidewalk, with one free hand. Then run it again whenever the site or your phone plan changes.
Common questions
- Does a tappable number matter if most of my customers find me on a computer?
- It costs nothing on a computer: the link usually opens a calling app or asks which to use. And you may have more phone visitors than you think. If your site has visitor statistics, look for the split between phones and computers before you decide. If it doesn't, ask your next few callers what they were holding when they looked you up.
- Is a "Call now" button better than showing the number?
- A button is fine as long as the number is on it or right beside it. Some customers want to see a 905 or 289 before they call, and some want to write it down for later. "Call 905-555-0123" reads as a number and works as a button.
- Should the link include the +1?
- Yes; it leaves the phone nothing to guess. If your customers come over from the Buffalo side, the guide to selling across the border covers what else they need from a page.
- Can I let people text me the same way?
- A matching sms: link opens the messaging app instead of the dialler. Phones handle it a little differently, so test it on both kinds first. Only add it if you will answer texts during business hours, the same as you would the phone.
Send your site's address to hello@niagarawebdesigner.com or call [905.682.4642](tel:+19056824642), and I'll run the checklist above on two phones and tell you what I find. If the answer turns out to be a new build, the guide to website costs shows what each size runs.
