How to mark-up phone numbers?

Managing cross-device compatibility

While the tel: protocol works great on mobile devices, the story can be a bit more complex when we venture into the desktop universe.

Avoid nonstandard links

Early attempts to create clickable phone numbers resulted in the now-obsolete callto: protocol. To guarantee a smooth user experience, stick to tel: which is well supported by modern VoIP applications like Skype and Microsoft Teams in browsers such as Chrome.

Emergency numbers: Handle with care

Remember that tel: links may cover routine calls, but emergency services have specific rules. Posting a disclaimer or providing alternative dialing instructions for emergency numbers like 911 or 112 might save a life!

Creating alternative routes for desktop users

A quick JavaScript function can swap out tel: links for the traditional callto: when a desktop environment is detected, ensuring wider coverage while abiding by the standards.

// Let's dance a little desktopmobile
if (isDesktopBrowser()) {
  // Swap 'tel:' for 'callto:' when on desktop
  document.querySelectorAll('a[href^="tel:"]').forEach(function(link) {
    link.href = link.href.replace('tel:', 'callto:');
    link.title = "You've been up-protocol'ed!"; // 😆
  });
}


Addressing "real world" scenarios

Detecting user environment

Being aware of your visitor's device or browser can help in customizing their experience. GoatCounter wrote a handy blog on using JavaScript to detect mobile browsers and adjust tel: link behavior accordingly.

Cross-browser tricks and treats

tel: URI support varies by browser. While Chrome and Safari give a thumbs-up, Firefox and Internet Explorer display an array of quirks. Prepare a fallback plan for these outliers.

Evolution of software support

Once upon a time, Skype only recognized callto:. But time and user preferences encouraged it to embrace tel:. Staying up-to-date with VoIP software developments can help prevent unanticipated support issues.

Teaching users to fish

Educate about browser-specific behavior and offer an easy-to-reach Help Center. A short prompt to guide the user when a tel: link doesn't work as expected is a great fallback:

<p>Trouble with the link? Make sure your device is call-compatible, or visit our [Help Center] for more fish... uhm, help!🐠</p>


References