Clickable Phone Number

Easy Dialing on Mobile Devices

Summary

Clickable telephone numbers allow a website visitor using a mobile device to easily make calls. The user taps the number and it opens the device's phone app. On a desktop or laptop computer, it appears as a link but is inert.

Audience

Editors,  Publishers, and Web Managers

How To

  • 1

    Context and Examples

    Clickable phone numbers activate the call feature of the mobile phone.
    The clickable link activates the phone's calling feature.

    Some mobile web browsers automatically convert 10-digit number strings into clickable phone numbers, but others do not. You can improve the website experience for your visitors by adding some simple HTML so that anyone accessing your content from a mobile device can easily click to place a call. 

    Navigate to this page on your mobile device and try the clickable phone number link examples provided below. Each example dials 1 (202) 762-1401, the phone number for the U.S. Naval Observatory Master Clock. When you place a successful call, you will hear several clicks followed by a recording that states the current time. This phone number allows you to test functionality without disturbing anyone. 

    Accordion
    Tab/Accordion Items

    Both devices shown below accessed the same page on a Digital Commons website. Phone numbers were entered as text in the Text Editor but without any HTML to indicate that they are meant to be clicked to place a call. One device/browser automatically converted them to clickable links while the other did not. You can create a consistent experience for your users across mobile devices by making phone numbers click-to-dial.  

    This phone did not convert phone numbers to links without the HTML added.
    This mobile device did not automatically convert the number strings to clickable phone numbers.
    This iPhone automatically converted phone numbers to links without the HTML added.
    This mobile device automatically converted the number strings to clickable phone numbers.

    Hyperlink

    Call (202) 762-1401

    Hyperlink with Button Styling

    Call (202) 762-1401

  • 2

    Format

    Web browsers recognize that "tel:" indicates a phone number. You will add this HTML before the phone number when you create the hyperlink (HTML + Phone number): 

    • HTML: tel:
    • Phone number: 1 (202) 762-1401
    • You will enter: tel:12027621401

    Notes:

    • The preceding "1" or country code is only necessary for international calls, but it is good practice to include it.
    • Parentheses and hyphens are not necessary in the phone number.
    • If you have difficulty reading the long string of digits, this format is acceptable: tel:+1-202-762-1401
  • 3

    Create the Clickable Link

    Text Editor

    Formatting a phone number in a text editor
    1. Enter the phone number as you usually would.
    2. Highlight the phone number.
    3. Select the Link button from the text editing toolbar.
    4. In the Link URL field, enter tel:12027621401
    5. If desired, style the link as a button by entering btn btn-primary in the CSS Classes field in the Advanced section.
    6. Save the component.
    7. Save the page.
    8. Place a test call by visiting the page from a mobile phone and tapping the link or button.

    Components and Content Types

    Settings for a CTA Card with a clickable phone number.
    1. In the Link URL field, enter tel:12027621401
    2. Save the component.
    3. Save the page.
    4. Place a test call by visiting the page from a mobile phone and tapping the link.