Телефонный номер в виде обычного текста в мобильной версии сайта — прямой путь к потере части клиентов. Далеко не каждый пользователь свернёт браузер, чтобы вручную набрать номер и позвонить. Расскажу, как сделать кликабельный номер телефона на сайте — и не упустить на этом этапе ни одного пользователя.
Пользователь заходит на мобильную версию сайта и видит телефонный номер для связи в виде обычного текста. Чтобы позвонить, ему нужно совершить несколько шагов:
Всё это отнимает немало времени, и многие люди предпочтут отложить звонок на другое время, когда будут менее заняты. Но чаще всего пользователи забывают о своих планах и уходят безвозвратно.
Когда номер кликабелен, то нужно только нажать на него, выбрать приложение для звонка и кликнуть на кнопку вызова. Не нужно тратить время на набор цифр и проверять, нет ли ошибок в цифрах. То есть, чем меньше действий необходимо совершить пользователю для звонка, тем выше вероятность успешного контакта.
Это способ подойдёт в случае, когда есть доступ к редактированию HTML-кода сайта. Прежде всего, создайте нужный элемент кода. Вот как это сделать:
| Напишите стандартный тег ссылки: | <a href=»»></a> |
| Внутри кавычек укажите номер без дефисов: | <a href=»1234567890«></a> |
| Чтобы идентифицировать цифры как телефонный номер, добавьте перед числовой комбинацией элемент «tel:»: | <a href=»tel:1234567890″></a> |
| Добавьте между угловыми скобками текст, который увидят пользователи. Текст может быть любым: | <a href=»tel:1234567890″>Позвоните нам по телефону 1234-567-890</a> |
| На сайте код отобразится в таком виде: | Позвоните нам по телефону 1234-567-890 |
Корректность созданного кода можно проверить в мобильной версии любого HTML онлайн-редактора. Вставьте написанный код в редактор и посмотрите, как надпись будет отображаться на сайте. Затем кликните на текст. Если ошибок нет, то система предложит выбрать приложение для звонка. При клике по значку телефона откроется окно с уже набранной комбинацией. Останется лишь нажать на кнопку вызова.
Созданный код вставьте в HTML-код сайта — в том месте, где элемент должен отображаться на странице.
Иногда необходимо переадресовать звонок конкретному отделу. Если для связи нужно набрать дополнительный внутренний номер, то в коде это реализуют так:
| Создайте код с основным номером: | <a href=»tel:1234567890″>Позвоните нам по телефону 1234-567-890</a> |
| После основного номера добавьте элемент «p». Такой код добавит паузу в одну секунду перед набором дополнительной комбинации: | <a href=»tel:1234567890p«>Позвоните нам по телефону 1234-567-890</a> |
| После «p» напишите дополнительный номер для связи с определённым отделом: | <a href=»tel:1234567890p345«>Позвоните нам по телефону 1234-567-890</a> |
Если вместо «p» добавить «w», то после набора основного номера система дождётся тонального сигнала и затем наберёт дополнительную комбинацию. На сайте надпись с дополнительным телефоном будет отображаться так, как указано в коде.
Если на сайте указан стационарный телефонный номер, то для быстрого набора дополнительно нужно указать код страны и города. Вот как это сделать:
| Напишите код основного номера: | <a href=»tel:1234567890″>Позвоните нам по телефону 1234-567-890</a> |
| Перед номером добавьте знак «+» укажите международный код страны: | <a href=»tel:+71234567890″>Позвоните нам по телефону 1234-567-890</a> |
| После международного кода добавьте код нужного города: | <a href=»tel:+74951234567890″>Позвоните нам по телефону 1234-567-890</a> |
| Укажите в отображаемом тексте номер телефона вместе с кодом: | <a href=»tel:+74951234567890″>Позвоните нам по телефону +7 (495) 1234-567-890</a> |
В номере добавлены дефисы. Такой код сработает не на всех устройствах.
|
Неверно: <a href=»tel:123-456-78-90«>Позвоните нам: 1234-567-890</a> |
Верно: <a href=»tel:1234567890«>Позвоните нам: 1234-567-890</a> |
Нет двоеточия после элемента tel.
|
Неверно: <a href=»tel1234567890″>Позвоните нам: 1234-567-890</a> |
Верно: <a href=»tel:1234567890″>Позвоните нам: 1234-567-890</a> |
Не добавлены кавычки в HTML.
|
Неверно: <a href=tel:1234567890>Позвоните нам: 1234-567-890</a> |
Верно: <a href=«tel:1234567890«>Позвоните нам: 1234-567-890</a> |
Как правило, редактирование HTML-кода недоступно, если сайт сделан на конструкторе. В этом случае номер телефона можно сделать кликабельным с помощью гиперссылки. Разберём, как это сделать, на примере конструктора сайтов Tilda:
Откройте редактор конструктора и в нужном блоке укажите текст, который должны увидеть пользователи.
Выделите ту часть текста, которая станет кликабельной ссылкой. Найдите на панели инструментов функцию добавления ссылки и кликните на значок.
В открывшемся окошке в поле «Укажите ссылку» напишите элемент «tel:» и номер телефона — tel:+74951234567. Значение в поле «Текст» можно оставить без изменений или отредактировать. После указания всех данных нажмите на «Применить».
Чтобы внесённое изменение отобразилось на сайте, подтвердите действие — нажмите на «Опубликовать».
В настройках ссылки можно дополнительно отредактировать цвет и стиль текста.
Указанный на странице номер станет кликабельным. Это легко проверить в мобильной версии сайта.
В данном случае элемент tel: задаёт тип ссылки и указывает на то, что нужно открыть приложение для звонков. Похожим образом создают кликабельный номер телефона и в других конструкторах сайтов.
Чтобы пользователь мог позвонить, кликнув на кнопку, нужно «вшить» ссылку на звонок. Вот как это сделать на примере конструктора Tilda:
Добавьте кнопку на страницу в нужном месте и перейдите в раздел редактирования контента.
В поле «Текст кнопки» напишите текст, который пользователи увидят на кнопке. В поле «Ссылка для кнопки» напишите элемент tel: и номер — tel:+74951234567.
Сохраните изменения, нажав на надпись «Опубликовать».
Проверьте работоспособность кнопки в мобильной версии сайта.
Точно таким же способом можно скрыть ссылку на звонок под любым изображением.
Некоторые пользователи предпочитают общаться в мессенджерах. Чтобы сделать кликабельный номер WhatsApp, Skype или Telegram, нужно использовать соответствующую гиперссылку или HTML-код.
Чтобы добавить ссылку на WhatsApp в HTML-код, используйте такой код:
<a href=»https://wa.me/71234567890″>Написать в WhatsApp</a>
Номер телефона указывайте полностью, включая код страны и код региона. Не пишите «+» или иные символы.
Для добавления ссылки на WhatsApp с помощью гиперссылки, используйте следующий шаблон:
https://wa.me/71234567890
Откройте страницу сайта в режиме редактирования. Выделите текст, который станет кликабельной ссылкой. Например, «Связаться по WhatsApp». Добавьте гиперссылку и сохраните изменения.
Когда пользователь кликнет по ссылке, откроется чат в WhatsApp на мобильном устройстве или страница перехода в чат в веб-версии мессенджера на ПК. После перехода в чат пользователь может написать или позвонить.
Также гиперссылку на WhatsApp можно добавить к любому изображению или кнопке.
Для добавления ссылки на Skype в HTML-код используйте такую комбинацию:
<a href=»skype:skype_user?call»>Позвонить по Skype</a>
В этом коде skype_user — это логин пользователя в Skype. Добавление параметра call позволяет начать звонок сразу после клика по ссылке. Если не указывать этот параметр, то откроется профиль пользователя.
Чтобы по клику открывался чат в Skype, используйте HTML-код такого формата:
<a href=»skype:skype_user?chat»>Написать в Skype</a>
Чтобы перенаправить пользователей в Skype с помощью гиперссылки, используйте такой шаблон:
skype:skype_user?chat
Гиперссылку можно добавить на любую фразу, кнопку или изображение.
HTML-код для создания кликабельной ссылки на Telegram выглядит так:
<a href=»https://t.me/<имя_пользователя >»>Написать в чат Telegram</a>
Имя пользователя можно скопировать в настройках мессенджера в разделе «Мой аккаунт».
Для создания гиперссылки на Telegram используйте такой шаблон:
https://t.me/имя_пользователя
Вместо имени пользователя можно указать телефонный номер в международном формате:
https://t.me/+71234567890
При клике по ссылке откроется страница в новой вкладке. Пользователю будет предложено открыть Telegram, если приложение установлено на компьютере или телефоне. После открытия чата можно написать или позвонить.
Внутри конструктора Unisender — ИИ-ассистент. Поможет составить тему, проверить ошибки в тексте, нарисовать картинку. И даст рекомендации как маркетолог или психолог.
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.
