How to Add a Clickable Call Link to Your Website

You can add a click-to-call link or tel link to your website by adding "tel:" to a link field, followed by the applicable number. For international numbers, you'll need to add the + sign, country code, area code, and number.

Our How to Add a Clickable Call Link or Tel Link to Your Website guide explains how to add a clickable phone number that works for Google Voice, Skype, mobile devices, and more.

Recommended: Learn how to get a toll-free number as your business phone number.

How Call Links Work

Adding a phone number to a web page makes it easier for visitors to reach out to you via phone or email. Some websites add a phone number directly onto the page, place a callout box next to the phone number, or even create a separate contact page just for phone calls.

There are several different types of links that allow someone to make a phone call. You can use one of the following three types of links to connect to a phone number:

  • Phone Number Link: This type of link allows the visitor to dial a specific phone number.
  • Call Out Box: A callout box is usually placed near the phone number and contains instructions about how to place a call.
  • Contact Page or Call Back Page: A separate page containing a form where visitors can submit information (e.g., name, address, etc.), and then receive a callback.

Make sure you're linking to an actual phone number before sending people to it. If you don't know what phone numbers work for your business, check with your local telecom provider.

HTML Phone Number Call Links

You can add a phone number to your website by just copying and pasting some HTML code into your website. The code to paste is known as an "href attribute," which creates a clickable phone number link for your business phone number. You can embed any telephone number you want using this code.

An example href attribute is:

<a href="tel:+1-555-555-5555">+1 (555) 555-5555</a>

The plus sign (+) is optional for US phone numbers that don't require a country code.

Telephone Links for Local SEO Testing

Adding clickable phone numbers to different web pages on your site makes it possible for you to measure which clickable links are the most clicked. This way, you can note visitors' interactions with your pages to determine which clickable link needs the most attention on your website and what content needs to be optimized for Google.

The call link works on desktop, mobile, and tablet devices. In addition, there are no limits on how many numbers you can include. For example, you could put one number on each page of your site. Or, you could put a single number on every page of your site.

Other Click-to-Call Codes

Modern web browsers have adjusted beyond the traditional mailto: and tel: codes. Many website visitors prefer to send a text message to a business, rather than talk on the phone.

Users can now send two types of text messages: Short Message Service (SMS) or a Multimedia Messaging Service (MMS). An SMS message is a short text message of up to 160 characters. An MMS message is a text message above 160 characters and can include emojis, images, and even files.

The way the :sms and :mms codes work is by pre-populating your phone number into the user's phone when they click the hyperlink or click-to-text button on your website. These other CTAS also work with Skype, Google Voice, and other VoIP services as well.

SMS Click-To-Call Links

To add an SMS click-to-call link you'll need to add the sms: schema type to your HTML anchor text. For example:

<a href="sms:+1-555-555-5555">Click Here to Send an SMS</a>

MMS Click-To-Call Links

To add an MMS click-to-call link you'll need to add the mms: schema type to your HTML anchor text. For example:

<a href="mms:+1-555-555-5555">Click Here to Send an MMS</a>

Styling Clickable Phone Number Links

Changing Phone Number Link Colors

Typical click-to-call link colors are blue (#0000FF), black (#000000), and gray (#808080). You can customize those colors by adding custom CSS to the Additional CSS box on WordPress or directly into your HTML or website's "CSS" or "Styles" page.

Let's take a look at how you can change these link colors into a color of your choice (we'll use yellow for these examples).

Changing Link Colors for a Click-To-Call Link

a {
color: yellow

Changing Footer Link Colors for a Click-To-Call Link

Here’s how to change the footer link color to yellow across your footer navigation menu:

#footer.navigation ul li {
color: #FFF942;

Note that this will apply to every single link on the page. If you want to change the color to just one specific link, you could use a code like this:

#footer nav ul li a {
color: #FFF942;

Styling Options for Click-To-Call Links

There are four link states that can be customized using CSS.

  • a:link — Normal state link appears
  • a:visited — Visited state link after a link has been clicked
  • a:hover — State a link appears when scrolled over with the mouse
  • a:active — State link appears when immediately clicked

To style using these link states, you can apply the following CSS:

/* Normal state link appears /

a:link {
color: blue;

/ Visited state link appears /

a:visited {
color: orange;

/ Mouse scroll over state link appears /

a:hover {
color: yellow;

/ State link appears when selected */

a:active {
color: gray;

Other CSS Properties for Phone Numbers

Some website owners prefer to have underlines under their links to let users know it's clickable. Others prefer to exclude the underline feature. The CSS property that controls this is the text-decoration: property.

To modify the :text-decoration property, choose either:

a:link {
text-decoration: underline;


a:link {
text-decoration: none;

Note that the :text-decoration property can be applied to any link-state (i.e., Normal, Visited, Mouse Scroll, or Selected).

Link Buttons

Some websites style using link buttons. These are often used on local websites with the phone icon button. These make the click-to-call link more visible on the page. A call button converts better than clickable phone numbers.

Example HTML code for a click-to-call button is:

<a href="tel:+1-555-555-5555"><img src ="IMAGE URL"> </a>

Call Link FAQ

How do I make a phone number clickable?

To make telephone numbers clickable, you'll need to enter tel: followed by your phone number as your anchor link href attribute. An example of how one might add this to HTML code is:

<a href="tel:+1-555-555-5555">+1 (555) 555-5555</a>

Do phone links only work on mobile devices?

No. Clickable telephone links work on any device. In fact, users can click and place calls through other calling apps like RingCentral,, Google Voice, Skype, and other VoIP providers.

Should I add tel, sms, mms, or emailto to my website?

Adding sms, mms, emailto, or tel attributes to a website is advisable if you want a user to contact you. Adding these types of links to your website make your pages more useful to readers and, therefore, more interactive.

How to add an extension number to my clickable telephone number?

To add an extension number to your call link, add the letter "p" followed by the extension number to the href attribute. This way, when a user clicks your link, it will dial the number, they'll be a one-second pause, then the extension will be dialed automatically.

Here's an example:

<a href="tel:+1-555-555-5555p555">Reach Tom at Extension 555</a>

Will a click-to-call hyperlink work on both iPhone and Android phones?

Yes, a click-t0-call hyperlink will work on any device connected to a calling app (e.g., Google Voice, or another VoIP phone service).

Is adding clickable phone numbers to my contact page a good idea?

It is best to add clickable phone numbers to your contact page to make it easier for visitors to contact you. The whole point of a contact page is to encourage visitors to contact you.

What is an href attribute?

An href attribute is an HTML attribute that specifies the URL of the page the link goes to. When a user clicks on a link, the browser navigates to the new page using the URL specified in the href attribute.

The href attribute is required for all links, and the value must be a valid URL.

Related Articles