Делаем номер телефона на сайте кликабельным
29 июня 2021
Автор: INTEC Волшебник
![Фото 1: «Делаем номер телефона на сайте кликабельным»](https://intecweb.ru/upload/blog/new_update/%D0%9C%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%BF%D0%BB%D0%B5%D0%B9%D1%81-01.png)
Кликабельный номер – неотъемлемая опция современного сайта. Без нее вы можете потерять массу клиентов. Если на сайте номер телефона не кликабельный, а вставлен обычным текстом, то часть клиентов это оттолкнет, т.к. звонить попросту неудобно. Только представьте: надо выделить номер, скопировать его, свернуть браузер, открыть меню для ввода номера, вставить и только после этого звонить. Аж 6 действий! Ваши клиенты вряд ли захотят терять время на подобные манипуляции. Тем более, если через сайт конкурентов можно без проблем позвонить в одно нажатие.
Рассмотрим подробнее, как сделать телефонный номер кликабельным.
![Фото 2: «Делаем номер телефона на сайте кликабельным»](https://intecweb.ru/upload/medialibrary/5a2/rda328t2g7htd432kokqvo9f99zdoouf/6173c962bfbc30aef81216817588c2a8452f160f.png)
Способ первый. Коды сайта
Этот способ подходит, если можно править HTML-код. В нем обычный телефонный номер прописан так:
<span> +7 (778) 003-002-0 </span>
Если ему присвоен класс, то так:
<p class="phone"> +7 (778) 003-002-0 </p>.
Если к тексту применены стили, к примеру, цвета, шрифты, форматирование, код будет записан так:
<div id="number" class="phone mobile text num" style="color: #1f21ff;" name="phone_number"> +7 (778) 003-002-0 </p>.
Нужно вставить гиперссылку? Примените специальный тег <a>...</a>. А атрибут href="https://ready.website" уже направит пользователя на конкретную страницу. Напишите ее адрес внутри кавычек. Если хотите, чтобы номер был набран автоматически, используйте дополнительно tel:XXX. XXX – это номер телефона, пишите его без пробелов и тире.
В первом случае html-код будет прописан так:
<span><br>
Во втором варианте так:
<p class="phone">
<br />
<br />
</p>
В третьем легко превратить номер телефона в гипертекст, сохранив все стили:
<div id="number" class="phone mobile text num" style="color: #1ff1ff;" name="phone_number"> <br>
После всех изменений сохраните html-код. Теперь на сайте есть кликабельный номер!
![Фото 3: «Делаем номер телефона на сайте кликабельным»](https://intecweb.ru/upload/medialibrary/dbd/vy4ugiq4ir4gxizp0eyg8wr4um1y50u9/mobile_vs_desktop_1-_1_.png)
Способ второй. Конструктор сайтов или CMS
В любом движке или конструкторе есть особые инструменты, которые делают номер кликабельным. Подробно об этом можно почитать в разделе FAQ.
Но есть один универсальный способ, который подходит для каждого конструктора.
Везде можно создать гиперссылку при форматировании текста. Цифры — это же тоже текст. Соответственно, их можно написать в редакторе, выделить и преобразовать в гиперссылку как обычный текст. А потом в блоке «Адрес» ввести телефонный номер:
tel:+77780030020.
Гиперссылка автоматически будет активной.
Способ третий. Коллтрекинг
Если на сайте стоит коллтрекинг, при этом телефонный номер регулярно меняется, сделать его кликабельным можно.
Главное — запомнить, что за скрытие номера под другим видом отвечает атрибут class="callibri_phone".
Если проект работает грамотно, на нем есть специальный скрипт, а к любому номеру в коде прикреплен данный атрибут. Подмена номера происходит автоматически. Скрипт системы коллтрекинга сам ищет нужные части с номерами телефонов и самостоятельно их заменяет.
Даже некликабельные цифры номера будут изменены. Если на номер телефона можно позвонить в одно нажатие, этот скрипт применит класс и подменит номер, который указан в атрибуте "href=tel:XXX.
Резюме
Кликабельный номер телефона — большой плюс для мобильной версии сайта. С ним вы станете значительно ближе к клиентам.
Если хотите сделать все проще и ничего не настраивать, установите на сайт сервис обратного звонка Callibri. Тогда вам смогут звонить даже те пользователи, которые посетили сайт на компьютере.