a href = tel: This is how you create a clickable phone number link

A clickable telephone number on the imprint or support page is particularly recommended for websites and services that are accessed via mobile devices. When you tap it, the phone link leads directly to the device's telephony app. Copy or write down the number in order to then dial it again - this is no longer an annoying intermediate step. How you can link a phone number on your website, how to write the code correctly and how to do it all in WordPress, I'll show you in this guide.

Type a support number or hotline from the website? On the smartphone, there should be a clickable phone number link on the website! Here are the instructions for setting up the link.

Type a support number or hotline from the website? On the smartphone, there should be a clickable phone number link on the website! Here are the instructions for setting up the link.

a href = tel: Create a clickable telephone number as a link

Websites that are adapted to mobile devices, of course, have to be especially with regard to the design. The individual elements should be the right size in both portrait and landscape format and must not limit the text, images or other main content of the website too much. In terms of content, there is much more that mobile users can do on smartphones and tablets - for example, create a clickable telephone number link so that they can ask questions, give feedback, check orders and do similar things to your support with just one tap. 

The clickable phone number is created by converting the number shown as text into a link. Just like creating a link from the text in a blog post. However, a certain code must be used for this. And this is called "a href = tel:". The whole thing as complete HTML code with sample number looks like this:

491111111111 0111-11111

Link phone number in WordPress

In WordPress you can also enter the a href = tel: telephone link code described above in the text view; but there is also a somewhat simpler solution. To do this, you first create the page or the post in which you want to implement the number as a link to tap. At the appropriate place you then enter the number - as it should be displayed. Then you mark it, click on the "insert / change link" symbol in the menu bar and then enter tel: +491111111111; of course with the number you used instead of the ones;) Then confirm with the blue arrow next to the input field and you're done.

Embed a telephone link in WordPress - this can be done with the manual a href = tel: or with the editor help;)

Embed a telephone link in WordPress - this can be done with the manual a href = tel: or with the editor help;)

Spelling the telephone number correctly - you have to pay attention to that

As you have already seen in the example above, the sequence of numbers does not start with 0, as is common in Germany and other countries; because the web is designed for worldwide use. Accordingly, you first enter the country code and replace the leading zeros with the plus (+). For Germany this is +49, for Austria +43, for Switzerland +41. This is followed by the number (in this country without the zero in the area code) without spaces, hyphens, slashes or the like. If you pay attention to this, you can easily write the linked phone number correctly.

But attention: In some countries, the 0 of the local area code is used after the country code. You can find out whether this applies to your number with a test on your smartphone, if you simply link both spellings and tap them. The link that leads to the establishment of the call is the correct one. All country codes in the world can be found at Wikipedia.

-

Did you like the article and did the instructions on the blog help you? Then I would be happy if you the blog via a Steady Membership or at Patreon would support.

3 comments

  1. Peter Simon Hoehn says:

    Hi Sir Apfelot,

    Great contribution, that seems to be quite easy to insert a clickable telephone link on the website. I simply used your contribution here as a basis for further research on the topic. Did you know that the same mechanism can be used to set links to Skype? I think that's super interesting for website visitors who don't access their smartphone!

    Best regards,
    Peter Simon

  2. Sascha says:

    For Skype, the link must then be adapted as follows: From "tel: + 4911…" it must then be changed to "skype: + 491111…".

Leave a Comment

Your e-mail address will not be published.