In the era of smartphones, it is so helpful and time-saving, when the phone number and email address are clickable on the website. First of all, for business owners, secondly, for smartphone users. When you need to drop a quick email or make a call on the go, you just click on the link, and you are redirected to the email app or a call is being placed. The ability to get in touch with somebody in one click is a must-have nowadays.
In this article, I will show how to make phone and email links clickable on your website.
There are 3 ways to make a phone number clickable:
- in pure HTML
- in classic WordPress Gutenberg editor
- in Elementor Page Builder
How to Create a Clickable Phone Number with HTML
If your site is built with pure HTML, the click to call link will look this way:
You can replace the phone number with a text label, such as “Click to call” or “Call now”:
<a href="tel:123-456-7890">CLICK TO CALL</a>
For international companies, place a country code with a + before the phone number:
<a href="tel:+1123-456-7890">CLICK TO CALL</a>
Click to call links in WordPress Gutenberg editor
Are you more comfortable with the visual tab/WYSIWYG/TinyMCE editor? Here’s how you add phone links in Gutenberg editor:
- Edit your page or post in WordPress.
- Highlight the phone number or text you want to be clickable for calls.
- Click the “Hyperlink” button.
- Enter tel: followed by your phone number with no dashes.
- Apply the link.
- Update/publish your page or post.
That’s it. You’re done.
How to Create a Clickable Phone Number in Elementor Widgets
Use Smart Links
With Elementor Pro’s Dynamic Contact URL feature, you can quickly create “smart” links, such as clickable phone or mailto links from any widget that has a Link field, for example, the Button widget. Many other smart links can be created with this feature as well, including SMS message links, Whatsapp conversation links, Skype call links, Viber call links, Waze navigation links, Facebook Messenger links, and calendar event links.
You just need to carry out these simple steps:
- Drag and drop the Button widget on your page,
- Click on the Dynamic Tags icon on the very right of the Link field,
- Select the Contact URL option from the dropdown,
- Click on the wrench icon next to the Contact URL label to open the settings panel,
- Choose the needed link type, like tel,
- Enter the phone number. Fill in the rest button options. Done.
Generate phone and mailto links in Elementor manually
To manually create clickable phone and mailto links instead of the Smart Links, follow the instructions below:
Clickable Phone Links
To Create a Clickable Phone Link That Opens a Dial Dialog on Smartphones and Mobile Devices:
Enter tel: followed by the complete phone number, without dashes, like this:
Simply enter the appropriate mailto: code into the Link field of any linkable widget.
To Create a Basic Mailto Link, with the TO: field filled out:
Type mailto: followed by the email address to send the email to, as shown in the example below:
To Create a Mailto Link, with the TO: field and the SUBJECT: field filled out:
Add subject= followed by the text of the email’s subject
mailto:firstname.lastname@example.org?subject=Thank You For Getting In Touch
Nowadays the world of mobile devices has grown so much, that click-to-call links turn from simple convenience to absolute necessity. Most businesses have moved to smartphones. And it matters a lot if clients can reach you out with one tap on the mobile screen or not. Luckily, making phone numbers clickable is child’s play! Make sure you are reachable for your clients anytime through your website and let your business grow.