Click to Call HTML: add a call button in one line of code

To add click-to-call in HTML, use an anchor tag with the tel: scheme and the full international number: <a href="tel:+12025550123">Call (202) 555-0123</a>. On a phone, a tap opens the dialer with the number filled in. Keep the href in E.164 format (plus sign, country code, digits only) and show a readable number as the link text.

<a href="tel:+12025550123">Call (202) 555-0123</a>

Below: button styling, mobile and desktop behavior, number formatting, a sticky call-now bar, and how to tell which clicks became calls.

How to Add a Click-to-Call Link in HTML

One anchor tag makes the phone number on your site dial when a visitor taps it. No plugin or script required.

The basic tel: link

A click-to-call link has two parts that do different jobs:

• The href tells the device what to dial. It starts with tel:, followed by the number in international format: tel:+12025550123.
• The link text is what visitors read. Format it the way your customers expect to see a number, such as (202) 555-0123, or use a short label that includes the number.

Put the number itself in the link text. "Call (202) 555-0123" tells screen reader users, desktop visitors and search engines what the link does. "Click here" does not.

Turn the link into a button

A button is still a link. Add a class to the anchor and style it with CSS:

<a class="call-btn" href="tel:+12025550123">Call (202) 555-0123</a>

.call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 20px;
  border-radius: 8px;
  background: #0b5fff;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.call-btn:hover {
  background: #0848c2;
}

.call-btn:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}

Two details matter more than the color. Make the tap target at least 44 by 44 CSS pixels, the size WCAG's enhanced target-size guidance uses. Keep a visible focus style for keyboard users, and check color contrast before you ship.

Using a button element with JavaScript

Some frameworks and design systems only hand you a <button>. In that case, send the browser to the tel: URL when it is clicked:

<button type="button" class="call-btn" id="call-now">Call (202) 555-0123</button>

document.getElementById('call-now').addEventListener('click', function () {
  window.location.href = 'tel:+12025550123';
});

Use this only when you have to. A plain <a href="tel:"> is simpler, works with JavaScript turned off, and is easier for assistive technology and crawlers to understand.

How to Format Phone Numbers for tel: Links

When a click-to-call link fails, the number format is the usual suspect. The fix is to write the href in E.164, the international numbering format defined by ITU-T E.164:

1. Start with a plus sign.
2. Add the country code (1 for the US and Canada).
3. Add the full subscriber number, including the area code.
4. Remove spaces, dashes, dots and parentheses.

So (202) 555-0123 becomes tel:+12025550123. An E.164 number has at most 15 digits after the plus sign. IETF RFC 3966, which defines the tel: URI, calls this the global form and recommends it for numbers published where anyone, anywhere, might dial them. RFC 3966 allows visual separators such as dashes, but bare digits are least likely to trip up a dialer or your analytics filters.

Extensions and pauses

RFC 3966 defines an extension parameter for numbers behind a phone system:

<a href="tel:+12025550123;ext=204">Call (202) 555-0123, ext. 204</a>

Some sites instead append a comma (a pause on many dialers) and the extension digits. Support for both varies by phone and dialer app, so test on the devices your customers use. If an extension matters, also print it in the link text so the caller can enter it by hand.

International and toll-free numbers

For numbers outside North America, drop the domestic trunk prefix (often a leading 0) and put the country code in its place. A UK number written locally as 020 followed by eight digits becomes +44 20 followed by the same eight digits. Toll-free numbers in the US and Canada use the same pattern as any other number: +1, then all ten digits, as in tel:+18005550199. Some toll-free numbers cannot be reached from abroad.

How Click-to-Call Works on Mobile and Desktop

On a smartphone, tapping a tel: link opens the phone app with the number already entered. In the common setups, the visitor still presses call or confirms a prompt before the call is placed.

On a desktop or laptop, there is no built-in dialer. The browser hands the link to whatever app the operating system has registered for tel: links, such as a calling app or a business softphone, or it asks the visitor to choose one. If nothing is registered, the click may appear to do nothing.

That is why the readable number belongs in the link text. A desktop visitor who cannot place the call from the browser can still read the number and dial it.

How to Add a Click-to-Call Button in WordPress, Wix, Squarespace, Webflow & Shopify

In a visual editor you rarely need raw HTML. Each platform below offers two paths: set a button or text link to the URL tel:+12025550123, or paste the anchor tag into an HTML or code element. Menu names change often, so start from the link settings on your existing button.

WordPress

In the block editor, add a Custom HTML block and paste the anchor tag, or select a Button block and enter the tel: URL as its link. Page builders work the same way.

Wix

Select the button or text, open its link settings and look for a phone number option or a web address field. Enter the full number with country code.

Squarespace

Edit the button or text link and enter the tel: URL in the link field. For a styled button of your own, paste the anchor tag into a code block.

Webflow

Select a Link Block, Button or text link, open its link settings and enter the tel: URL. Your class-based styles from the Designer apply as usual.

Shopify

In the theme editor, add the tel: URL as the link on a button, or paste the anchor tag into a section that accepts custom HTML or Liquid. Test the result on a phone after you publish the theme change.

How to Make a Sticky Call Now Button

A call bar pinned to the bottom of the screen keeps the number one tap away on every mobile page. Add the link once, near the end of your page template:

<a class="call-bar" href="tel:+12025550123">Call now: (202) 555-0123</a>

.call-bar {
  display: none;
}

@media (max-width: 767px) {
  .call-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    min-height: 52px;
    padding-bottom: env(safe-area-inset-bottom);
    background: #0b5fff;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
  }

  body {
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
  }
}

The media query shows the bar on small screens only. The env(safe-area-inset-bottom) padding keeps it clear of the home indicator on newer phones and only takes effect when your viewport meta tag includes viewport-fit=cover. The body padding stops the bar from covering your footer or form buttons. Keep "Call now" and the number in the bar, not just an icon.

Other HTML Links That Start a Conversation

The same pattern works for text and email:

<a href="sms:+12025550123">Text us at (202) 555-0123</a>
<a href="mailto:hello@example.com">Email hello@example.com</a>
<a href="callto:+12025550123">Call (legacy callto: scheme)</a>

callto: is a legacy scheme associated with Skype. It only works where an installed app has registered it, and phones generally do not treat it as a phone number. Use tel: for anything a visitor should be able to dial.

How to Track Click-to-Call Clicks

To count taps, in a tag manager create a link click trigger that fires when the clicked URL starts with tel:, and send it to your analytics tool as an event. For the full setup in GA4, follow our guide to track phone calls in Google Analytics. To count taps as Google Ads conversions, see Google's guide to tracking calls to a phone number on a website.

A click is not a call

A tap proves intent, and that is all it proves. It does not tell you whether the visitor confirmed the call, whether anyone answered, how long the conversation lasted or whether it turned into a booked job or a sale. If your team reports tel: clicks as "calls," the number looks precise and is not. Revenue is decided on the calls themselves, and click events never see them.

Click-to-Call vs Call Tracking Numbers

Click tracking counts taps on the page. Call tracking gives each marketing source its own phone number, so the call itself, whether it came from a tap, a typed number or a printed ad, is attributed to the source that drove it. Add conversation analytics and you also see what happened on the call.

On a website, dynamic number insertion swaps the number a visitor sees based on how they arrived. Whatever tool you use, make sure the swap updates both the visible text and the tel: href. If only the text changes, a tap dials the original number and the call loses its source.

You need both: one makes calling easy, the other shows which campaigns produced the calls that mattered.

Can You Build Click-to-Call With the Convirza API or an AI Assistant?

Yes, for two jobs: calls your own team places from a web app, and reporting on the calls your website buttons drive. The tel: link on a public page stays plain HTML.

Click-to-call inside your own web app

If your team calls customers from a CRM, a contact list or another web app you build, the Convirza Dialer SDK adds a browser softphone to it. Once the widget is set up, one line places a call from any phone number link in your app:

convirzaDialer.call('+12025550123');

Every call placed through the SDK lands in Convirza with recording, transcription and conversation analytics, on the same pipeline as your tracked inbound calls. The SDK signs in as a Convirza dialer user and needs the Dialer feature enabled on your account, so it is built for your team, not for anonymous website visitors.

Ask your AI assistant about the calls your buttons drive

When the number in your button is a Convirza tracking number, each call it drives is in your Convirza account. Add the hosted Convirza MCP server, https://connect.convirza.com/mcp, to Claude, ChatGPT (in developer mode), Cursor or another MCP client, sign in on Convirza's page, and ask in plain language:

• "Which campaigns and sources are driving the most calls?"
• "Get call 12345678 and show me the transcript and how it scored."

The assistant works under your Convirza role, so it can see and do only what your account can. Setup steps are in the MCP server docs. To pull the same data into your own code, the Convirza API returns calls with their website session details, including landing page and referrer, when dynamic number insertion is on.

Turn Every Click-to-Call Into a Measurable Conversation

Your button is live and the taps are counting. What your team still cannot see is the conversation that follows. Convirza is conversation intelligence infrastructure: it tracks the call behind the tap, scores the conversation and attributes it to the campaign that drove it, so you know which pages and ads produce customers and can maximize the value of every call. Measuring calls from Google Ads call extensions instead? See click-to-call ad tracking.

Start free and see which of your click-to-call taps became real conversations. Building call features into your own product? See the Convirza API.