If someone visits your site on their phone and has to copy your number, switch apps, and paste it into the dialer just to call you, you’ve already lost some of them. A click-to-call button removes that friction entirely — one tap and the phone is dialing.
Table of Contents
This guide walks through the exact HTML you need, how to make it look and behave like a real button, how to track the calls it generates, and the mistakes that quietly break click-to-call links on real devices.
Quick Answer
Wrap your phone number in a standard HTML link using the tel: protocol: Call Us: (555) 123-4567. Mobile browsers open the native dialer automatically; desktop browsers either prompt for a calling app or, if none is set up, do nothing harmful — so it’s safe to use site-wide.
The HTML You Need (Step by Step)
Start with the tel: link itself. The href should use the full international format — a plus sign, country code, then the number with no spaces, dashes, or parentheses, e.g. tel:+15551234567 for a US number. The visible text can (and should) be formatted normally for humans, like (555) 123-4567, since the href and the display text don’t have to match.
To make it look like an actual button instead of blue underlined text, style the anchor with CSS: give it display: inline-block, some padding, a background color, rounded corners, and a bold or larger font-size. Something like: Call (555) 123-4567 with a .call-btn class handling the visual styling.
For mobile-first placement, a common and effective pattern is a sticky call button fixed to the bottom of the screen on small viewports (using CSS position: fixed and a media query), so it’s reachable without scrolling back up. On desktop, it’s more typical to place it in the header/nav next to your other contact options, since desktop users are less likely to actually place a call from a browser tab.
Add an icon (a simple phone SVG or icon-font glyph) next to the text — it makes the button instantly recognizable as tappable, even to users skimming the page quickly.
Why It’s Worth Doing
A large share of local and service-business traffic now comes from phones, and for many of those visitors, calling is faster than filling out a form or browsing a multi-page site. A click-to-call button meets that intent directly instead of forcing a copy-paste detour.
It also shortens the path from ‘interested’ to ‘converted.’ Every extra step — finding the number, switching to the phone app, typing it in — is a chance for someone to get distracted or change their mind. Removing steps is one of the most reliable ways to improve conversion on any site.
It signals professionalism and accessibility. A visible, tappable phone number tells visitors a real person is reachable, which matters especially for service businesses (contractors, clinics, restaurants, agencies) where trust and immediacy drive the decision to reach out.
It’s also a foundation for call tracking. Once your number lives in a tel: link, you can layer analytics on top of it to see exactly how many visitors are calling, and from which pages — data you can’t get from a plain, unclickable phone number printed in text.
Tracking Clicks and Common Mistakes
To measure how well the button performs, track clicks on tel: links as events in Google Analytics 4. The standard approach is Google Tag Manager: create a trigger that fires on clicks where the link URL contains ‘tel:’, attach a GA4 Event tag to it (something like call_click), and then mark that event as a key event (conversion) in GA4’s admin panel once data is flowing. This lets you see call-button clicks by page, device, and campaign source alongside your other conversions.
Common mistake #1: leaving spaces, dashes, or parentheses in the href value. Some browsers and OS combinations mishandle these characters, causing misdials or a dialer that opens with a broken number — always strip formatting from the href itself and keep it only in the visible text.
Common mistake #2: adding tracking query strings directly onto the tel: URI (e.g., tel:+15551234567?utm_source=…). Behavior with query strings on tel: links is inconsistent across devices and dialer apps, so keep the href clean and handle tracking separately via GTM/GA4 event listeners instead.
Common mistake #3: forgetting to test on an actual phone. A tel: link can look fine in browser dev tools but fail to open the dialer correctly on iOS Safari or a specific Android browser — always tap-test on a real device before shipping.
Common mistake #4: overusing the button. A phone number repeated as a clickable button in every paragraph is visually noisy. Use it in the header, a sticky mobile bar, the footer, and near strong calls to action (like a contact or pricing section) — not on every line of text.
Explore more: More web development guides.
click-to-call button FAQs
What is the correct HTML for a click-to-call button?
Use an anchor tag with the tel: protocol in the href, formatted in international E.164 style with no spaces or symbols: Call (555) 123-4567. Style it with CSS to look like a button.
Does click-to-call work on desktop computers?
Yes, it’s safe to use site-wide. On a desktop without a calling app configured, clicking the link either does nothing or prompts the browser to pick an app — it won’t break the page. On phones, it opens the native dialer directly.
Can I track how many people click my call button?
Yes. Use Google Tag Manager to set up a trigger on clicks where the URL contains ‘tel:’, send that as an event to Google Analytics 4, and mark it as a key event so it shows up alongside your other conversions.
Should I include country code and formatting in the phone number link?
Include the country code and no formatting (no dashes, spaces, or parentheses) in the href itself for maximum compatibility, but you can display the number however you like — formatted normally — as the visible link text.
Build It With GTStudios
Need help with your website, app, or small-business tech? GTStudios builds web, apps, and software for small businesses. See how GTStudios can help.
Photo: Unknown authorUnknown author / CC0, via Wikimedia Commons.