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

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

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

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

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

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

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

Содержание

  1. Важность использования кликабелных номеров
  2. Повышение конверсии
  3. HTML код кликабельного номера
  4. CMS / конструктор сайтов
  5. Кликабельный номер WordPress
  6. Click to call телефон Tilda
  7. Кликабельный номер LPmotor
  8. Click to call телефон Wix
  9. Если установлен коллтрекинг
  10. Неправильное применение
  11. Проверка возможности звонка на сайте
  12. Кликабельный email
  13. Кликабельный Skype
  14. Заключение

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

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

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

Выбор ресурса с кликабельным номером

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

График роста мобильного трафика к настольному

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

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

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

Конверсия звонков по кликабельности номера

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

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

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

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

<span>+1(333)555-77-99</span>

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

<div>
  <p class="phone”>+1(333)555-77-99</p>
</div>

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

<div id="number" class="phone mobile num" style="color: #00BFFF; text-align: right" name="phone">
  +1(333)555-77-99
</div>

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

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

<span>
  <a href=”tel:+13335557799”>+1(333)555-77-99</a>
</span>

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

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

<p class="phone”>
  <a href=”tel:+13335557799”>+1(333)555-77-99</a>
</p>

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

<div id="number" class="phone mobile num" style="color: #00BFFF; text-align: right" name="phone">
  <a href=”tel:+13335557799”>+1(333)555-77-99</a>
</div>
Вид телефонного номера с присвоенными стилями

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

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

<button>
  <a href=”tel:+13335557799”>Звонок</a>
</button>
Телефонный номер в виде кнопки

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

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

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

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

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

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

Плагин для кликабельного телефона

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

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

Настройки плагина call now button

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

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

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

Добавление телефона как ссылки в tilda

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

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

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

Телефон в виде текста LPmotor

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

Телефон как кнопка LPmotor

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

Телефон в виде картинки/иконки mottor

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

<a href=”tel:+13335557799”>
  Звонок +1(333)555-77-99
</a>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<p class="phone”>
  <a class=”ccc_phone” href=”tel:+13335557799”>+1(333)555-77-99</a>
</p>

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

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

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

<a class=”ccc_phone” href=”tel:+13335557799”>
  <span>+1(333)555-77-99</span>
</a>

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

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

<a href=”tel:+13335557799”>
  <p class="phone ccc_phone”>+1(333)555-77-99</p>
</a>

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

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

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

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

Звонок с десктопа на телефон

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

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

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

<a class=”ccc_email” href=”mailto:pochta@yashik.com”>pochta@yashik.com</a>

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

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

<a href="skype:nik">Skype</a>

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

<a href="callto:+13335557799">Звонок по Skype</a>

Заключение

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

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *