Guides

Tap-to-Call on Every Screen: The Trade Website Setup

The call button is the most-used element on a trade website and most sites get it wrong. Placement, the tel link, hours beside it, a sticky bar on phones.

5 min read
GuidesTradesConversion
853 words5 min read

The most important button on the site

For a trade business, the majority of website enquiries are still calls, and the majority of visitors are on phones. A call button that is visible without scrolling, opens the dialler in one tap, and appears on every page is worth more than every other element combined. Yet on most trade sites the number is text in the footer, or in a header that scrolls away, or only on the Contact page.

Here is how to place it, build it and measure it.

Placement

Header, every page. A button, not text, at the top right on phones, reading "Call now" or the number itself, visible on landing. It stays in view: either the header is sticky or a slim bar with Call and Quote buttons fixes to the bottom of the phone screen, where the thumb rests. The bottom bar is what the best trade sites use; it never leaves and it does not cover content.

After every section. A call button under the hero, after the services list, after the reviews, at the end of every service and area page. A visitor who has just read about your boiler repairs should not have to scroll back up.

On the quote form. "Emergency? Call [number] instead." beside the submit button.

HTML
<a href="tel:+441234567890" class="call-button">
  Call 01234 567890
</a>

Full international format in the href so it dials from any phone; local format in the visible text so it reads naturally. On desktop the link still works with click-to-call apps and shows the number for copying.

Hours beside it

The single most useful addition: "Mon to Sat, 7am to 7pm" or "24/7 emergencies" in small text beside or under the button. A caller who knows you are open dials; one who does not know may not bother. If hours differ for emergencies, say both.

A text alternative

Many customers, especially younger ones and anyone at work, prefer to message. A second button, "Text a photo", opening an SMS or WhatsApp to your number with a pre-filled first line ("Hi, I'd like a quote for…"), placed beside Call. It arrives with the picture and it works when you cannot answer.

HTML
<a href="sms:+441234567890?body=Hi%2C%20I%27d%20like%20a%20quote%20for%20">Text a photo</a>
<a href="https://wa.me/441234567890?text=Hi%2C%20I%27d%20like%20a%20quote%20for%20">WhatsApp</a>

Emergency routing

If you run an emergency service, it needs its own path. An "Emergency" button, visually distinct, on the home page and header, leading to an emergency page with the emergency number (if different), what counts, what to do now, and the fee. If the same number handles both, the button still helps: the emergency caller does not hesitate.

Out of hours, the voicemail says how emergencies are handled and points quote requests to the photo form.

What not to do

  • A number as plain text. Customers cannot tap it.
  • A number only in the footer or on the Contact page.
  • A header that scrolls away with the number in it, and nothing sticky.
  • A "Call" button that opens a contact form.
  • A tracking number from a lead-gen company that you do not own.
  • Multiple numbers on the page without saying which is for what.

Tracking

Taps on tel: links fire a contact_click event with method: phone and the page as a parameter. That counts intent, not completed calls; a desktop visitor who reads the number and dials from their phone is missed. Two upgrades:

  • A dedicated website number you own, forwarding to your mobile, so any call to it is known to be from the site. Cheap, and it also tells you at the moment of answering that this is a website enquiry.
  • Call tracking that shows a unique number per visitor source and reports calls back to analytics with duration. Worth it for firms spending on ads.

Either way, count website calls monthly alongside quote requests, by page and town.

Accessibility

The button has a visible text label, not only an icon. Sufficient contrast. Large enough to tap (at least 44 pixels). Focusable and labelled for screen readers ("Call [firm] on [number]").

The sticky bottom bar

The pattern that performs best on phones:

  • Fixed to the bottom of the viewport, full width, two or three buttons: Call, Text or WhatsApp, Get a quote.
  • Shown only on phones; on desktop the header buttons suffice.
  • Padding for the phone's home indicator so it is not obscured.
  • Hidden or reduced when the quote form itself is on screen, so it does not cover the submit button.

Visitors on any page, at any scroll position, are one tap from a call. This alone moves conversion on most trade sites we rebuild.

Where this sits

Tap-to-call in the header, after every section and in a sticky bottom bar on phones, with hours beside it, a text alternative and tracking, is part of every trade website we build, and moving a number out of the footer into a button is the fastest fix in a trade diagnosis. It is not sophisticated. It is where the phone is.

All writingSee packages and prices