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

   


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

[spoiler]

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


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

Этот способ подходит, если можно править 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>+7(945)123-45-67<br></span>.

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

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

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

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

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


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

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

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

tel:+79451234567.

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

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

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

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

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

Резюме

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

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

Новинка! INTEC рекомендует:


   






Читайте другие наши статьи:
По всем вопросам обращайтесь по телефонам:  8 (800) 100-45-85, 8 (351) 777-80-70, sale@intecweb.ru
С уважением к вам и вашему бизнесу,
Ярослав Голуб, руководитель интернет-агентства INTEC
Хотите быть в курсе всех наших обновлений? Тогда подпишитесь на нас в соцсетях!