4 Steps To Add A Clickable Telephone Link In HTML - HubSpot Blog

When someone wants to call your business, they’re most likely interested in your service, have a question about your service, or have a complaint or feedback. In all of those scenarios, you’re going to want to make it easy to get in contact through your website.

In fact, you can make it even easier than simply adding the phone number as text — you can make it into a link with a bit of HTML know-how. Considering that mobile accounts for approximately half of web traffic worldwide, this is the best way to get someone from your website onto a call with you without having to manually type in a number themselves.

In this post, I’ll walk through the process of creating HTML telephone links, or “click to call” links. I’ll cover how to add them to a website with HTML, how to style them with CSS, and also how to add one to WordPress through the Gutenberg editor or with a plugin.

Table of Contents

• How do HTML telephone links work?
• How to Link a Telephone Number in HTML
• How to Add an HTML Telephone Link to a Webpage
• How to Add an HTML Telephone Link to a WordPress Website
• How to Add HTML Telephone Link with a WordPress Plugin
• How to Test an HTML Telephone Link
• How to style an HTML Telephone Link
• Other Communication Protocols in HTML
• Adding “Click to Call” Links to Your Website

How do HTML telephone links work?

When you click or tap a hyperlink on a webpage, that link usually takes you to another webpage. Technically, these hyperlinks use the HTTP protocol to retrieve the content of the new webpage and display it on your device.

However, there are other protocols besides HTTP that can do other cool things. For example, the mailto: protocol lets you add hyperlinks that let you send an email to an address without leaving the page.

There’s also tel:, which is what I’ll mainly be covering in this post. The tel: protocol lets you make a phone call by clicking or tapping the hyperlink on a webpage, without needing to copy the address or manually type it into your phone app.

Based on what browser and device you’re using, clicking or tapping a tel: link may trigger different responses from the device. But for modern browsers, the tel: link will call the number automatically or ask the user if they want to call that number — this avoids the dreaded scenario of calling the pizza place by accident before you know what you want.

And you can place these links anywhere on your website you can put a hyperlink, like a header, footer, the main body of the page, or in a modal or pop-up.

So, let’s look at how to insert these kinds of links with HTML. As you’ll see, it’s pretty easy to do.

How to Link a Telephone Number in HTML

To add a telephone number link to a webpage, I’ll use the anchor element, which is made with the <a> tag. First, create the anchor element.

<a href=""></a>

Then, for the href attribute, I’ll write tel: followed by the phone number (with no spaces or dashes).

<a href="tel:5555555555"></a>

Finally, I’ll insert the telephone number again between the opening and closing anchor tags. This is the hyperlink text that users will actually click/tap to call the number.

<a href="tel:5555555555">555-555-5555</a>

You can also make any text the hyperlink text. It doesn’t have to be the phone number itself. This can make the call to action more obvious to users.

<a href="tel:5555555555">Call the store</a>

Here’s what an anchor tag linking to a phone number looks like on the front end of a webpage:

See the Pen How to Link a Telephone Number in HTML [With Linked Text] by HubSpot (@hubspot) on CodePen.

Note: The links in the code examples below will not execute a call because they are not on a live web page. Try putting this HTML in your own document and testing it in your browser.

If you’d like to include the telephone number and have it be the only text that’s linked, then wrap the phone number in the anchor element and place it inside a paragraph tag.

See the Pen How to Link a Telephone Number in HTML [With Text] by HubSpot (@hubspot) on CodePen.

How to Link a Telephone Number With an Extension in HTML

If the telephone number has an extension, you’ll need to complete an additional step.

First, I create the anchor element and insert the phone number as the href value, as I did before. Then, after the phone number, I’ll add the letter “p” followed by the extension number. The result looks like this:

<a href="tel:5555555555p000">555-555-5555</a>

This link will call the telephone number, then dial the extension.

How to Link a Telephone Number With a Country Code in HTML

If the telephone number has a country code, here’s how you make a clickable link.

First, I’ll make the anchor element and put the phone number as the href value. Then, between “tel:” and the phone number, add a plus character (+) and the country code. In the example below, the country code is “+1”:

<a href="tel:+15555555555">555-555-5555</a>

How to Add an HTML Telephone Link to a Webpage

As I mentioned before, telephone links can be placed anywhere on your websites where you can place a hyperlink. However, I recommend placing them where users expect them to be, namely:

• The header: If your business requires prospective customers to call you (e.g., call to make a consultation or a reservation), I highly recommend putting your phone number in the header where it’s highly visible and easily clickable.
• The footer: You can also place your phone number in the footer of your site, which is where contact information is often placed. You can put it alongside your business address, email address (complete with a mailto link), social links, and administrative information.
• Contact page: If your website has a contact page, your phone number should also go there. In this case, I’d place it in the main content area of the page.

Let’s see an example of a web page with the phone number placed in the header, footer, and main area of the page.

See the Pen telephone link: mock website 2 by HubSpot (@hubspot) on CodePen.

In my experience, it’s pretty easy to place a phone link on your site and make it visible enough for users to find it if they need to, but not distracting.

Additionally, keeping the underline under the link text (which the browser will do by default, unless you override it with CSS) is a good visual signal that the number can be clicked/tapped. Otherwise, I might assume that I need to copy the number to call it.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

How to Add an HTML Telephone Link to a WordPress Website

If you’re working with a WordPress website, you can insert a link in your header, footer, or contact page as well.

Let’s first go over how to insert a phone link without a plugin. Then we’ll cover some WordPress plugins if that’s how you roll. The exact steps you take will vary based on your theme — here’s the general process.

WordPress Header and Footer

From your dashboard, select Appearance > Editor. This opens the WordPress site editor.

Next, choose Patterns.

In the Patterns menu, select Header or Footer. For this demonstration, I’ll choose Footer.

From there, choose the variation that you want to edit. My site only has one footer variation, so I’ll select that one.

In the editor window that opens, click the “add a block” button in the top left corner and choose the custom HTML block.

Insert this block where you want the number to be placed. Then, paste in the code for the telephone number. Here’s the syntax again so you can copy it:

<a href="tel:YOURNUMBERHERE">Contact Us: YOUR-NUMBER-HERE</a>

Here’s what the code looks like pasted into the block. You can click Preview to see how the anchor element will display to visitors.

Save the footer, and the phone number link will be visible in the header/footer on any page of your site.

WordPress Contact Page

Next, we’ll add a telephone link to the body of a contact page.

Start by going to the editor for the contact page of your site. Then, insert a custom HTML block where you want the telephone link to go. Or, if the template for the contact page already has a phone number placeholder, replace it with a custom HTML block.

Then, add the telephone link anchor tag into the custom HTML block.

Here’s the syntax again so you can copy it:

<a href="tel:YOURNUMBERHERE">Contact Us: YOUR-NUMBER-HERE</a>

You can toggle to Preview mode to see how the link looks on the page.

Finally, save the page draft and publish it if you’re ready.

How to Add HTML Telephone Link with a WordPress Plugin

If you’d rather rely on a plugin to insert a phone number link in wordpress, you can do so with a header/footer plugin. A plugin may make it easier to toggle the location of the telephone link and style it without CSS knowledge.

Here are four WordPress plugins I recommend to help you here:

1. WPCode

WPCode (formerly Insert Headers & Footers) is a leading plugin for inserting custom code into your pages and includes modules for headers and footers. It offers a simple interface to insert your scripts, as well as tracking codes and custom CSS.

2. Call Now Button

If you’re looking for a plugin to do exactly one thing well, the Call Now Button plugin is the solution you’re likely looking for. It adds a prominent “call now” CTA to the bottom of the screen on mobile devices, making it obvious where users should tap to reach you.

The button is customizable, including its position on the page. You can also toggle it off for different pages and track presses with Google Analytics. The paid version lets you also create buttons for SMS and email.

3. WP Call Button

WP Call Button serves a similar function as Call Now Button, so you may prefer this free plugin as an alternative. It will add a click-to-call button to your mobile site that you can easily set up and customize. Plus, the plugin is lightweight if you’re worried about it affecting site performance.

4. Elementor Header & Footer Builder

For Elementor users, this plugin is pretty much a no-brainer. It allows you to make custom headers and footers where you can insert your phone link and other contact links. Plus, choose where these headers and footers are displayed and easily play around with the front-end components of your header/footer with Elementor’s straightforward drag-and-drop interface.

How to Test an HTML Telephone Link

To test your telephone link for desktop devices, you can, of course, just open your website (or website preview) on your computer and see what happens when you click the phone link.

However, it’s more important to make sure the link works on mobile devices, since users will be able to tap the link on their phones. You can test your website on mobile devices, and you can also test the mobile experience on your browsers as well with developer tools.

Developer tools on modern browsers let you preview websites on different screen sizes to simulate mobile devices. For this tutorial, I’ll be using Chrome DevTools. Open the webpage you want to test In Chrome, then go to View > Developer > Developer Tools.

The developer toolbar will open. In the corner of the toolbar, click the “device type” icon.

From there, you can choose a specific device to view as or set custom dimensions. You can simulate tapping the phone link and see if it works.

Image Source

How to style an HTML Telephone Link

To style an HTML telephone link, you can target all anchor elements with telephone links using the CSS selector a[href^=“tel:”]. You can adjust any properties of the text to your preference.

For example, say you want the telephone number to appear bolded, orange, and with no underline. Here’s the CSS and how the “click to call” link would appear on the front end:

How you add this CSS to your website depends on the platform you're using. If building your site in WordPress, for example, you’d add this CSS to the Additional CSS tab in the WordPress Customizer.

Other Communication Protocols in HTML

So far, we’ve discussed using the tel: protocol to start phone calls. But there are other protocols that you might want to know about. Here are the most common ones that you can use for links to your website.

• tel: starts a phone call
• sms: sends a text message
• mailto: sends an email
• fax: sends a fax
• geo: opens a location in a maps application

See the Pen html link protocol examples by HubSpot (@hubspot) on CodePen.

Adding “Click to Call” Links to Your Website

Displaying a phone number on your website can help attract and delight prospective and existing customers — making them clickable is even better for UX. The good news is that creating telephone links is easy. You just need to know some HTML and CSS to create and style these links and embed them in different areas on your site.

Editor's note: This post was originally published in November 2021 and has been updated for comprehensiveness.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now