Как сделать кликабельный номер телефона на сайте

Одним из важнейших элементов коммерческого сайта является наличие номера телефона. Как просто! Всего лишь несколько цифр, но именно они лучшим образом помогают связать интернет-рекламу с реальным миром.

Кликабельный номер телефона на сайте

С появлением мобильных устройств важно сделать номер телефона на сайте кликабельным, а не просто текстом и тем более картинкой. Теперь всего один клик отделяет вашего потенциального клиента от цели связаться с вами. Не нужно копировать и вставлять, запоминать в уме или записывать на бумаге.

Давайте поможем клиентам связаться с вами прямо сейчас. Рассмотрим, как сделать телефон на сайте в виде ссылки (кликабельным). Для этого необходимо использовать обычную ссылку c атрибутом tel:

<a href="tel:+79876543210">+7 (987) 654-32-10</a>

Правильный формат телефона на сайте

К сожалению, не существует общепринятых правил правильного формата телефона. Но все же стоит помнить о некоторых особенностях. 

  1. Чтобы телефон воспринимался мобильными устройствами даже как текст обязательно используйте префикс (код страны) +7 (987) 654-32-10.
  2. Код города или оператора мобильной связи можно указывать через пробел со скобками или без.
  3. В хвосте указываем цифры через пробелы или дефис, но только не слитно, так как визуально такой номер трудно воспринимать.

Как отключить выделение телефона

Существует проблема, когда кликабельный номер, на телефонах или ПК, не воспринимает ваши стили CSS, а использует свой невзрачный стиль. Всё работает, но такая ссылка выбивается из общего стиля на сайте.

Пример ссылки телефона на сайте

Чтобы отключить выделение номера телефона на мобильных устройствах можно воспользоваться одним из способов:

1. Добавить на все страницы сайта в <head></head> следующий код:

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

2. Если такой возможности нет, то используем свои стили, оборачивая номер телефона в

<span style=”ваши_стили”></span>

Ссылки на мессенджеры

Дополнением станут ссылки на популярные мессенджеры – хорошая альтернатива сотовой связи в наше время. При переходе по ссылке открывается необходимый мессенджер на телефоне или на ПК.

Ссылка Telegram на сайте

<a href="https://t.me/ваш_ник" target="_blank">Telegram</a>

Ссылка WhatsApp на сайте

<a href="https://api.whatsapp.com/send?phone=79876543210" target="_blank">WhatsApp</a>

Ссылка Viber на сайте

Работает только при условии, что пользователь открывает ссылку с установленным приложением Viber на его телефоне.

<a href="viber://add?number=79876543210">Viber</a>

Мы используем