Html номер телефона как ссылка

How to Add Telephone Links with HTML

Telephone links are the ones that you tap to call a number on phone-capable devices. Of course, some devices are able to recognize phone numbers and provide the linking automatically, but it’s not always so.

In the example below, we use :tel within the HTML <a> tag. Note that tel: is much like a protocol, and not a feature.

Example of adding a telephone link:

Result

There isn’t any documentation (official) on this protocol handler for links. That’s why there can be differences in browser support and behavior. Commonly, browsers make different decisions on determining what to do with the clicked link. Also note that we included the exact telephone number inside the href attribute, but the number shown to the user is the one between the a tags. So we can show numbers in any form/style, and also we can use white-space between the digits

Styling telephone links

You can use a little CSS to style your telephone link. Let’s see an example where we add color to our link with the CSS color property.

Example of adding color to the telephone link:

In our next example, we’ll add a phone character before the telephone number with the CSS ::before pseudo-element and content property.

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

Если на мобильной версии вашего сайта номер телефона указан в виде обычного текста — вы теряете клиентов.

В статье объясним, как отсутствие кликабельного номера влияет на конверсию, зачем вообще нужен кликабельный номер и как его установить на сайт.

Зачем нужен кликабельный номер на сайте

Объясняем, почему из-за текстового номера часть клиентов отваливается.

Пользователь заходит с устройства на мобильную версию сайта и видит контакт для связи. В нашем случае — номер телефона. Чтобы позвонить ему нужно скопировать номер, свернуть браузер с сайтом, перейти в режим набора, вставить, нажать на кнопку вызова. Или переписать на листочек, а потом набрать номер в свободное время (но человек может передумать к тому времени). Или нужно запоминать номер, а потом вводить его вручную. Если забыли цифру — нужно возвращаться на сайт, опять запоминать, потом опять сворачивать браузер и так по кругу. В среднем получается около 5 действий и больше. Представьте, если человеку нужно совершить несколько таких звонков.

С кликабельным номером пользователю нужно всего 3 действия — нажать на номер, выбрать способ звонка (через телефон или мессенджер), затем нажать кнопку вызова. Чем меньше действий, тем выше вероятность, что пользователь все-таки совершит звонок, а не отвалится на середине процесса.

Как установить кликабельный номер телефона на сайт — инструкция

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

Способ #1. Через html-код

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

Текстовый номер телефона (то есть некликабельный) может выглядеть по-разному:

Если это просто номер:

Если присвоен класс через CSS стили, то код может выглядеть так:

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

<div mobile text num» style=»color: #1f21ff; text-align: center» name=»phone_number»>+7(111)111-11-11</p>

Чтобы сделать номер кликабельным в код нужно добавить следующие элементы:

1. тег <a>…</a> (отвечает за возможность добавить гиперссылку в текст);
2. атрибут href=”” (отвечает за перенаправление по ссылке, ставится внутри предыдущего тега вместо трех точек);
3. параметр tel: (отвечает за вызов номера по клику, после двоеточия нужно указать номер телефона без пробелов);

То есть, для первого варианта (просто текстовый номер) конечный код будет выглядеть так:

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

<a href=”tel:+7(111)111-11-11”>Позвоните нам</a>

Если в коде был прописан класс (пример #2), то конечный кликабельный код с добавлением элементов выглядит следующим образом:

Третий номер (с применением шрифта, цвета, выравнивания), соответственно, выглядит так:

<div mobile text num» style=»color: #1ff1ff; text-align: center» name=»phone_number»>

P.S. Лучше, чтобы к номеру телефона были применены стили через CSS, потому что если просто сделать кликабельный текст (самый простой первый вариант), то он будет выделен синим цветом и с подчеркиванием, как обычная гиперссылка. Визуально выглядит непривлекательно.

Способ #2. Если сайт сделан на CMS или конструкторе

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

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

Вот у нас на странице блок с текстом, где указан номер телефона. Нужно выделить номер — появляется меню редактирования текста. В нем кликаем на инструмент добавления ссылок.

В поле «Укажите ссылку» прописываем tel:+71111111111. Номер телефона должен быть указан без пробела, кавычек и точек.

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

Жмем «Применить» и получаем кликабельный номер телефона.

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

В этом меню выбираем пункт «Номер телефона». Телефон указываем в формате +7(111)111-11-11.

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

Например, бесплатный плагин Call Now Button. Он добавляет заметную цветную кнопку с иконкой телефона и призывом позвонить. Все, что нужно — установить плагин в Вордпресс, указать в настройках номер телефона, цвет кнопки и ее местоположение на сайте.

Способ #3. Через сервис коллтрекинга

Современные сервисы коллтрекинга используют функцию подмены номеров. И чаще всего номерам присваиваются атрибуты (классы). Например, у коллтрекинга Callibri это и >

В этом коллтрекинге, если настроена автоподмена номера, ссылка будет иметь вид:

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

Как сделать кликабельный номер WhatsApp, Viber, Skype и Телеграм

Кликабельный телефон для мессенджеров делается через html-код, как мы описывали в способе #1 данной статьи. Отличается только сама гиперссылка.

Для WhatsApp:

Номер телефона в самой ссылке (в кавычках) указываем без скобок, пробелов и дефисов.

Для Viber:

Для Skype:

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

Если хотите, чтобы при клике по номеру скайпа автоматически открывался диалог, то вместо параметра call добавляем chat, получается:

Для Телеграм:

Можно добавить в текст короткую гиперссылку вида:

Ссылку можно найти в настройках аккаунта Телеграм. При клике на ссылку откроется диалог с пользователям, там же можно позвонить.

Примеры оформления кликабельных номеров

Телефон на сайте сервиса коллтрекинга Callibri. Тут его еще и подчеркнули для наглядности.

Кликабельный номер на сайте Тинькофф Банка. Визуально номер телефона никак не выделен, но при клике по нему можно совершить звонок.

Книжный магазин «Читай-город» — номер указан на сайте отдельным пунктом меню, вообще визуально не отличается от остальных пунктов.

Заключение

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

Как сделать ссылку на телефон HTML?

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

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

Навигация по статье:

В этой статье я покажу вам, как сделать ссылку на телефон HTML, а так же покажу, как можно ее оформить при помощи CSS.

Протокол HTML5 для ссылок на телефон

Для того чтобы сделать ваш телефонный номер кликабельным его необходимо обернуть в тег <a>…</a> и в атрибуте href указать протокол tel и через двоеточие указать номер без пробелов и дефисов:

Теперь клик по данной ссылке на телефон HTML будет восприниматься любым браузером на любом мобильном устройстве как команда к набору данного номера.

Решение проблемы с определением ссылки на телефон HTML на ПК

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

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

1. На странице там, где вам нужно разместить телефонный номер, вставляем пустой блок с уникальным идентификатором. В моем случае phone-link:

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

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

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

А когда необходимо обзвонить большое количество компаний? Найти и забронировать подходящее предложение или быстро заказать доставку выбранной еды? Тогда человек, сэкономив время на ctrl+C/ctrl+V, зайдет на сайт конкурентов и найдя схожие предложения, закажет.

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

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

Содержание

Важность использования кликабельных номеров телефона в мобильной версии сайта

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

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

Зависимость понятна: поскольку мобильные гаджеты становятся более доступными, растет мобильный трафик. Масштаб роста, представленный SimilarWeb, растет: при снижении настольного трафика (с 2017 до 2020 на 3,3%), мобильный вырастает в два раза за год (в 2018 по сравнению с 2017 на 10%, в 2019 по сравнению с 2018 на 18,5%). В 2020 и 2021 годах также сохраняется рост мобильного трафика.

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

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

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

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

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

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

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

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

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

Чтобы появилась возможность тексту содержать в себе гиперссылку (гипертекст) в HTML коде необходимо воспользоваться тегом a. Атрибутом привязки href=»» указывается куда будет ссылаться клиент при клике. В кавычках ставится параметр tel: после которого нужно указать номер телефона, на который будет производиться звонок. Номер вставляется в международном формате без тире и пробелов с плюсом впереди.

После изменений текстовый номер телефона теперь будет в таком виде:

Здесь получилось оставить номер телефона добавив действие — набор при клике на него.

Для второго примера вид будет такой:

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

Номер телефона следует прописывать дважды. Первый (в атрибуте href) — является ссылкой на номер. Второй — показывает как телефон будет отображаться на сайте.

В случае, когда вместо номера телефона необходимо поставить кнопку «Звонок», код будет иметь такой вид:

Конструктор сайтов / CMS

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

Функция установки гиперссылки в форматировании текста находится в каждом конструкторе сайтов. Номер является текстом, поэтому при вводе в редакторе выделите его и создайте гиперссылку, указав в поле адреса: tel:+1XXXXXXXXXX, где в значении «+1XXXXXXXXXX» необходимо вставить номер телефона, куда будет происходить звонок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если установлен коллтрекинг

При использовании динамического коллтрекинга на сайте с подменой номера он также может быть кликабельным.

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

Когда номер телефона сайта не кликабельный, подмена будет происходить номера в виде текста. В случае, когда уже возможен дозвон в один клик, скрипт подменит номер, указанный в атрибуте «href=»tel:» на который производятся звонки. Клиент, нажав на подменный номер, совершит звонок на указанный номер. В статистике отразятся данные о источнике — лид не потеряется.

Пример кода, в котором подмена на сайте будет как текста номера, так и номера для вызова:

где ccc — название в скрипте системы коллтрекинга, установленного на вашем сайте.

Неправильное применение

Не нужно прописывать кликабельный номер таким образом:

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

Такое написание также не желательно:

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

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

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

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

Кликабельная электронная почта

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

Для установки кликабельной почты необходимо в анкорный тег вставить атрибут href=”mailto:mmm”, где mmm — адрес электронной почты. При использовании email-трекинга также нужно верно разместить атрибуты для подмены как текста на сайте, так и адреса отправки письма:

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

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

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

Заключение

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

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