How to trigger a phone call when clicking a link in a web page on mobile phone

Implementing tel: links for different devices

Displaying on mobile devices only

The mobile browser world is an ideal landscape for tel: links. Use this CSS snippet to only show these links on mobile devices:

// "I only appear on mobile screens, like a superhero in a phone booth!" 
@media only screen and (max-width: 600px) {
  .desktop-tel-link { display: none; }
}


Use the class .desktop-tel-link for your tel: links.

Handling desktop environments

Although ineffective on many desktop environments, a few may prompt to open VoIP applications:

<span class="desktop-tel-link">phone: +1234567890</span>


Formatting international and local numbers

Use the international dialing format for wider reach, but for numbers local to the user, consider this approach:

// "Hello, local office? Please, no hold music!" 
<a href="tel:123456789;phone-context=+123456">Call Local Office</a>


Enhancing user interaction with tel: links

Providing visual cues

Integrate the tel: link within a button or icon to create an appealing and intuitive interface:

<button>
  // "Who you gonna call? No, not Ghostbusters... /your/ office!"
  <a href="tel:+1234567890">Call Now</a>
</button>


Auto-detection on iOS devices

Apple's Safari browser can auto-detect numbers, but the tel: prefix ensures consistency.

Promoting accessibility

Test with various assistive technologies to ensure all users can interact with your function. Incorporate suitable alt tags and ensure the links can be navigated using keyboard commands or voice instructions.

Creative usage of tel: links

Images as your call buttons

Transform images into call buttons to provide a dazzling user experience.

// "This button is worth a thousand words... and a phone-call, apparently!" 
<a href="tel:1234567890"><img src="icon.jpg" alt="Call us"/></a>


Styling your call links

Style your tel: links to stand out from or blend in with your website's aesthetic.

// "I'm not just any link... I'm a /green/ link!"
a[href^="tel:"] {
    color: green;
    text-decoration: none;
}


Practical considerations and best practices

Respect for security and privacy

Sanitize those numbers to prevent injection attacks. Remeber to keep your tel: link clicks private, unless you absolutely need to track them.

Usability is key

Place tel: links where users would expect them, like the footer or near contact information.

Testing, the secret to success

Don't forget to test your links across different devices and browsers before you release them into the wild.

Why tel: and not callto:?

The tel: protocol is the proven standard to initiate phone calls via hyperlinks. The callto: protocol finds less consistency across devices and focuses on Skype, which is not a universal manner of communication.