Кликабельный номер на сайте: почему ссылка может не запустить звонок
Основной способ не изменился: чтобы сделать номер телефона кликабельным, его помещают в обычную ссылку, а перед цифрами в адресе указывают схему tel:. Скрипт для этого не нужен.
При этом нажатие не гарантирует немедленный звонок. Сайт лишь передаёт номер устройству: смартфон обычно открывает экран вызова, а компьютер может предложить подходящую программу или сообщить, что обработчик не найден. Это различие важно учитывать при проверке страницы.
Готовая разметка кликабельного номера
Базовый вариант выглядит так:
<a href="tel:+74951234567">+7 (495) 123-45-67</a>
Первая запись после tel: — номер, который получит приложение для звонков. Текст между открывающим и закрывающим тегами видит посетитель. Поэтому внутри ссылки номер можно оформить привычно: добавить пробелы, скобки и дефисы, не меняя компактную запись в адресе.
Для общедоступного контакта предпочтительна международная запись: плюс, код страны и остальные цифры. Стандарт телефонных адресов определяет глобальную форму номера и отдельно указывает, что переход по такой ссылке не должен приводить к вызову без согласия пользователя.
Кавычки в примере относятся к разметке страницы, а не к номеру. Плюс перед кодом страны убирать не следует. В адрес ссылки также не нужно добавлять слова «телефон», «позвонить» или обозначения обычного веб-адреса.
Вместо номера разрешено показать подпись, например «Позвонить». Однако в разделе контактов полный номер полезнее: посетитель сразу видит, куда будет направлен вызов, и при необходимости может скопировать или переписать цифры. На отдельной кнопке уместен комбинированный вариант: «Позвонить +7 (495) 123-45-67».
Как добавить телефонную ссылку в конструкторе сайта
Если доступа к разметке нет, выделите номер в визуальном редакторе и откройте настройку ссылки. В поле адреса укажите tel:+74951234567. Некоторые системы предлагают отдельное действие «Телефон» — тогда достаточно выбрать его и ввести номер в предусмотренное поле.
Например, официальная инструкция Tilda предлагает назначить тексту адрес вида tel:+7123456789 без пробелов; в готовых блоках для этого также может использоваться специальное поле Phone. Английское название поля относится к интерфейсу самого конструктора, а итогом всё равно становится телефонная ссылка.
- Добавьте номер в текстовый блок, шапку, подвал, меню или кнопку.
- Выделите текст либо откройте параметры кнопки.
- Выберите добавление ссылки или действие «Телефон».
- Введите телефонную схему, плюс, код страны и номер без пробелов.
- Сохраните изменения и опубликуйте страницу.
- Откройте опубликованный вариант на смартфоне и сверьте номер на экране вызова.
Проверять только внутри редактора недостаточно: служебный режим может перехватывать нажатия, чтобы пользователь мог изменять блоки. Кроме того, автоматическое распознавание обычного текста зависит от браузера. Явно заданная ссылка сохраняет предусмотренное владельцем сайта действие.
Как оформить номер, чтобы его заметили
Телефон не обязан выглядеть как синяя подчёркнутая гиперссылка, но посетителю должно быть понятно, что на него можно нажать. Для этого подходят контрастный цвет, аккуратное подчёркивание, подпись «Позвонить» или кнопка с текстом. Ориентироваться только на смену указателя мыши нельзя: на сенсорном экране наведения нет.
В шапке сайта обычно достаточно самого номера и короткой подписи о времени работы. На странице контактов полезно сохранить номер обычным читаемым текстом внутри ссылки. Если главным действием страницы является звонок, ссылку можно оформить как заметную кнопку.
Стилизованная кнопка должна оставаться ссылкой, а не обычным блоком, реагирующим только на нажатие мышью. Это позволяет перейти к ней с клавиатуры и сохраняет понятное назначение элемента для вспомогательных программ. Видимый контур фокуса лучше не отключать, если вместо него не предусмотрено другое столь же заметное состояние.
Размер области нажатия тоже имеет значение. Если кликабельными сделаны только отдельные цифры или небольшая иконка, попасть по ним на телефоне трудно. У кнопки или строки контакта следует оставить достаточное пространство вокруг текста, не превращая соседние элементы в часть той же ссылки.
Ошибки, из-за которых номер не работает
Самая простая ошибка — записать в атрибуте только номер: href="+74951234567". Браузер может принять такую строку за относительный адрес страницы. Рабочее значение должно начинаться с tel:.
- Не добавляйте перед телефонной схемой обозначение защищённого или обычного веб-протокола.
- Не используйте локальный номер без кода страны, если сайт рассчитан на посетителей из разных регионов.
- Не помещайте телефонную ссылку внутрь другой ссылки, например внутрь целиком кликабельной карточки.
- Не прячьте контакт за одной иконкой без подписи или доступного текстового обозначения.
- Не меняйте только видимый текст, оставляя старые цифры в адресе ссылки.
Для добавочного номера предусмотрен параметр ext: условная запись может выглядеть как tel:+74951234567;ext=204. Однако автоматическая передача добавочного зависит от приложения и телефонной системы. Если этот сценарий важен, добавочный лучше также показать рядом текстом и проверить на устройствах аудитории.
Отдельного внимания требует динамическая подмена номеров в системах учёта звонков. Такой сервис может менять видимый контакт, адрес ссылки или оба значения. После подключения нужно убедиться, что цифры на странице совпадают с цифрами, которые устройство показывает перед вызовом, а программный код не создаёт одну ссылку внутри другой.
Как проверить кликабельный номер
Сначала откройте именно опубликованную страницу на смартфоне. Нажмите номер и проверьте, что на экране подтверждения указан нужный абонент. Совершать реальный звонок для такой проверки необязательно.
Справочник Mozilla по ссылкам отмечает, что результат перехода по телефонному адресу зависит от возможностей устройства. Поэтому отсутствие программы для звонков на настольном компьютере само по себе не доказывает ошибку в разметке.
- На узком экране номер виден полностью и не перекрывается другими элементами.
- Адрес ссылки содержит телефонную схему, плюс, код страны и правильные цифры.
- На смартфоне открывается экран вызова с ожидаемым номером.
- Ссылка доступна с клавиатуры, а состояние фокуса заметно.
- Текст хорошо различим на фоне во всех предусмотренных состояниях.
- После замены контакта обновлены шапка, подвал, меню и страница контактов.
Правильная конструкция состоит из двух частей: точного телефонного адреса и понятного видимого текста. Сайт инициирует передачу номера, но окончательный выбор приложения и подтверждение вызова остаются за устройством пользователя.
Читайте также:
Подпишитесь на рассылку
Получайте свежие новости Web3, AI и криптовалют прямо на вашу почту.