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

Кликабельный номер – неотъемлемая опция современного сайта. Без нее вы можете потерять массу клиентов. Если на сайте номер телефона не кликабельный, а вставлен обычным текстом, то часть клиентов это оттолкнет, т.к. звонить попросту неудобно. Только представьте: надо выделить номер, скопировать его, свернуть браузер, открыть меню для ввода номера, вставить и только после этого звонить. Аж 6 действий! Ваши клиенты вряд ли захотят терять время на подобные манипуляции. Тем более, если через сайт конкурентов можно без проблем позвонить в одно нажатие.

Рассмотрим подробнее, как сделать телефонный номер кликабельным.

Способ первый. Коды сайта

Этот способ подходит, если можно править HTML-код. В нем обычный телефонный номер прописан так:

<span> +7 (945) 123-45-67 </span>

Если ему присвоен класс, то так:

<p class="phone"> +7 (945) 123-45-67 </p>.

Если к тексту применены стили, к примеру, цвета, шрифты, форматирование, код будет записан так:

<div id="number" class="phone mobile text num" style="color: #1f21ff;" name="phone_number"> +7 (945) 123-45-67 </p>.

Нужно вставить гиперссылку? Примените специальный тег <a>...</a>. А атрибут href="" уже направит пользователя на конкретную страницу. Напишите ее адрес внутри кавычек. Если хотите, чтобы номер был набран автоматически, используйте дополнительно tel:XXX. XXX – это номер телефона, пишите его без пробелов и тире.

В первом случае html-код будет прописан так:

<span><br><a href="tel: + 79451234567">+7(945)123-45-67</a><br></span>.

Во втором варианте так:

<p class="phone">
<br />
<a href="tel:+ 79451234567" >+7(945)123-45-67</a>
<br />
</p>

В третьем легко превратить номер телефона в гипертекст, сохранив все стили:

<div id="number" class="phone mobile text num" style="color: #1ff1ff;" name="phone_number"> <br> <a href="tel:+79451234567">+7(945)123-45-67</a> <br> </p>.

После всех изменений сохраните html-код. Теперь на сайте есть кликабельный номер!

Способ второй. Конструктор сайтов или CMS

В любом движке или конструкторе есть особые инструменты, которые делают номер кликабельным. Подробно об этом можно почитать в разделе FAQ.

Но есть один универсальный способ, который подходит для каждого конструктора.

Везде можно создать гиперссылку при форматировании текста. Цифры — это же тоже текст. Соответственно, их можно написать в редакторе, выделить и преобразовать в гиперссылку как обычный текст. А потом в блоке «Адрес» ввести телефонный номер: tel:+79451234567.

Гиперссылка автоматически будет активной.

Способ третий. Коллтрекинг

Если на сайте стоит коллтрекинг, при этом телефонный номер регулярно меняется, сделать его кликабельным можно.

Главное — запомнить, что за скрытие номера под другим видом отвечает атрибут class="callibri_phone"(для сервиса Сallibri). 

Если проект работает грамотно, на нем есть специальный скрипт, а к любому номеру в коде прикреплен данный атрибут. Подмена номера происходит автоматически. Скрипт системы коллтрекинга сам ищет нужные части с номерами телефонов и самостоятельно их заменяет.

Даже некликабельные цифры номера будут изменены. Если на номер телефона можно позвонить в одно нажатие, этот скрипт применит класс и подменит номер, который указан в атрибуте "href=tel:XXX.

Резюме

Кликабельный номер телефона — большой плюс для мобильной версии сайта. С ним вы станете значительно ближе к клиентам.

Если хотите сделать все проще и ничего не настраивать, установите на сайт сервис обратного звонка. Тогда вам смогут звонить даже те пользователи, которые посетили сайт с компьютера.