Click-to-Call on a Contractor Website: How to Set It Up Properly

On a phone, a phone number should be something you tap, not something you memorize and retype. Click-to-call is a small change: it turns the number on your page into a link that starts a call. This guide covers how to set it up, what size it should be, and how to check it. For the wider set of reasons visitors leave without calling, see why your contractor website gets no leads.

We don't have data on how much click-to-call raises the number of calls a contractor gets, so this guide doesn't promise a number. It covers the mechanics, which are documented.

The Link Itself

A phone link uses the tel: scheme in a normal link. MDN's documentation shows the pattern, with the number in the address and readable text for the visitor:

• <a href="tel:+12045550123">(204) 555-0123</a>

That number is a made-up example. Use your own, written in international format with the plus sign and country code, which MDN shows as supported. Make the visible text the number itself, so a visitor knows what they're about to call.

What Happens When Someone Taps It

MDN notes that tel: link behavior varies with device. Cellular devices autodial the number. Other devices may open a calling app, save the number to contacts, or send it to another device. Because the result varies, keep the number readable as text too.

Make It Easy to Hit

Tap target size matters because a phone number in small text next to other links is easy to miss. Lighthouse, Google's auditing tool, says tap targets that are 48 px by 48 px never fail its audit, and that 8 px between targets is a good starting point but is not always enough spacing for very small targets (Lighthouse tap targets). Use that as your working rule: make the link, or a button containing it, at least 48 by 48 pixels, with space around it.

Where to Put It

Where a phone link goes is a design choice, and we don't have evidence for one placement over another. A reasonable default is:

• In the header, where it's visible without scrolling on every page.
• In or next to your contact form, since some visitors may prefer to call rather than fill out a form.
• On your contact and service pages, wherever a visitor might decide to call.

Make every occurrence of your number a link, not just the header one.

Keep the Number Consistent

Use the same number everywhere your business appears. Google's Business Profile guidelines say to use a local phone number instead of a central call center helpline whenever possible, and that the number must be under the direct control of the business (guidelines). If you use call tracking, decide which number is your main one before you change anything, and keep it consistent with your profile. The profile checklist covers the phone-number item.

Test It on a Real Phone

• Open your site on a phone and tap every phone number. Each one should start a call, or prompt to.
• Check that the number is readable without zooming.
• Tap it with a thumb, one-handed, as if you were standing on a job site.
• Try it on both an iPhone and an Android phone if you can.

Measure It

Set up a click event for links that start with tel: in your analytics tool, so you can count taps and compare them with the calls you actually receive. Without a measurement you can't tell whether a change helped. The exact steps depend on your analytics setup, so check its documentation.

Related Guides

• Why Your Contractor Website Gets No Leads (Even With Traffic)