The cell phone, from an ordinary means of communication, has long been transformed into a media library, a bank, a diary, and even an assistant. That’s why the business industry is increasingly tying its processes to apps that are specifically designed for smartphones.
A clickable number feature on a website helps prevent customer leakage by conversion action on the mobile version of the site. It takes no more than two steps to contact you via clickable number. To contact you without the clickable number feature, at least five: copy the number, minimize the browser app, go to dial mode on your phone, paste the copied data, press the call button. You can also write down the number on a piece of paper or on another phone.
And when you need to call a large number of companies? Find and book a suitable offer or quickly order the delivery of the chosen food? Then a person, saving time on ctrl+C/ctrl+V, will go to the competitors’ site and find similar offers, and order.
Click to call number or clickable number is a phone number written on the website, which is called immediately after you click. The feature is designed for mobile gadget users. Users can also make a call from their desktop with a specially pre-installed program.
There are several ways how to add a phone number to the site correctly. In this article will be considered options with preservation of design styles and raising the conversion of the site.
Content
- The importance of using clickable numbers
- Increase of conversion
- HTML code clickable number
- CMS / website builder
- Clickable number WordPress
- Click to call phone Tilda
- Clickable number LPmotor
- Click to call Wix phone
- If calltracking is installed
- Incorrect use
- Checking the call option on the site
- Clickable email
- Clickable Skype
- Conclusion
The importance of using clickable phone numbers in the mobile version of the site
The user who opens the site from a mobile device (tablet, smartphone) is not going to thoroughly consider and select a service or product. This increases the likelihood that he will make a call rather than text the managers in chat.
The behavioral algorithms of the smartphone user are different from the one who sits in front of a computer with a keyboard. On a mobile screen, it’s not very convenient to highlight, copy and paste the characters you want. There’s a good chance he’ll start looking for another resource that’s easier to call. After all, clickable phones are not uncommon these days, most people are used to them by now.
The correlation is clear: As mobile gadgets become more accessible, mobile traffic is growing. The magnitude of growth, as presented by SimilarWeb, is increasing: while desktop traffic is declining (down 3.3% from 2017 to 2020), mobile is doubling in one year (up 10% in 2018 compared to 2017, up 18.5% in 2019 compared to 2018). Mobile traffic continues to grow in 2020 and 2021 as well.
Conversion Growth
Conversion is a customer-directed event that leads to a targeted action (call, purchase, subscription, conversion). It is the ratio of website visitors who took the targeted action to all website visitors.
The amount of conversion is determined by many factors, among which call-to-action conversion by phone number clickability is not the last in importance. A self-respecting resource or company should take care of user and customer convenience by providing the widest range of interaction opportunities.
To increase conversions in general and usability in particular, phone clickability opens up new opportunities to attract new users for your project.
HTML code for clickable phone number
First, let’s consider the case where there is access to the HTML code of the site.
The recorded phone number, which is plain text, looks like this:
<span>+1(333)555-77-99</span>
With a class assigned, it looks like this:
<div>
<p class="phone”>+1(333)555-77-99</p>
</div>
Or like this – with font, color, formatting styles assigned:
<div id="number" class="phone mobile num" style="color: #00BFFF; text-align: right" name="phone">
+1(333)555-77-99
</div>
To make it possible for the text to contain a hyperlink (hypertext) in the HTML code you need to use the tag a. The binding attribute href=”” specifies where the client will be referred to when the client clicks. The parameter tel is placed in quotes: after which you must specify the phone number to which the call will be made. Number should be in international format without dashes and spaces with a plus in front.
After the changes, the text phone number will now be in this form:
<span>
<a href=”tel:+13335557799”>+1(333)555-77-99</a>
</span>
Here we can leave the phone number by adding the action – dialing when you click on it.
For the second example, the view will be like this:
<p class="phone”>
<a href=”tel:+13335557799”>+1(333)555-77-99</a>
</p>
The third entry will have a view with the assigned styles, becoming hypertext:
<div id="number" class="phone mobile num" style="color: #00BFFF; text-align: right" name="phone">
<a href=”tel:+13335557799”>+1(333)555-77-99</a>
</div>
The phone number should be entered twice. The first (in the href attribute) is a link to the number. The second shows how the phone number will appear on the site.
In the case when instead of the phone number you need to put the “Call” button, the code will look like this:
<button>
<a href=”tel:+13335557799”>Call</a>
</button>
Site Designer / CMS
When using the site builder to activate the number, you will mostly use the built-in tools, information about which can be found in the FAQ of the platform. If you could not find the functionality you need, you can use the livehack.
The function of setting a hyperlink in the text formatting is in every website builder. The number is text, so when you enter it in the editor, highlight it and create a hyperlink by specifying in the address field: tel:+1XXXXXXXXXXXX, where “+1XXXXXXXXXXXX” must be inserted the phone number where the call will go.
Clickable WordPress phone number
There are several ways to make a phone number clickable in the WordPress environment. The first involves action with the HTML code described in the previous paragraph.
The second requires the use of a special plugin, such as Call Now Button. Its installation will not take much time.
With its help, on all pages of the site will be displayed a button, after clicking on which the mobile device will open a dial pad with the number entered. The client will only have to make the call.
The menu plugin allows you to configure the settings and appearance of the button.
Clickable phone Tilda
To make a phone number clickable in the Tilda constructor, you must attach a link.
In the ME301 menu block of the “Content” tab of the “Extras” field, write the phone number. Then in the pop-up toolbar insert a link in the format tel:+13335557799. After this operation the phone number should become red. Save changes, and the number is clickable.
Clickable mottor number (LPmotor)
There are several ways to add to LPmotor.
1) Phone as text. You select the text with the phone number in the block and click the add link button in the edit panel:
2) Dialing with Button. For the block “Button” in the editing panel is set “Click on link” with the inserted number in the format tel:+13335557799:
3) Dialing a number using a picture/icon. In the Action menu you select “Go to link” with the phone number in tel:+13335557799 format:
4) Inserting the clickable number of html block by means of tag a:
<a href=”tel:+13335557799”>
Call +1(333)555-77-99
</a>
With the ability to customize the font, color, text size.
Clickable phone on Wix
The following methods are used for the Wix website creation environment.
1) Creating a clickable number:
- add text;
- click on “Edit text”;
- enter the phone number. Nothing else needs to be entered in this window.
2) Linking text with a link to a phone number:
- add text;
- click “Edit text”;
- enter the desired text (“Calling”);
- select the text;
- press the icon “Link”;
- choose “Phone number” in the menu;
- enter the number itself in the field;
- press “Done”.
3) Linking a button with a link to a phone number:
- add button;
- change the button text;
- click on the “Link” icon;
- select “Phone number” from the menu;
- enter the number in the drop-down field;
- click “Done”.
If calltracking is installed
When using dynamic calltracking on a site with number swapping, it can also be clickable.
The substitution in calltracking systems occurs not only in the text, but also in the link with the number. For the substitution, the attribute class=”phone” is used. If the script is already installed on your site and the attribute class=”phone” is assigned to each phone, the substitution is automatic. The script finds the necessary elements with the numbers and makes the substitution.
When the phone number of the site is not clickable, the substitution will take place in the form of text. In the case when the one-click dialer is already possible, the script will replace the number specified in the attribute “href=”tel:” to which the calls are made. The client will call the specified number by pressing on the substituted one. The statistics will reflect the data on the source – the lead will not be lost.
An example of code in which the substitution on the site will be both the text of the number and the number to call:
<p class="phone”>
<a class=”ccc_phone” href=”tel:+13335557799”>+1(333)555-77-99</a>
</p>
where ccc is the name in the script of the calltracking system installed on your site.
Incorrect application
You should not write the clickable number in this way:
<a class=”ccc_phone” href=”tel:+13335557799”>
<span>+1(333)555-77-99</span>
</a>
When writing this way, there is a possibility of losing the phone number design and without substitution, because styles can be prescribed to a particular element, but not all at once.
Such writing is also not desirable:
<a href=”tel:+13335557799”>
<p class="phone ccc_phone”>+1(333)555-77-99</p>
</a>
Here, in the case of loss of design, moreover, the substitution will be only the tag p. In the code of the site visible phone will be substituted. When you click, the link will be to the main number without the substitution. You will not be able to find out how the client arrived: he will call the main phone, not the swapped one.
Checking whether you can make a one-click call on your website
If the site was commissioned by a developer and there is no certainty that he has connected clickability by number, you just need to check. Go to the site from your mobile device and click on the phone number. You should be thrown into call mode.
Or open the site from your desktop and click on the phone. If it’s recorded in click-to-call format, you should see a window with a choice of caller software.
Clickable email
There’s a clickable email option on the site, based on this principle. It is important for B2B: when the ratio of mobile traffic to desktop traffic is small, there is a probability that the user will want to send a commercial offer, ask a question, send a specification from a mobile device.
To set up a clickable email, you need to insert the href=”mailto:mmm” attribute in the anchor tag, where mmm is the email address. When using email tracking, you also need to correctly place attributes to spoof both the text on the site and the sending address of the email:
<a class=”ccc_email” href=”mailto:[email protected]”>[email protected]</a>
Clickable Skype
It is also possible to add a clickable link to Skype as well:
<a href="skype:nik">Skype</a>
A call from Skype to your phone is possible with this link:
<a href="callto:+13335557799">Call to Skype</a>
Conclusion
Using a clickable phone number qualitatively improves the mobile version of your site, raising conversion rates. You are several clicks away from your customers. At the same time, in the desktop version of the site, you also get the opportunity to make calls. Call-tracking services also provide the ability to work with clickable numbers.
Correct site setup leads to higher conversions, which directly affects the increase in profitability as a whole.