To make a phone number clickable on your website, link it to a telephone address beginning with tel:. A button labeled “Call our office” can use the same destination. On a compatible phone, tapping it opens the calling interface rather than making the visitor copy the number.
For a plumber, electrician, roofer, or HVAC contractor, start with a visible call link near the top of the mobile page. Then check the number it actually opens. Changing the displayed text alone may leave an old number hidden in the link.
Why a mobile call link matters
MDN documents telephone links as a supported use of the HTML anchor element. WordPress notes that mobile browsers do not all automatically turn plain phone numbers into clickable links. An explicit telephone link avoids depending on that automatic detection. [1][2]
The practical benefit is straightforward: a customer who wants to call has a direct route to the dialer. That is a usability improvement, not a promise of more leads or higher Google rankings. Your business still needs to handle the call or provide accurate voicemail instructions.
Run this two-minute phone check
Use your own website and business number. Allow roughly two minutes for this initial check; investigating failures may take longer.
- Open the live homepage on your phone, outside the website editor. Can you see the number or a clearly labeled call button without scrolling?
- Tap it. Check the digits shown in the dialer or confirmation prompt. Cancel before placing a call unless your team is expecting a test.
- Open your main service page and repeat. Someone searching for roof repair may land there instead of your homepage.
- Scroll and open the menu. Check whether a banner, chat widget, or fixed navigation covers the call control.
Pass means the contact route is visible, tappable, and points to your correct number. A successful dialer prompt alone does not prove the call reaches your office.
Use the right telephone link format
Use tel: followed by +, the country code, and the complete national number. The US and Canada use +1. UK numbers use +44; omit the domestic leading zero when converting to international format.
This example uses a fictional US number from NANPA's reserved 555-0100–0199 range. Replace both the destination and visible number before using it; do not call the example. [3]
<a href="tel:+19375550123">Call our office: (937) 555-0123</a>
The visible text can include spaces and parentheses. For the destination, a plus sign and digits are easiest to check. Spaces are not permitted as visual separators in the telephone URI standard. Parentheses and hyphens are permitted separators, so their presence alone does not prove a link is broken; leaving them out reduces copying mistakes. [4]
Add the link in your website editor
Save a backup or revision first. Editor labels can vary by version. Preview your change, then have the authorized site owner publish it and test the live page.
WordPress
In the block editor, add a Buttons block and select its button. Enter a clear label, open the link control, and enter your telephone destination, such as tel:+19375550123 with your real number substituted. Apply the link and save. For ordinary text, select the displayed number and use the same link control. WordPress documents telephone links for both text and buttons. [2]
A page builder or theme header may have a separate button setting. Update that location too if it contains the old number.
Wix
In Wix Editor, add or select a button and click its Link icon. Choose Phone number, enter your actual number with its country code, and click Done. Use the dedicated phone field rather than treating the number as a web address. Check the button label and mobile layout, then preview and test after publication. Wix documents this phone-number link type and notes that desktop devices may open a calling app. [5]
If you'd like help checking the customer-facing result, Pakun offers a free website audit.
Squarespace
Add or edit a Button block, give it a clear call label, and open its link settings. Look for a Phone link type and enter your number. If your editor instead provides a URL field that accepts telephone links, enter the full tel: destination. Save the block and page, then test the published mobile view.
Controls differ between editor versions. If neither route is available, ask your site administrator to confirm the supported phone-link option rather than saving the number as an ordinary web address. The official linking guide is listed below, with a retrieval limitation noted. [6]
Plain HTML
Use an anchor link, optionally styled to look like a button. No JavaScript is needed for the basic phone link. This illustrative styling is not fixed-position:
<a href="tel:+19375550123"
style="display:inline-block;padding:1rem;background:#17324d;color:#fff;border-radius:.25rem;">
Call our office: (937) 555-0123
</a>
Keep visible keyboard focus and a meaningful text label. Avoid an unlabeled phone icon as the only clue.
Put the button where customers can reach it
Place it in the mobile header or opening section, alongside your service and location. Keep your business hours nearby if calls are only handled during those hours. “Call our office” is safer than “Emergency response” when you do not offer emergency service.
A fixed bottom call bar can keep the link available while someone scrolls. Treat it as optional: reserve enough space so it never hides text, form controls, or consent buttons. Test with the keyboard open and text enlarged. Start with a normal top-of-page button if you cannot reliably manage those overlaps.
Common mistakes to catch
- Number shown only in an image: Add real text with a telephone link. An unlinked logo or banner provides no explicit call action.
- Wrong destination: Compare the displayed number with the link, including its country code. Check headers, footers, and mobile-only buttons separately.
- Incorrect prefix: Use
tel:, nothttps://tel:. Remove accidental spaces from the destination. - Desktop confusion: A computer may open a configured calling app, ask which app to use, or have no suitable handler. Keep the number readable so visitors can dial manually. Test mobile behavior separately. [5]
Check whether the change helps
Arrange a test call to your own business during an agreed time. Confirm that it reaches the intended line and that voicemail behaves as advertised. Retest after changing the number, theme, or header.
If you already use consent-appropriate analytics, ask your developer to record telephone-link clicks with the page and button position. Verify the event without blocking the link. Treat a tap as a contact attempt, not a connected call or booked job.
Compare similar periods before and after the change, considering mobile traffic and business hours. Track answered calls and suitable inquiries separately. A small change in counts cannot establish that the button caused more business.
For another perspective, request Pakun's free website audit. You receive practical improvements by email based on your website and publicly visible Google Business Profile, without an obligation to buy.
Sources
- MDN, “The Anchor element.” https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a — Accessed November 1, 2026.
- WordPress.com Support, “Create an email or call link.” https://wordpress.com/support/email-links/ — Accessed November 1, 2026.
- NANPA, “555 Line Numbers.” https://www.nanpa.com/numbering/555-line-numbers — Accessed November 1, 2026. Reserved fictional-number range.
- IETF/RFC Editor, RFC 3966, “The tel URI for Telephone Numbers,” sections 3 and 5.1.1. https://www.rfc-editor.org/rfc/rfc3966 — Accessed November 1, 2026.
- Wix Help Center, “Wix Editor: Adding a Link to a Button.” https://support.wix.com/en/article/wix-editor-adding-a-link-to-a-button — Accessed November 1, 2026.
- Squarespace Help Center, “Add links to your site.” https://support.squarespace.com/hc/en-us/articles/206232858 — Access attempted November 1, 2026; only the heading was retrievable. Current editor steps require confirmation before publication.