Click to Call

What is click-to-call?

As explained briefly above, click-to-call is a digital action that describes the process for initiating a phone call. This is generally in the form of a text link or a button. Click to call improves the accessibility and the overall user experience (U/X) of a web site. Instead of asking the visitor to copy and paste a phone from the site, it allows them to dial a phone number with a single click.

Click to call on mobile

Click to call is particularly beneficial to your mobile traffic as they’re already holding their phones. Also selecting text in order to copy it to the phone application can be an annoying process on a mobile phone. Text is often too small or fingers are too fat to select the entire phone number and nothing else.

The presence of a link or button that removes the hassle making this literally as easy as a single tab is obviously a great plus.

Click to call on desktop

A click to call link can also be useful for visitors looking at your website on desktop and laptop devices, however, this does require the presence of an application that is able to execute phone calls. You also need an active internet connection for this to work. Dialing from a desktop or laptop device is possible via VOIP. VOIP stands for Voice over Internet Protocol. Apple devices have Facetime installed by default which is able to handle phone calls. Windows and Linux devices might not have a default application for making phone calls. These operating systems require the user to install special software to enable this functionality.

The latest versions of Windows have an application that allows Android users to perform phone calls from their computer. This application is called Phone Link app (previously called Your Phone app) and requires a bluetooth connection with your phone. This phone application also requires that you install the Phone Link app on your Android device. When setup it basically uses the calling capabilities of your phone but the speaker and mic of your pc are used for the conversation.

Here are a couple of Windows applications and web based applications that allow you to make phone calls. Just to be clear, these apps make it possible to dial a phone number (land line of cell) from your desktop. App to app conversations such as WhatsApp voice are not included here.

• Skype
• Jabber
• CitrusTel (requires Google Chrome or Opera browser)
• Google Voice
• Zoho Voice
• TextNow
• VoipDiscount
• PopTox
• Globfone

Some of these are paid services. Do your own research to find the best application for your use case.

How to create a click-to-call link?

A click-to-call link is a hyperlink to a phone number. If you’re familiar with html this will be incredibly easy; if you’re not, this will just be easy. Let’s dissect a html hyperlink.

The html anchor tag

A link is a clickable element like text or an image, contained by an opening and a closing anchor tag. This would look something like this:

<a>text</a>

This is a valid anchor tag, but it needs a special hypertext reference attribute that tells it where it should link to. The hypertext reference attribute is shortened to href.

The tel: protocol

To create a link that points to Google, we would write <a href="https://www.google.com">link</a>. This is what a standard link looks like. By default, the href attribute points to a web page. If you would just replace the url with a phone number, your browser would think it’s a web url which will obviously break. So we need to tell it that it’s a phone number. You do so by adding the tel: protocol at the start of the phone number.

Click to call html code

Now you have all the elements needed to create a html click-to-call link. Putting it all together this is what the click to call html code would look like:

<a href="tel:1234567890">Call us</a>

You can copy the link above and adjust it to your own needs, or use the click-to-call link generator above.

Click to call image

In the click-to-call example above the user will see a text link which can be clicked to initiate a phone call. Replacing the text with an image, will result in a click to call image. It makes the image clickable and links the image to the phone call.

The tag name for adding images in html is <img> there’s a source src attribute that contains the url of the image. An image tag in it’s shortest form would look something like this:

<img src="http://www.example.com/image.png" />

If you replace the text from the click-to-call link above with the image tag, you’ll have a clickable image that starts the phone call.

Putting all of this together, this is what the html click-to-call image link would look like:

<a href="tel:1234567890">
    <img src="http://www.example.com/image.png" />
</a>

Please note that there are additional attributes that can be added to both the image and the link that are recommended, however they are not required and this example will work.

The click-to-call button

Links are great for making content in a paragraph interactive. It allows people to do deeper into a topic as it enables you to link to content that explains elements of an article. Wikipedia is a great example of this where many words inside paragraphs link off to articles that further explain these concepts.

This can be the same for a phone number but generally the content explains your business and you want people to call you so you can interact with them and potentially complete a sale or solve a problem. For that reason, the phone link is more like a call to action: it’s a link to an action that you want your visitors to take.

Turning a click-to-call link into a button can be done with an image as described above. It can also be done with CSS styling or through a combination of the two. Our Call Now Button is a great example of this: it’s an always visible floating phone button. It’s fixed to a specific position on the screen and while the user can scroll through the content, the click-to-call button remains visible at all times. It’s stuck to the phone screen instead of the website’s content.

Creating a click-to-call button

Most of the work when creating a click-to-call button is done with CSS. Let’s look at the CSS code to achieve these things. We start with the click to call html code we created earlier:

<a href="tel:1234567890">Call us</a>

Now we need to apply CSS styling to this link. First we need a selector to attach CSS to this link. Because we don’t want the styling to be applied to all links on a page (or all phone links), we’ll add an id name id="click-to-call-button" to the phone link that we can use as a selector. So the html link we’re going to style is this one:

<a id="click-to-call-button" href="tel:1234567890">Call us</a>

Without CSS this looks something like this: Call us
Looks can vary and are dependent on any pre-existing styling that’s already active to the page

Button CSS

Now that we have a class name that we can use as our selector, the basis will look like this:

#click-to-call-button { … }

The CSS styling we add between those curly brackets will be applied to the link. The following will turn the phone link into a clear green button:

#click-to-call-button { display: block; text-align: center; padding: 10px; color: #fff; background-color: #00aa00; border-radius: 5px; text-decoration: none; font-weight: bold; width: 100px; }

With this CSS applied the link has now become a button:

Call us

Positioning the button

If you want the click-to-call button to always be visible and sit at a fixed position in the bottom right corner of the screen, add the following lines to your CSS:

.click-to-call-button { position: fixed; bottom: 15px; right: 15px; }

Adding a click-to-call button to your website

How to add a click-to-call button to a website? There are multiple ways to add the call button or link to your site. If you’re comfortable getting your hands dirty in the source code of your website, you could add the html code and the optional CSS styling yourself. If you work with a web designer or agency you could ask them to add this for you.

This method is quite straightforward for a plain html website, but most websites nowadays are built on a CMS (a content management system). And looking at their market shares, it will likely be on WordPress. So let’s start with that one.

Adding a call button to your WordPress website

You have a number of options for adding a click to call button to a WordPress website. This mostly depends on 2 things:

1. Should the button be part of a specific page, or should it be visible on all (or most) pages?
2. Do you want to edit code or do you prefer a no-code solution?

The no-code option for an always visible floating button

The most common way for adding additional features to a WordPress website is via plugins. WordPress has a large plugin library which offers a code-free solution for pretty much anything. A click-to-call button is no different.

The most popular WordPress plugin for adding a call button is the Call Now Button which has over 200.000 active users. It’s been around since 2012 and is rated 5 stars. No wonder it’s so popular.

Installing the WordPress plugin

1. Inside your WordPress admin dashboard you go to the plugins section and click Add New at the top of the page.
2. In the search bar you enter Call Now Button and it will appear as the first option.
3. Click Install Now and then Activate to enable the plugin.

A new menu item called Call Now Button is added to the side navigation of the admin dashboard.

6. Click the Call Now Button item in de the side navigation of the admin dashboard.
7. Enter your Phone number which is the only information required for the button to work.
8. Make sure the status toggle is set to active and click Save Changes.

That’s it. You now have a click-to-call button floating in the bottom right corner of all your pages.

Obviously you have additional options to change color, position, size, add a label and even to enable click tracking in Google Analytics.

Adding a click to call button with website builders Divi and Elementor

There are also popular WordPress website builders that allow you to visually build your website. These extensions sit on top of WordPress and are used by many people. These website builders have so much functionality built-in that they do allow you to create a click-to-call button yourself. However, it’s a lot more work to match the looks and functionality that the Call Now Button plugin just offers out of the box.

If you like tinkering with these tools you will be able to do this without a plugin or writing a single line of code. Problems arise when you want to apply conditions for displaying your buttons on a subset of your pages. And adding a scheduler becomes virtually impossible. And when you want to make a change after some time, you will have to go through the process again because you have probably forgotten how you did this months ago…

Luckily these website builders can also allow you to add other plugins like the Call Now Button, to make this process easy again. Overall, when using WordPress, the best and easiest way to add a click to call button (and manage it later) is through installing the Call Now Button plugin.

The no-code option for a click-to-call link inside your post or page

If you want to add a click-to-call link in the content on your contact page for example, then there’s no need for any plugins. Here's how to create a click to call link in the WordPress page editor:

1. Start by typing the text you want to link to the phone number in the WordPress page/post editor.
2. Select the text and click the link icon above it.
   
3. Now the link editor window appears. Here you enter the phone protocol followed by the phone number. E.g. tel:123456789 and hit the enter key.
   

After you’ve published the page, your visitors will be able to click the link to start the phone call.