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

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

Привет, друзья. Сегодня будет статья из раздела "must have". Все очень просто. Доля мобильных трафика растет с каждым годом, а большинство сайтов до сих пор не оптимизированы мобильные устройства. При создании лендинг пейдж это особенно актуально, так как мы должны сделать все, чтобы целевой аудитории было удобно и легко совершать важные для нас действия.  

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

На самом деле все очень просто и реализация похожа на создание ссылок на свои профили в мессенджерах, при нажатии на которые происходит переход в чат. Так вот с номером телефона - все аналогично. Опять все сводится к оформлению ссылки особым образом. Например:

<a href="tel:+380950000000">+3 8095 000 00 00</a>

или:

<a href="tel:+380950000000">Позвонить нам</a>

Но это, если у вас отдельная мобильная версия сайта. Просто хотел показать, что анкором ссылки не обязательно должен быть номер телефона.

Суть создания ссылки сводиться к тому, что в атрибуте href используется особый синтаксис. Вместо стандартный ссылки мы запишем tel: и полный номер в международном формате. Получается что-то вроде "tel:+74951182956".

Многие спрашивают как это реализовать на Тильде или другом конструкторе. Если это не какой-то особенный блок, а просто вы в html оформляете ссылку, то все точно также.

Конечно же ссылка вообще не обязана быть текстовой. Можно использовать любую картинку или иконку. Попробуйте сами, это очень удобно. Но если все так просто, так почему же вы до сих пор не используете это? Всем срочно менять! И не забудьте посмотреть статью о том, как оформлять адрес электронной почты на лендинге. А на сегодня - все. Пока.

4 комментария

  1. Анастасия

    Полезная тема, но. Хотелось бы поподробнее узнать про корректную запись самого номера в параметре «tel:». В примерах пишут то 12-значные номера с +3 или +1, то 11-значные с +7. А как правильно то? Например для московского номера и для 8-800..

    1. dimadv7

      Полный номер в международном формате, и точно будет правильно :)

  2. Бобур

    Здравствуйте у меня есть картинка написанная фотошопом и надо в самом фотошопе сделать кликабельной

    1. dimadv7

      Привет. Ну в чем проблема? ставь картинку на фон ссылки... Но такие вещи нужно делать текстом.

Добавить комментарий