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: one tap and the phone is dialing.
Table of Contents
This guide gives you the exact click-to-call HTML to copy, shows how to format the phone number so the link dials correctly, and covers turning that link into a real button, including a free no-code option, a sticky call-us bar for mobile, a setup for service businesses like salons, and how to track clicks in GA4.
Quick Answer
A click-to-call link is a normal HTML anchor whose href uses the tel: scheme, followed by the number in international format: Call Us: (555) 123-4567. On a phone, tapping it opens the dialer with the number filled in. On a desktop, it may open a calling app if one is set up, and otherwise does nothing harmful, so it’s safe to use site-wide.
You don’t need to write any code to get one: most WordPress themes, page builders, and website builders let you paste a tel: link into a button block’s URL field, and several free widgets and plugins add a floating call button for you.
Click-to-Call HTML Code (Copy and Paste)
Here is the minimum click-to-call HTML: Call Us: (555) 123-4567. The href is what the phone actually dials. The text between the tags is only what people read, so the two don’t have to match exactly — you can use a call to action like “Call now” or “Talk to a person”, but showing the real number usually converts better because visitors can see what they’re about to dial before they tap.
You can put this link anywhere HTML is allowed: a header or footer widget, a WordPress custom HTML block, a page builder button element, or wrapped around an image or phone icon. On most website builders (Wix, Squarespace, Shopify, WordPress block editor), you personalize the button by adding a Button element, then set its link to tel:+15551234567 and style the text, color, and size like any other button — no custom code required.
How to Format the Phone Number in a tel: Link
Use the full international format in the href: a plus sign, the country code, then the digits with no spaces, dashes, dots, or parentheses. For a US number, that’s tel:+15551234567. Including the country code means the link dials correctly no matter where the visitor is or which carrier they use, which matters if you get any out-of-area or international traffic.
The tel: specification (RFC 3966) technically allows visual separators like hyphens and parentheses, and some browser documentation shows examples with them. Stripping them is still the safer habit — it removes any chance of a browser, dialer app, or call-tracking script mishandling the number.
For an extension, RFC 3966 defines the ;ext= parameter as the standard way to include one, for example tel:+15550100;ext=123 — the tel: URI spec doesn’t include comma or pause characters at all. Device support for ;ext= still varies, and some dialer apps instead honor a comma added after the number as an informal, non-standard pause before the extension digits (tel:+15551234567,123), even though that’s outside the spec. Test whichever you use on both iPhone and Android, and consider linking to a direct line if the extension proves unreliable.
Turn the Link Into a Call Button (CSS)
A bare tel: link just looks like blue underlined text. To make a real web call button, give the anchor a class and style it: Call (555) 123-4567 with CSS like .call-btn { display: inline-block; padding: 14px 24px; background: #1a7f37; color: #fff; font-weight: 700; font-size: 1.1rem; border-radius: 8px; text-decoration: none; }
Keep the tap target comfortably large (at least 44 by 44 pixels is a common accessibility guideline), use strong color contrast, and add a small phone icon next to the text so the button is recognizable at a glance. If you want every phone link on the site styled the same way without adding a class to each one, the CSS attribute selector a[href^=”tel:”] targets all of them at once.
Add a Sticky Call Us Button for Mobile
The most effective placement for a call button on a website is a bar fixed to the bottom of the screen on small viewports, so it stays reachable without scrolling back up. Hide it by default, then show it only inside a max-width media query, and position it with position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000.
Add the markup, such as Call Us, just before the closing body tag, and leave a little bottom padding on the page so the bar doesn’t cover your footer. On desktop, the same media query hides the bar; put a normal call button or plain number in the header instead, since desktop visitors are less likely to place a call from a browser tab.
Free Ways to Add a Click-to-Call Button (No Code)
You don’t need a developer or a paid tool to get a working click-to-call button. The HTML above is free to copy and paste into any custom HTML block. If you’d rather not touch code at all, every major WordPress page builder (Elementor, Divi, Block editor) and website builder has a Button or Link element where you type tel:+15551234567 into the URL field — that alone makes it a working call button.
For a floating call button that follows visitors down the page, free WordPress plugins such as Call Now Button and free widget tools like Elfsight’s click-to-call button or Common Ninja’s call button widget generate the embed code for you, including basic customization of color, position, and icon on their free tiers. These are a fast option if your site builder doesn’t support sticky/fixed positioning natively.
Adding Click-to-Call to a Salon or Service-Business Website
Salons, barbershops, and other appointment-based businesses get an extra benefit from click-to-call: it’s the fastest path for the questions online booking can’t answer — same-day openings, walk-in availability, rescheduling, or a quick question about a service. Put the call button next to, not instead of, your booking button, so visitors can choose whichever is faster for them.
A common layout is a header with two buttons side by side — “Book Online” linking to your scheduling tool and “Call Us” using the tel: link above — plus the sticky mobile call bar from the previous section so the phone number stays one tap away while someone scrolls through your services or stylist bios. If your booking widget is an iframe or third-party embed, the click-to-call button sits completely outside it, so there’s no conflict between the two.
Does Click-to-Call Work on Desktop?
It depends on the device. Phones dial directly. On computers, the result varies — the operating system may hand the number to an installed calling app, offer to save it to contacts, or send it to a paired phone, and if nothing is configured, clicking may do nothing. It won’t break your page either way.
Because desktop behavior is unpredictable, always show the number as visible text, not only as a button label, so desktop visitors can read it and dial from their own phone. You can also show the clickable button only on mobile with a media query and leave plain, readable text on larger screens.
Tracking Click-to-Call Clicks in GA4
This is one spot people get tripped up: GA4’s Enhanced Measurement automatically tracks outbound link clicks, but a tel: link isn’t treated as an outbound click, so it is not tracked automatically out of the box. You have to add a trigger for it yourself.
The straightforward way is Google Tag Manager: create a Click trigger that fires when Click URL contains tel:, attach it to a GA4 event tag (for example, name it call_click), and publish the container. If you’d rather avoid GTM, a WordPress analytics plugin that supports tel: link tracking (several popular GA4 plugins offer this as a built-in option) can fire the same kind of event without custom code. Once the event is flowing into GA4, mark it as a key event under Admin so call clicks show up in your conversion reporting alongside form submissions and other goals.
Common Click-to-Call Mistakes
Formatting the number with spaces, dashes, or parentheses left inside the href instead of stripping them out, which can cause some dialers or tracking scripts to misread the number. Forgetting the country code, which mostly works for local visitors but breaks for anyone dialing from outside the area. Making the only visible phone number a non-clickable image, so mobile visitors can’t tap it at all. And placing the number only in the footer, so a visitor has to scroll past everything else to find it — a header button and a mobile sticky bar fix that.
Click-to-Call Button FAQs
What is the correct HTML for a click-to-call button?
An anchor tag with an href that starts with tel: followed by the number in international format, such as Call Us: (555) 123-4567. Style the anchor with CSS to make it look like a button instead of a plain text link.
How do I make a click-to-call link?
Write the number as tel:+ then the country code and digits with no spaces or punctuation, and put it in an anchor’s href attribute, for example tel:+15551234567. The text inside the tags can show the number formatted however you like for readers.
Is there a free way to add a click-to-call button without coding?
Yes. Paste a tel: link into any page builder’s button URL field, or use a free widget or WordPress plugin such as Call Now Button, Elfsight, or Common Ninja to generate a floating call button with no code.
Does click-to-call work on desktop computers?
It varies by device. Phones always dial directly, but on a desktop the link may open a calling app, offer to save the contact, or do nothing if no calling app is configured. Always show the number as readable text too, not just as a button.
Can I track how many people click my call button?
Yes, but not automatically. GA4’s Enhanced Measurement doesn’t track tel: links as outbound clicks by default, so you need a Google Tag Manager trigger (Click URL contains tel:) feeding a GA4 event, or a plugin that adds that tracking for you.
Should I include the country code and formatting in the phone number link?
Include the country code in the href (for example +1 for the US) so the link dials correctly for every visitor. Strip spaces, dashes, dots, and parentheses from the href itself, and keep that formatting only in the visible text.
How do I add an extension to a click-to-call link?
RFC 3966, the tel: URI spec, defines the ;ext= parameter for this, like tel:+15550100;ext=123 — commas and other pause characters aren’t part of the spec at all. Device support for ;ext= is still inconsistent, and some dialers instead honor a non-standard comma as a pause before the extension digits (tel:+15551234567,123). Test whichever you use on both iPhone and Android before relying on it.
How do I show the call button only on mobile?
Hide the button by default with CSS and reveal it inside a max-width media query, for example @media (max-width: 768px) { .call-bar { display: block; } }, so desktop visitors see a plain number or no button at all.
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.
Want dev news in your inbox? Subscribe to the free newsletter.