Link to phone number website

Linking to a phone number on the webpage can be useful and modern phones automatically dial when you click on such a link. It’s a convenient and useful feature for your visitors.

Unfortunately, it works less well on computers because most people don’t have a phone on their computer. But for those who have, it works there too, of course.

The principle is very simple

A typical link looks like this kobotolo.se

kobotolo.se

A telephone link looks like this:

<a href="tel:1234567">Ring mig</a>

International numbers for links to telephone numbers

If you want an international number, add +46 for Swedish numbers in the usual way.

<a href="tel:+46500000000"
  >
Link text</a>

Many phone browsers find phone numbers and make them automatically clickable, but it’s always good to have control over the web page.

Other links that may be useful to know about

• mailto: – skicka ett mail, se https://wp-akuten.se/lank-till-mailadress/
• callto: open Skype
• sms: – send an SMS
• fax: – send a fax

When automatic telephone numbers cause problems

This can sometimes be a problem when mobiles automatically interpret digits as a phone number. A longer series of digits is not always a telephone number.

An example is a webpage I made where dates were used but interpreted as phone numbers by mobiles is djurfrid.se. It shows date of birth – date of death and unfortunately it was interpreted as a phone number on mobiles and became clickable.

This can be solved by adding some code that prevents mobiles from interpreting it as a link to phone number. If you add this code, you need to be careful with your links and format them as described above because you have turned off the automatic link conversion. This code goes in the header of your website and works whether you have a wordpress site or not.

  <meta name="format-detection" content="telephone=no">

Styling your links to phone numbers on the website

You can style the links to phone numbers as in Call Karin. The code works on all websites except the icon that is taken from the built-in icons in WordPress. If you have a different system, you will need to load a different icon library.

a[href^="tel:"] {
   color: brown;
   text-decoration: none;
   margin-right: 0.em;
}
a[href^="tel:"]:before {
   content: "\f525";
   font-family:"dashicons";
   color: brown;
   width:20px;
   display:inline-block;
}

Frequently asked questions about telephone links in HTML