Using Click to Call on your Website, More than a Phone Call

Chris Love

Last Updated - Sat Jan 09 2021

Are you looking for ways to let customers connect with your business. Do you want more orders in today's digital first, contactless environment?

Look no further than your website as a click to call interface.

Government restrictions on businesses are limiting casual in store shopping. You must adopt digital channels as the primary ways to interact.

The funny thing is the classic analog phone call could be your answer. Sometimes you feel like you need that human connection, even in the digital world.

The trick is making a call easy to make and that is exactly what your website can do.

This is great news for local businesses, like restaurants.

So much 'shopping' and purchase education is made on our phones today. Smartphones of course allows phone calls. Today you can also make voice and video calls from phones and laptops.

HTML added support for click to call years ago, but many websites don't use this free feature. Because most sites lack support for direct calls this could be a way for you to stand out.

You can add click to call buttons at key parts of any web page. This works in all modern browsers (Edge, Chrome, Safari, Firefox, etc) and CMS platforms, like WordPress or Shopify.

There may be limitations due to the device. For example Smartphones should have phone call capabilities, but desktops general do not.

Customers can call using a traditional phone number, several popular apps like Skype and What's App. You can also use voice over IP for a more sophisticated solution.

And don't forget you could even integrate video chat, just like a Zoom or Skype video call.

So how does all this work?

• How Click to Call Works
• How to Add Click to Call to your Website
• Opening Communication Apps (Skype, Facebook, WhatsApp, FaceTime)
• Sending Text/SMS Messages from a Website
• Blocking Auto Detection by Some Browsers
• Where to place click to call Call to Action
• What to Do Now

How Click to Call Works

The mechanism is pretty simple. Enable a button or link to directly imitate a call so the customer does not need to dial a number.

You should start with your actual phone number, then add links for other channels.

And yes, international numbers work just fine, this is not a US only feature.

How to Add Click to Call to your Website

The easiest way to code click to call on your site is creating a hyperlink using the 'tel' protocol instead of the normal HTTPS. It is so simple because it is just an HTML click to call, no JavaScript required.

<a href="tel:+1800229933">Call us free!</a>

Normal hyperlinks request web pages or other documents using HTTP(S) protocol or schema. For click to call you are creating a hyperlink and telling the browser to use a different protocol. 'tel' is the protocol to initiate the device's telephone service.

If you are on desktop, which typically does not have phone call support, you are prompted to pick an app to handle the request.

Later you will see how to use other protocols to channel the call through apps like Skype and FaceTime. There are a surprising number of protocol schemas supported by browsers.

You can wrap anything you want in an anchor tag to light it up for a direct phone call. So be creative, you are not limited to just wrapping your phone number.

Opening Communication Apps (Skype, Facebook, WhatsApp, FaceTime)

Phone calls are so old school. Many in younger generations would not be caught dead making a phone call. They probably don't know what a rotary dial phone is.

Today, much of our voice communications use messaging and apps like Skype, FaceTime and WhatsApp.

Because URL schemas can be added to the official specification most browsers support direct links to these apps.

These are example of how to link into many of these applications:

<a href="gtalk://5555555555">Call us free using Google Talk!</a>

<a href="facetime://5555555555">Call us free using Facetime!</a>

<a href="skype:skype_user?call">Call us using Skype!</a>

<a href="callto:skype_user?call">Call us using Skype!</a>

<a href="fax://5555555555">You can even send a FAX</a>

<a href="whatsapp://send?text=Hello%2C%20World!">Send message to WhatsApp</a>

This click to call list includes most popular messaging apps, like Google Talk, Apple's FaceTime, Microsoft's Skype and FaceBook's WhatsApp.

I even included FAX, but who does that anymore! Just shows the HTML click to call href schema trick has been around a while.

Sending Text/SMS Messages from a Website

I spend a fair amount of time in voice meetings. But honestly I communicate more using text and chat. Chat is a very different topic and I will cover that soon enough.

But just like making a voice call from a hyperlink you can also send a text message. This includes prefilling the message body.

<a href="sms:+15105550102?body=1%20chicken%20tai%20salad">Text Your Order</a>

The customer can of course modify the message before it is sent. The real key is removing the need to type all the numbers. This effectively turns this into a simple chat mechanism. You could even configure your back-end to automatically reply to the user.

Blocking Auto Detection by Some Browsers

Click to call is very convenient. So convenient that many modern browsers will autodetect valid phone numbers. They automatically turn them into clickable links, even when you don't want them to do this.

The good news is you can disable this feature.

<meta name="format-detection" content="telephone=no">

Why would you want to turn this off?

It comes down to having control over how your information is presented and handled. I know I have written a blog post or 2 where I had an example phone number in the content. There was no link wrapped around this text, but sometimes the browser would make it clickable.

This confused some readers, who thought they could call me from this site.

While having the browser automatically create clickable telephone number links is convenient, it can cause issues. I would rather be in control of the feature rather than depend on the browser magically figuring it out for my visitor.

Where to place click to call Call to Action

Click to call should be considered a call to action (CTA) because you want visitors to tap the link. Its no different than coaxing them to tap a button to fill in a lead generation form.

The first places you want to add your phone number are to both your page header and footer. On mobile the header may be a little difficult due to limited screen real estate. So be creative in ways to get it above the fold.

Your footer should contain all communication channels, including social media. Having your phone number accompanied by Skype, FaceTime and WhatsApp icons sends the message you are available.

You should also consider include native call to actions on your pages. This can be an inline banner add in a sidebar or in the middle of articles.

The point is you want to make these channels visible so the visitor knows they can initiate a voice call right now.

What to Do Now

As you can see click to call is easy to add to any website. It requires an anchor tag with an href link using a schema to trigger a communication channel like a phone call or messaging application.

It is up to you to determine where to place these important calls to action on your site.

Direct click to call is a great way to enhance any progressive web application and it requires no JavaScript!

Don't forget you could also leverage more complex browser features like WebRTC to create a direct communication to your office or store. I will review this mechanism in an upcoming article.