WordPress – How to add Smartphone click to dial phone number links and buttons.
Click to Dial
Its pretty important to have your contact phone number super accessible on your site, and even more so when working with mobile sites. So a click to dial phone contact number on your site is a great way to make that as easy as possible.
Luckily, most Smartphones will recognise a phone number right off the bat. For example, see below:
1300 761 930
Sure, some older phones or less well known models, not recognise it automatically…or perhaps you want a nice button, to really draw your visitors eye to the “Call Us” side of your site. Keep reading below, for a tip that will cover both!
Click to Dial – Buttons, code and more.
To make sure your contact numbers are click to dial on all SmartPhones or if you would like a click to dial button, as shown below:
To do this, you use the one of two protocols, either tel: or callto: Both these will work on any smartphone, and prompt to connect a call. However, the issue with the tel: protocol is that on a desktop device, it gives a prompt to open an unknown program. Using the callto: protocol will try to prompt a PC or MAC user to open programs such as skype or other PC based calling software that they may have installed, which is much neater.
Both protocols work in a similar way to how the “mailto” protocol works, which is used when setting up an email link. The format is as shown below, where the example number to dial is 123456:
<a href="callto:123456>TEXT HERE</a >
In the above example, note the lack of a space used in the number part of the callto: protocol. The “TEXT HERE” value can be absolutely anything you choose, for example:
<a href="callto:123456>Call us on 123 456</a>
Which would show:
TO user in an image, or button as we showed above, you wrap the img in the a protocol, for example:
<a href="callto:123456><src="MY IMAGE URL"/></a>
As always, let us know if you need any help with the coding shown, our design team can provide you with a no obligation quote to check and optimise all the phone number links within your website.