I'm designing a website with a call button linked to a phone number. On a phone, tapping a tel: link usually opens the device's calling interface. But what should users expect when they click it from a laptop or desktop computer? Should I assume most computers have a calling app configured, or should the interface change for non-mobile users? I'm also wondering how to handle older computers where clicking the link may do nothing useful.
3 Answers
Use a tel: link and let the operating system decide which application, if any, should handle it. Depending on the device, it might open a calling or VoIP app, a connected phone, or nothing at all. There isn’t a reliable way to assume that most laptops have a usable phone app configured.
Don’t try to detect whether a particular calling application is installed. Web apps and operating systems can register their own handlers, and browser detection won’t reliably tell you whether clicking the link will succeed. Treat tel: as progressive enhancement and make sure the number is accessible outside the button.
Keep the phone number visible as regular text alongside the button so desktop users can read or copy it. You can show a prominent Call button on phones and use a label such as “Copy number” or simply display the number on larger screens. Keeping the tel: link is still useful for devices that support it.
The important detail is that the syntax is tel:number, not tel://number. It works similarly to mailto: links, which open the user’s configured email handler.