If the mobile version of your website displays your phone number in plain text, you are losing customers.
This article explains how the lack of a clickable number affects the conversion rate, why do you need a clickable number, and how to install it on the site.
Why do you need a clickable number on your site
We explain why the text number causes some customers to drop out.
The user goes to the mobile version of the site from their device and sees a contact to contact. In our case, a phone number. To call him, he has to copy the number, minimize the browser with the site, go to dial mode, paste, press the call button. Or write it down on a piece of paper and then dial the number at your leisure (but the person may change their mind by then). Or you have to memorize the number and then enter it manually. If you forget the number – you have to go back to the site, memorize it again, then minimize the browser again and so on in a circle. On average, you get about 5 actions and more. Imagine if a person needs to make several such calls.
With a clickable number the user only needs 3 actions – click on the number, select the call method (via phone or messenger), then click the call button. The less actions, the more likely the user will still make the call, rather than dropping out in the middle of the process.
How to set a clickable phone number on the site – instruction
How to make it so you can get a one-click call:
Method #1. Through html code
If you have access to the code, you can make the phone number clickable through changes in it.
A text phone number (i.e., not clickable) can look different:
If it’s just a number:
<span>+7(111)111-11-11</span>
If the class is assigned via CSS styles, the code might look like this:
<p class=»phone”>+7(111)111-11-11</p>
If design styles were applied to the phone number, such as color, font, alignment, the code is likely to be like this:
<div id=”number” class=”phone mobile text num” style=”color: #1f21ff; text-align: center” name=”phone_number”>+7(111)111-11-11-11</p>
To make the number clickable you need to add the following elements to the code:
- tag <a>…</a> (responsible for the ability to add a hyperlink to the text);
- href=”” attribute (responsible for redirection via link, placed inside the previous tag instead of the three dots);
- Parameter tel: (responsible for a clickable phone number, after a colon should specify the phone number without spaces);
So, for the first variant (just text number) final code will look like this:
<span>
<a href=”tel:+7(111)111-11-11”>+7(111)111-11-11</a>
</span>
The first phone number is a link, the second is how the number is displayed on the site. Instead of the phone number on the site you can display a call to make a call, then the code looks like this:
<span> <aspan>
<a href=”tel:+7(111)111-11-11″>Call us</a>
</span>
If the class was written in the code (example #2), the final clickable code with the added elements looks like this:
<p class=”phone”>
<a href=”tel:+7(111)111-11-11”>+7(111)111-11-11</a>
</p>
The third number (using font, color, alignment), respectively, looks like this
<div id=”number” class=”phone mobile text num” style=”color: #1ff1ff; text-align: center” name=”phone_number”>
<a href=”tel:+7(111)111-11-11”>+7(111)111-11-11</a>
</p>
P.S. It is better to apply styles via CSS to the phone number, because if you just make a clickable text (the easiest first option), it will be highlighted in blue and underlined, like a normal hyperlink. Visually it looks unattractive.
Method #2. If the site is made on CMS or constructor
If you have a site on the designer, the phone is made clickable through the use of hyperlinks to the phone number.
Take, for example, the designer Tilda. Phone number is usually specified in the header, footer, site menu or on a separate page with contacts. But we’ll show on the example of an ordinary text block – the rest is done by analogy.
Here we have a block of text on the page with a phone number. You need to select the number – the text editing menu appears. In it, click on the tool for adding links.
In the field “specify a link” we write tel:+71111111111. The phone number should be specified without spaces, quotation marks and dots.
You can also adjust the color and style of the link – this is a plus because you don’t have to bother with CSS styles. By the way, the color and style of links can be set in advance in the settings of the site and then do not have each time to adjust them manually.
Click “Apply” and get a clickable phone number.
If the site on Wix, the phone is set up in a similar way, with one difference. When you highlight the text and click on the link tool, an additional menu appears where you can choose where the link leads.
In this menu select “Phone number”. The phone number should be in the format +7(111)111-11-11.
If the site is in WordPress, in addition to changing the code or adding a hyperlink to the text, you can use third-party plugins. For example, the free Call Now Button plugin. It adds a prominent colored button with a phone icon and a call to call. All you need is to install the plugin in WordPress, specify in the settings the phone number, button color and its location on the site.
Method #3. Through calltracking service
Modern services of call-tracking uses the number spoofing function. Most frequently, numbers are assigned attributes (classes). For example, in Callibri, this is class=”callibri_phone” and class=”phone”.
In this calltracking, if the auto-swap number is configured, the link will have the form:
<p class=»phone”><a class=”callibri_phone”href=”tel:+71111111111”>+7(111)111-11-11</a></p>
Important: For the call-tracking services you need to specify the code in the instructions of the service or from technical support. Because they have their own classes and their settings may change. Each call-tracking service will have its own links.
How to make a clickable number on WhatsApp, Viber, Skype and Telegram
The clickable number for messengers is made through html code, as we described in method #1 of this article. Only the hyperlink itself is different.
For WhatsApp:
<a href=”https://wa.me/71111111111”>+7(111)111-11-11</a>
The phone number in the link itself (in quotes) should be specified without brackets, spaces and hyphens.
For Viber:
<a title=”Viber” href=”viber://add?number=711111111111111″>Viber</a>
For Skype:
<a href=”skype:skype_user?call”>Skype dialing!</a>
skype_user is the skype login. The call parameter allows you to start the call right away, if you don’t add it to the link, it will just open the profile.
If you want a chat conversation to open automatically when you click on the skype number, add chat instead of the call parameter, that’s it:
<a href=”skype:skype_user?chat”>Speak to skype!</a>
For Telegram:
You can add a short hyperlink of the form to the text:
https://t.me/login
The link can be found in the settings of your Telegram account. When you click on the link you will open a dialog with the user, you can also call there.
Conclusion
Clickable phone number allows site visitors to call in one click. Without any unnecessary movements. This saves time and gives a positive experience of interacting with the site. In the end, a clickable number can increase site conversion. A small thing, but it works.