How to Add a Clickable Call Link to Your Website

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>

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;
}

Or

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>

How to Get a Business Phone Number

The Best Advice to Follow When Placing a Business Phone Call

How Do I Get My Business Phone Number Listed on Google?

How to Add a Business Line to Your Cell Phone

How to Buy a Specific Phone Number

What Is a Vanity Phone Number?