Clickable phone links, also known as tel links, allow users to tap or click on a phone number to automatically initiate a call from their device. Here’s how they benefit your website:
Benefits of Clickable Phone Links:
- Improves User Experience (UX): On mobile devices, users can instantly dial a phone number without copying it or manually entering it, which saves time and reduces friction.
- Increases Conversions: For businesses that rely on phone calls for sales or customer support, tel links can boost conversions. Making it easier for users to contact you increases the likelihood that they will follow through.
- Mobile-First Design: As more web traffic comes from mobile devices, clickable phone links cater to mobile users. They provide a seamless, touch-friendly experience.
- Improves Accessibility: Tel links benefit users with disabilities or those who have difficulty copying phone numbers, allowing them to call with one click.
Does It Matter on Desktop?
For desktop users, clickable phone links don’t offer the same benefit. However, in some cases, the link may trigger VoIP (Voice over Internet Protocol) apps like Skype or Google Voice if installed, which allows users to make calls from their computer.
Tel links will not negatively impact desktop users. The phone number will remain visible and clickable, and it simply won’t do anything if the user doesn’t have a calling app set up.
How To Add Telephone links manually
Basic HTML Tel Link Code:
The format is similar to an anchor (<a>) tag used for regular links, but instead of a URL, you use the tel: scheme followed by the phone number.
<a href="tel:+447779283999">Call Us: 07779283999</a>
Add telephone link in elementor
add tel link within Text Editor Widget
- Inside the text editor create the text you want to link eg Call us now: 07779283999
- Highlight the text and click the link icon
- In the URL field type tel:07779283999 (replace this number with your actual number)
- Apply & save and remember to test
Insert the Tel link in a button
- Add button text
- Go to the link field type tel:07779283999 (replace number) – you can also use the dynamic URL
- Update the page and test
Insert the tel link in the icon widget
- Set your content within the widget
- In the link field add tel:+447779283999 (replacing the number) you can also use the dynamic URL
- Update the page and test
How To Add Telephone links with Dynamic contact URL feature in elementor
Smart links, also known as dynamic links, generally open an app or take another action when clicked. These smart links can be added to any widget that has a Link field eg button, icon etc
- Open the widget
- Click link
- Click dynamic to the right of link
- Click contact
- Select telephone
- Enter the phone number to call.
View the Video below on how to do this
View Video On updating in elementor
Conclusion
Adding a telephone link to your website is a simple yet effective way to improve user experience, especially for mobile visitors. By using the <a href="tel:"> tag, you make it easy for users to contact you with a single tap or click, increasing the likelihood of direct engagement.
Whether you’re running a business or offering support, providing a clear and convenient way to connect is key. With just a small tweak in your code, you can enhance accessibility and make your site more user-friendly. remember to test and include international code if needed, and remember to view my other blog post for top tips when adding a tel link into your website.
