BOOK A FREE CALL
Back to blog

Click to Call Button: How to Add One That Wins Calls

Abstract geometric call-action title card

A click to call button is a link that opens the phone app on a visitor’s device with your number ready to dial. You build it with a standard HTML tel: link, style it so it looks like a button, and place it where a customer with a leaking roof or a dead boiler will see it without scrolling. The code takes two minutes. Getting the placement, wording, accessibility and tracking right is what separates a button that quietly collects dust from one that rings your phone.

This guide is written for UK trade businesses, with Corsham and wider Wiltshire in mind, but the method works anywhere in the country.

Tkmarketing
Turn Your Website Into More Calls
TK Marketing builds SEO-optimised websites for UK trade businesses, with conversion-focused design and monthly updates, hosting and security checks.
Visit TK Marketing

TL;DR

  • Use a real link with a tel: address in international format (for example tel:+441234567890), then style it as a button. Do not build it from a div or span.
  • Put it in the header, in the first screen on mobile and again after your key proof points. Show the full number as text as well, because desktop visitors often have no calling app.
  • Keep the number consistent with your Google Business Profile. Google asks for a number that connects to your own business location, not a redirect.
  • A click is not a call and not a job. Measure clicks, compare them with call records, and never expect any button to guarantee calls or rankings.
  • A customer-initiated call is fine under UK marketing rules, but your follow-up calling is a separate matter governed by PECR.

Table of Contents

What a click to call button actually is

It is a clickable phone action, usually labelled “Call us”, “Call now” or “Get a quote”. When someone taps it on a phone, the device hands the number to its calling app. The underlying mechanism is a telephone link, which MDN documents as the telephone-number URL scheme used alongside its button guidance.

People search for the same thing under different names: tap to call, click to call website, call now button. They all mean the same pattern. The visible control can be text, an icon or both. What matters is that a stranger understands in under a second what will happen when they press it.

It is worth being clear about what it is not. It is not a call-back widget, a live chat tool or a tracking number. Those are separate products with their own costs and rules. For most sole traders and small firms, a plain tel: link does the job.

How to build one, step by step

Use an anchor element whose href starts with tel: and whose number is in international format, with the +44 prefix and no leading zero:

<a href="tel:+441234567890" class="call-btn" aria-label="Call us on 01234 567890">Call 01234 567890</a>

The visible text uses the familiar UK format with the leading zero, because that is how your customers read numbers. The href uses +44 so it dials correctly from any device, including phones with foreign SIMs.

One point from the top search results is worth answering directly. People ask how to stop the button “navigating away” to a different page. That usually happens when a script or a wrong href is attached. A correct tel: link does not load a new page; the phone simply opens its dialler.

2. Style it like a button

Give the link padding, a strong background colour, readable text and a minimum tap area. A target of roughly 44 by 44 pixels is a widely used rule of thumb for fingers on touchscreens. MDN’s mobile accessibility guidance tells developers to make sure interface controls such as buttons work on touchscreens as well as with a mouse and keyboard.

A simple CSS starting point:

.call-btn { display:inline-block; padding:14px 22px; background:#0a7d3b; color:#fff; font-weight:700; border-radius:6px; text-decoration:none; }
.call-btn:focus-visible { outline:3px solid #000; outline-offset:2px; }

Keep a visible focus outline. Keyboard users need to see where they are.

This is the most common implementation mistake. A div or span can look exactly like a button and still fail people who use a keyboard or screen reader. MDN’s ARIA button role page explains that adding role="button" tells a screen reader what the element is but does not supply the usual keyboard behaviour. A real anchor is focusable and operable by default.

Avoid mouse-only JavaScript click handlers for the same reason. If a plugin or builder asks you to paste a script to make the number dial, ask whether a plain link would do the same job. It almost always does.

4. Test on real devices

Before you call it finished:

  1. Tap it on an iPhone and an Android phone and confirm the right number appears in the dialler.
  2. Tab to it with a keyboard and press Enter.
  3. Click it on a laptop and see what happens. Behaviour varies, because a computer may have no configured phone application.
  4. Read the number aloud from the screen. Does it match your van, your invoices and your Google profile?

Where to put it on a trade website

A button is only useful if it is there at the moment of intent. For a tradesperson, intent is often urgent: a burst pipe, a missing roof tile, a power cut. Think about where those visitors are looking.

Placement Why it works Watch out for
Header, top right on mobile Visible on arrival, no scrolling Do not crowd it with a menu icon of the same size
Sticky bar at the bottom of the phone screen Always in thumb reach Do not cover cookie notices or form fields
After the opening paragraph Catches visitors who have just read your offer Keep wording specific, not just “Click here”
End of each service page Natural next step after reading about a job Match the service, for example “Call about a new boiler”
Contact page, above the form Gives the phone-first visitor a quicker option Keep the form for people who prefer to write

Do not let one visitor type dictate everything. Some people will not call. Provide the full number as plain text, plus an enquiry form or email alternative. A desktop visitor on a laptop cannot ring from the page, and may want to copy the number and call from a handset.

Wording that gets pressed

A recognisable label beats a clever one. “Call us”, “Call now” and “Get a quote” are all familiar. For trades, adding the specific job and the number inside the button often helps, because it answers the question the visitor is asking.

Some examples:

  • “Call 01234 567890” on a plain homepage header.
  • “Call for a free roof inspection quote” only if you actually offer that, with the terms stated on the page.
  • “Call about an emergency repair” only if you really do answer emergencies, and say your hours near the button.

Only promise what you deliver. If you do not answer after 5pm, say so, or the first thing a late-evening visitor experiences is an unanswered ring.

Keep the button and your Google Business Profile telling the same story

For many local trades, the first contact is not your website at all. It is the Google Business Profile that appears in Search and Maps. Google explains that service businesses can be service-area or hybrid businesses, and that profiles can show website, phone number, hours, reviews and services.

Your button should support the profile, not compete with it. Three practical rules follow from Google’s guidance:

  1. Use a number that goes straight to you. Google’s guidelines ask for a phone number that connects to your individual business location, suggest a local number rather than a central call-centre line where possible, and prohibit numbers that redirect to another business.
  2. Make the extra numbers match. Google lets you add up to two additional numbers beside the primary one. If your website, van and profile show three different numbers, customers and Google both see inconsistency.
  3. Be clear about your service area. A contractor based in Corsham and covering Chippenham, Melksham, Bath and the rest of Wiltshire should say so on the site and in the profile, in the same words.

If you want a deeper look at setting up the profile properly, our guides on Google Business Profile for contractors and five quick actions for UK trades walk through the steps. If you have ever had a listing suspended, the page on getting reinstated explains what to do.

Measuring whether it works

Here is the honest bit. A click on a call button tells you someone intended to ring. It does not tell you the call connected, that you answered, or that it became a job. Treat it as an enquiry-intent metric.

What Google reports

Google’s Business Profile performance report separates Calls, website clicks, views, searches, directions, messages and bookings. Its “Calls” figure counts clicks on the profile’s call button, which is a different thing from clicks to your website. Search-query data updates at the start of each month and can take up to five days to appear, and availability varies by business.

What to do with the numbers

  • Record website call-button clicks as an event in your analytics tool, labelled by page and by button position.
  • Compare them month by month with the profile’s Calls figure.
  • Reconcile both against your phone’s call log. If you ring back missed calls, note those too.
  • Keep a simple note of when you change the number, redesign a page or start a campaign, so you can explain jumps later.
  • Ask each caller how they found you and write it down. It costs nothing and often beats analytics.

Think of it as a funnel: visibility creates profile visits, the profile or website prompts a call action, and only your call records or job book show whether enquiries became estimates and booked work. If you want a wider view of calls-to-action as a whole, this piece on why strong CTAs matter for conversions is a useful companion read.

No button can guarantee rankings, calls or revenue. A better button can remove friction, but it cannot create demand where nobody is searching, and it cannot make up for a thin page, weak reviews or an unanswered phone.

The UK rules worth knowing

A click to call button starts an inbound call that the customer chose to make. It does not authorise you to make outbound marketing calls later. Those are governed by the Privacy and Electronic Communications Regulations (PECR).

GOV.UK’s direct marketing guidance says you must say who you are when you make a telesales call and give your address or phone number if asked, and it covers restrictions on unsolicited calls to numbers on the Telephone Preference Service. The same page states that penalties can reach £500,000 for each unsolicited phone call. The regulations themselves set out the rules on calls for direct marketing purposes.

In practice for a trade business:

  • A customer who rings you about a quote can reasonably be called back about that quote.
  • Do not use a captured number to run promotional call campaigns unless you hold the appropriate consent, and keep a suppression list of people who have said no.
  • If you are unsure where your follow-up process sits, ask the Information Commissioner’s Office or a solicitor who handles data protection. This article is general guidance, not legal advice.

This is a point about follow-up calling and lead handling. It is not a reason to avoid a customer-initiated tel: link.

Our perspective: the button is the last step, not the first

We build websites for UK trades, and we see the same pattern often. A business adds a bright “Call now” button to a site that is slow, vague about what the firm does, or missing from local search, and then wonders why the phone stays quiet. The button is not the problem. It is just the last step in a chain.

The chain starts with being found: a Google Business Profile with the right categories, services and service area. It continues with a page that loads quickly on a phone, says plainly what you do and where, and shows proof such as reviews and recent work. Only then does the button earn its keep, because the visitor already trusts you enough to ring.

Our perspective: the button is the last step, not the first — overview diagram

This is why our sites are built around enquiries going to the phone, with written content supplied so you are not left staring at a blank page. We also think the work does not stop at launch. Numbers change, opening hours change, services come and go, and a site that is not kept up gradually stops matching your profile. That is the reason we offer monthly management covering updates, hosting and security checks.

We will not tell you a button will double your calls. Nobody honest can promise that. What we can say is that a clean, native tel link, placed sensibly and matched to a well-kept profile, removes avoidable reasons for a customer to give up and ring someone else.

— Trey

Common mistakes to avoid

  • Number in an image. Customers cannot tap it, copy it or have a screen reader read it.
  • Local-format href. Writing tel:01234567890 can work on some devices, but the international form is more reliable everywhere.
  • A different number on every page. Pick one primary number and use it everywhere unless you deliberately track sources, in which case read Google’s rules on redirecting numbers first.
  • Button hidden by a cookie banner or chat bubble. Check the mobile screen with every overlay showing.
  • No alternative. Provide a form or email for people who cannot or prefer not to phone. Some customers are deaf or hard of hearing, and some simply do not want to talk.
  • Tiny tap target. If a thumb can hit the wrong thing, it will.
  • Not checking it after redesigns. Plugins, themes and page builders can quietly change how links behave. Test after every significant update.

Plugin, builder or hand-coded?

You have three routes, and none of them is wrong.

Hand-coded link. Free, light and reliable. Best if you or your developer can edit templates.

Website builder button. Most builders have a call button element that outputs a tel: link. Check the generated link goes to the number you want and that it can be reached by keyboard.

WordPress plugin. Several plugins add a floating call button for mobile visitors. They are quick, but each is another piece of software to keep updated and secure, and some add scripts you do not need. If you use one, review its settings for which pages and devices it shows on, and keep it updated.

Whichever you choose, the checks above apply: native link, correct number, visible focus, tested on real phones.

How we can help

If you would rather have this handled than wire it up yourself, we build trade websites with enquiries going to the phone and aim to complete them in 10 to 14 days. Our pricing page lists the plans: Shopfront at 39 GBP per month with a 299 GBP one-off setup, Shopfront Plus at 59 GBP per month with a 399 GBP one-off setup, and Website Max at 499 GBP per month with a 599 GBP one-off setup. If you prefer a one-off build, a WordPress website is 599 GBP, and an AI-assisted framework website is 35 GBP per month or 350 GBP per year; details are on our web design page.

We also handle the profile side. Google Business Profile management is available, with monthly management from 20 GBP per month. You can see how we present trade work in our portfolio, or read the wider picture in contractor lead generation: 7 UK channels ranked.

A quick checklist before you publish

  1. The href starts with tel: and uses +44 with no leading zero.
  2. The visible number is written in normal UK format and matches your profile.
  3. The button is a real link, not a div or span.
  4. It sits in the header, on mobile in the first screen, and at the end of service pages.
  5. Tap target is comfortably large and focus outline is visible.
  6. The full number also appears as plain text.
  7. A form or email is offered as an alternative.
  8. Click events are recorded and you have a way to compare them with your call log.
  9. Your opening hours are stated near the button.
  10. Your follow-up calling process respects PECR and the Telephone Preference Service.

FAQ

Use an anchor with an href beginning tel: followed by the number in international format, such as tel:+441234567890. Put your normal UK-format number as the visible text, then style the link as a button. Test it on an iPhone and an Android phone before you publish.

Does a click to call button work on a desktop computer?

Only if the computer has a calling application set up, which many do not. Behaviour varies by browser and device. That is why you should always show the full number as text and offer a form or email as well.

What does “click to call” mean?

It means a visitor can start a phone call by pressing a button or link instead of typing the number. On phones the device opens its dialler with your number ready. The visitor still presses the call key, so it starts a call the customer chose to make.

Can I see how many calls my button generates?

You can see how many people clicked it by recording a click event in your analytics, and Google’s profile report counts clicks on the profile’s call button separately. A click is not proof that a call connected or became a job, so compare the figures with your own call records.

Sources

CallWhatsApp