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

Html код для кликабельного номера телефона

В начале рассмотрим случай, когда имеется доступ до HTML кода сайта.

Записанный номер телефона, являющийся обычным текстом, выглядит так:

С присвоенным классом — так:

Или вот так — с присвоением стилей шрифта, цвета, форматирования:

Бонус

Кстати, по этому же принципу вы можете сделать кликабельный email на своем сайте! Это важно для B2B — даже если доля мобильного трафика на сайт не очень высокая, все равно есть процент людей, которые захотят отправить вам вопрос, запросить коммерческое предложение или отправить спецификацию через мобильные устройства (смартфон или планшет).

Добавление на сайт

Вставьте следующий код в нужное место вашего сайта для показа кликабельной ссылки на телефон:

Если вместо телефона вы хотите видеть ссылку с текстом «Позвонить», то код будет таким:

При щелчке на такую ссылку откроется номернабиратель вашего устройства (планшет, телефон).

Добавочный номер

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

Если добавочный номер нужно вводить в тональном режиме, используйте разделитель w вместо p.

Заменить элемент

Мы можем заменить элементы в DOM с помощью JavaScript. В этом скрипте, если мы создали span для номера телефона, мы можем заменить его в DOM на <a> для меньших экранов. Что мы имеем:

Можно добавить немного jQuery и использовать метод replaceWith():

(Вы можете проделать то же самое с простым JavaScript, используя метод replaceChild().)

Теперь нам нужно условие, чтобы определить, когда заменять элемент. Поскольку мы выполняем это изменение основываясь на размере экрана, ширина экрана 700px в качестве триггера может обеспечить наилучшую гибкость. (Это не идеал, но никто не говорил, что создание веб-страниц – это легко)

Это демо-версия, демонстрирующая данную технику в случае, когда контейнер номера телефона имеет определённый размер.

Теперь у нас есть одновременно доступное и функциональное решение. Я вижу в этом смысл, хотя я слышал о проблемах, связанных с нарушением функций VoIP на немобильных экранах. Если вы хотели бы улучшить этот метод или имеете другое решение данного сценария, я бы с удовольствием о нем послушал. Удачи!

Звонок в один клик: проверяем ваш сайт

Кликабельный номер на сайте — это набор цифр, при нажатии по которому сразу выполняется вызов. Такая опция нужна специально для пользователей мобайла. Сделать звонок можно и с десктопа, если на ПК имеется ПО для разговоров.

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

Использовать активный номер на сайте важно по нескольким причинам:

Поведение пользователя в мобайле сильно отличается от поведения человека, который сидит за ПК. На небольшом экране не так удобно выделять, копировать и вставлять символы. Лишние пару секунд и несколько движений уже напрягают человека, привыкшего к быстроте и удобству. Высока вероятность того, что он отправится искать сайт другой компании, где совершить звонок будет легче. К тому же кликабельные номера уже давно стали обыденностью: неактивные цифры удивят пользователя.
Человек, открывший сайт в мобайле, не хочет подолгу выбирать и изучать товар. Есть вероятность того, что он не будет писать вам в чат или соцсеть, а сразу совершит звонок. Неактивный же номер станет препятствием на пути к покупке.
Почти половина людей, имеющих отрицательный опыт взаимодействия с мобильной версией страницы на сайт компании, не хотят больше ничего приобретать там. Неудавшаяся возможность совершить звонок — пользовательский опыт, который точно запомнится.
Согласно статистике, в России более половины пользователей пользуются интернетом с планшетов и смартфонов. И данные эти только растут. Это указывает на то, что для пользователей мобайла нужно создавать самые комфортные условия.

Читайте про операторов: 8922 какой оператор и регион

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

Как в html сделать ссылку на телефон, емейл и скайп | forwww

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

Все довольно просто:

<a href="tel:  74951234567"> 7 (495) 123-45-67</a>
<a href="mailto: example@mail.ru">example@mail.ru</a>
<a href="skype: someskype?call">someskype</a>

Атрибут нашего тега <a href=»»>, или hypertext reference, должен начинаться со специального слова, после которого идет двоеточие, и уже после мы пишем телефон, емейл или логин скайпа.

Кстати говоря, многие забывают выставлять ссылкам соответствующие события:

a:hover {}
a:link {}
a:visited {}
a:active {}

:hover — вид ссылки при наведении,
:link — непосещенные ссылки,
:visited — посещенные ссылки,
:active — вид активной ссылки.

Соответствующие стили можно задать через вышеперечисленные псевдоклассы.

Если на вашем сайте необходимо выполнить доработки по шаблону, или изменить вёрстку – обращайтесь 🙂

Как работают кликабельные ссылки

Сделать номер телефона кликабельным легко с помощью HTML5, который включает в себя специализированный протокол tel:.

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

При клике по такой ссылке на десктопе с установленным приложением Skype (или аналогичным) браузер запросит у вас подтверждение на открытие внешней программы.

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

Существует несколько простых способов, как сделать номер телефона кликабельным, не потеряв при этом оформление и стили:

Как сделать номер телефона кликабельным. инструкция

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

Вот как можно сделать это в конструкторе сайтов LPmotor:

Кликабельный skype

Также имеется возможность добавления кликабельной ссылки и на Skype:

Звонок со Skype на телефон возможен при такой ссылке:

Кликабельный номер mottor (lpmotor)

Существует несколько способов добавления в LPmotor.

Читайте про операторов: Как активировать сим карту Yota: на телефоне или планшете

1) Телефон как текст. Выделяется текст с телефоном в блоке и в панели редактирования нажимается кнопка добавления ссылки:

2) Набор номера при помощи кнопки. Для блока «Кнопка» в панели редактирования выставляется «Переход по ссылке» со вставкой номера в формате tel: 13335557799:

3) Набор номера при помощи картинки/иконки. В меню «Действие» вибирается «Переход по ссылке» с указанием номера телефона формата tel: 13335557799:

4) Вставка кликабельного номера html блоком посредством тега <a>:

с возможностью настройки шрифта, цвета, размера текста.

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

В среде WordPress существует несколько способов сделать телефон кликабельным. Первый подразумевает действия с HTML кодом, описанные в предыдущем параграфе.

Для второго необходимо использование специального плагина, например Call Now Button. Его установка не займет много времени.

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

В меню плагина имеется возможность настройки параметров и внешнего вида кнопки.

Кликабельный телефон tilda

Чтобы в конструкторе Tilda номер телефона стал кликабельным, требуется прикрепить ссылку.

В блоке меню ME301 вкладки «Контент» поля «Дополнительно» записывается номер телефона. Потом в выскакующей панели инструментов вставляется ссылка в формате tel: 13335557799. После проделанной операции номер телефона должен стать красного цвета. Сохраняем изменения, номер кликабелен.

Кликабельный телефон на wix

Для среды создания сайтов Wix применяются ниже перечисленные способы.

1) Создание кликабельного номера:

добавить текст;
нажать «Редактировать текст»;
ввести телефонный номер. В данном окне больше ничего не нужно вводить.

2) Связывание текста ссылкой с телефонным номером:

добавить текст;
нажать «Редактировать текст»;
ввести нужный текст («Звонок»);
выделить текст;
нажать на иконку «Ссылка»;
в меню выбрать «Номер телефона»;
ввести в поле сам номер;
нажать «Готово».

3) Связывание кнопки ссылкой с телефонным номером:

добавить кнопку;
изменить текст кнопки;
нажать на иконку «Ссылка»;
выбрать в меню «Номер телефона»;
ввести сам номер в выпадающем поле;
нажать «Готово».

Код страны

Коды стран могут быть добавлены в телефонный номер при помощи символа перед самим номером. Например, для России ( 7) это будет выглядеть так:

Микроразметка под seo

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

Решается этот вопрос при помощи микроданных и микроформатов. Добавив пару дополнительных тегов в разметку вашего сайта, вы получите кликабельный номер в SERP. Пользователи будут несказанно рады:

Повышение конверсии

Конверсия — событие, направленное на клиента, которое приводит к целевому действию (звонок, покупка, подписка, переход). Это отношение посетителей сайта, совершивших целевое действие, ко всем посетителям сайта.

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

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

Читайте про операторов: Как разблокировать симку Теле2: разные способы и варианты решений

Проверка возможности совершения звонка с одного клика на вашем сайте

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

Или откройте сайт с десктопа и кликните на телефон. Если он записан форматом click-to-call, должно появиться окно с выбором программы совершения вызова.

Создание ссылок на контакты, соц. сети и мессенджеры

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

в ссылке есть “зашитое” сообщение “Добрый день! Я хочу купить квартиру в Москве.“

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

В функционале любого конструктора или CMS-системы есть несколько особых инструментов, которые позволяют сделать номер кликабельным. Полную информацию вы найдете в разделе FAQ на соответствующей площадке (Tilda, Wix, LP и т.д.). Однако есть один способ, подходящий для любого конструктора.

Механизм «Гиперссылка» при форматировании текста доступен, как правило, везде. Цифры — это текст. Следовательно, вы можете ввести их в редактор. Чтобы номер был кликабельным, обозначьте текст номера, оформите его как гиперссылку, после чего в блоке «Адрес» пропишите следующее:

tel: 79998887766.

Гиперссылка включится автоматически.

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

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

Ссылки

phonestipstricks

У меня коллтрекинг. как быть?

Разберем на примере коллтрекинга Callibri (хотя вообще эти правила примерно так же работают для любого сервиса подмены номера).

За подмену номера отвечает атрибут class=”callibri_phone”. Если у вас есть активный настроенный проект, на сайте установлен скрипт и каждому номеру телефона в коде присвоен атрибут class=”callibri_phone”, подмена происходит автоматически. Скрипт Callibri сам находит нужные элементы с номерами телефонов и подменяет их.

В случае, если номер телефона на сайте не кликабельный, то и подменяться будет обычный номер в виде текста. Но если на ваш номер уже можно позвонить в один клик, скрипт Callibri c помощью class=”callibri_phone” подменит и номер, указанный в атрибуте “href=”tel:XXX”

на который происходит вызов

Если клиент нажмет на подменный номер, звонок также пройдет на подменный номер — вы не потеряете лид и сможете узнать откуда к вам пришёл клиент.

Код, в котором подменяется не только текст номера на сайте, но и номер для вызова, выглядит так:

Финал

Поздравляем, теперь вы достойны посвящения в мастера HTML.

Заключение

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

Правильная настройка сайта приводит к увеличению конверсии, что напрямую влияет на повышение доходности в целом.