Html a href tel: Формат ссылки для телефонных звонков в мобильных браузераx (href=»tel:…»)

Телефонные ссылки

Роман Маркелов

Ведущий front-end разработчик

Задать вопрос

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

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

Раскройте все тонкости по использованию ссылок с телефонным протоколом с нашей помощью.

Использование по умолчанию

У нас есть сниппет для телефонных ссылок который был опубликован на css-tricks.com в 2011:

<a href="tel:1-562-867-5309">1-562-867-5309</a>

Он также работает и для текстовой ссылки:

<a href="tel:1-562-867-5309">Нажмите для вызова!</a>

tel: это не столько функция, сколько протокол, как и http: и mailto: — протоколы для свойств тега <a>. В спецификации об этом ничего не сказано, хотя HTML5 обеспечивает поддержку пользовательских обработчиков протоколов, если такой протокол допускается для использования устройством.

Протокол tel: используется по умолчанию, при том, что его официальная спецификация отсутствует. Он был предложен в стандартизацию еще в 2000 году и позже принят IOS, что делает его де-факто стандартизированным примерно в 2007. Есть и другие телефонные протоколы (которые рассмотрим чуть позже), но мы будем концентрироваться на tel: учитывая его относительную известность.

Поддержка браузеров

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

tel: может быть проигнорирован вовсе.

 

Браузер	Ссылка ли это?	При нажатии на эту ссылку. ..
Android	да	Запускает приложение телефона
BlackBerry 9900	да	Инициирует телефонный звонок
Chrome	да	Вызывается диалоговое окно, подтверждающие использование другого приложения
Edge	да	Вызывается диалоговое окно, подтверждающие использование другого приложения
Internet Explorer 11	да	Вызывается диалоговое окно, подтверждающие использование другого приложения
Internet Explorer 11 Mobile	да	Инициирует телефонный звонок
iOS	да	Вызываются параметры для вызова, сообщение, скопировать или добавить номер в приложение Контакты
Opera (OSX)	да	Вызывается диалоговое окно, подтверждающие использование другого приложения
Opera (Windows)	да	Вызывается диалоговое окно с сообщением об ошибке, которая не признает протокол
Safari	да	Запуск FaceTime

Стилизация телефонных ссылок

Стилизация телефонных номеров такая же, как и любых других ссылок. =»tel:»]:before { content: «\260e»; margin-right: 0.5em; }

Альтернатива телефонным ссылкам

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

• callto: точно такой же как tel: , но используется для инициирования вызовов через приложение Skype.
• auto-detected: многие браузеры автоматически определяют телефонный номер в формате HTML и создают телефонную ссылку, поэтому нет необходимости менять стили ссылки. Например, iOS создаст такую ссылку, но результат будет заметно отличаться от Chrome на Android.
• sms: пропустить вызов и перейти прямо к текстовым сообщением. Это возможность реализована только в некоторых браузерах.
• fax: возвращайтесь в будущее с факсами. Опять же, реализовано не во всех браузерах и не надежно.

Рассмотрим контекст

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

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

Использование кодов стран

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

    <a href="tel:+01-562-867-5309">1-562-867-5309</a>

Поисковая оптимизация

SEO-специалисты могли бы добавить больше по оптимизации телефонной ссылки чем я. Впрочем, Google предлагает структурированный формат данных для местных предприятий и его использование сделает телефонную ссылку более узнаваемой для поисковых роботов, форматируя их на страницах так, что номер становится более действенным. Dudley Storey предоставляет отличный обзор следующим примером:

    <div itemscope itemtype="http://schema.org/LocalBusiness">
      <h2 itemprop="name">Beach Bunny Swimwear</h2>
      Phone: 
      <span itemprop="telephone">
      <a href="tel:+18506484200">
       850-648-4200
      </a>
      </span>
    </div>

С другой стороны, если нужно, чтобы поисковые системы не следовали за телефонными ссылками, вы можете добавить rel="nofollow", тем самым препятствуя их индексации. Для ссылки, которая не обозначена как призыв к действию — это хорошая идея, так как веб-сканеры не попытаются пройти по ссылке «в никуда».

  <a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>

Отключение обнаружения номера в IOS

Если вы планируете добавить телефонные ссылки в верстку сайта, то можете рассмотреть возможность отключить авто определение телефонных номеров в IOS. Для отключения добавьте следующие строки в документе <head>:

  <meta name="format-detection" content="telephone=no">

Дальнейшее чтение

• Быстрый Совет: Сделать что-нибудь с телефонными номерами Tuts +
• Добавление телефонных номеров на веб-страницу с HTML5 и микроданными Dudley Storey
• Оригинальный проект предложения 2806, который был устаревшим Предложение 3966
• Apple, URL Схемы Справка

Оригинальная статья: The Current State of Telephone Links

Как делается кликабельная ссылка на телефон html

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

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

Классический способ

В атрибуте href должно быть указано: протокол tel: и номер телефона. Для удобства мобильных пользователей используйте международный формат.

<a href=»tel:+79150000000″>Позвоните нам!</a>

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

Можно добавить кликабельную html-ссылку на Skype:

<a href=»skype:nick»>Skype</a>

nick замените вашим логином программы Скайп.

Вот таким образом добавим html-ссылку для звонка со Skype на номер телефона:

<a href=»callto:+79160000000″>Позвонить нам с помощью Skype</a>

Для удобства посетителей посредством html и CSS мы можем выставлять определенные события:

a:hover {} — вид ссылки при наведении

a:link {} — непосещенные ссылки,

a:visited {} — посещенные ссылки

a:active {} — вид активной ссылки.

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

Вариант с картинкой

<a href=»tel:+79050000000″><img src=»button.png»></a>

img src=»button.png» — путь к вашей картинке, на которой изображен номер телефона или слово «Позвонить».

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

Так как по умолчанию мобильные девайсы пытаются распознать номера телефонов иногда может возникнуть ситуация, когда аппарат принимает за номер большую цену, артикул или иную последовательность цифр. Отключим данную функцию посредством html метатега, который размещается в разделе <head>:

<meta name=»format-detection» content=»telephone=no»>

Когда HTML не нужен

Номер телефона обычно вставляют в профиле Инстаграм. Однако одного номера может оказаться мало, к тому же часть пользователей предпочитает использовать для общения чат Viber, WhatsApp, Telegram. Каким образом это всё уместить? Выход из положения — сервис мультиссылок Hipolink. Здесь вы не только соберете все свои ссылки, но и получите готовые шаблоны лендинга, сайта-визитки и даже интернет-магазина. Доступна статистика о посетителях, которая позволит лучше взаимодействовать с клиентами. К моменту написания статьи сервисом пользуются больше 130 000 человек.

В чем преимущества Hipolink?

1. Простота создания и оформления красивой страницы

2. Настройка, оформление лендинга (60 готовых тем, создание уникального стиля)

3. Подключение дополнительных модулей (аналитика, метрика, прием платежей, CRM система, рекламная подписка и др.)

4. Квалифицированная круглосуточная поддержка.

Теперь вам не придется думать, что же предпочтительнее разместить в профиле Инстаграм — телефон, почту, мессенджер, ссылку на сайт. Плюс избавитесь от повторяющихся вопросов в Директе — «А как вам позвонить?», «Какая у вас почта?» и т.д.

На странице Хиполинк можно разместить исчерпывающую информацию:

— Ответы на частые вопросы

— Переход в Телеграм, Ватсапп, Вайбер

— Перенаправление в социальные сети

— Каталог товаров и услуг

— Формы заказа и оплаты

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

Для оформления номера в Хиполинк откройте конструктор, нажмите «Добавить новый блок», выберите «ссылки». В появившемся справа блоке нажмите «Телефон», заполните поля, нажмите «Применить».

Чтобы использовать приведенные выше примеры выберите HTML блок в панели редактирования, в правой части экрана вставьте код, нажмите «Принять». Для вставки следующего кода повторите операцию.

Использование скобок в HTML с «href=tel:»

Хороший вопрос. Трудно найти четкий авторитетный ответ относительно href="tel:" .

RFC 3986 (раздел 2.2) определяет круглые скобки как «зарезервированные разделители». Это означает, что они могут иметь особое значение при использовании в определенных частях URL-адреса. RFC говорит:

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

Если в компоненте URI обнаружен зарезервированный символ и для этого символа неизвестна ограничительная роль, то она должна быть интерпретируется как представляющий октет данных, соответствующий этому кодировка символов в US-ASCII.

(выделено мной)

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

Итак, да, вы можете использовать круглые скобки в href="tel:" ссылках и они должны работать во всех браузерах. Но, как и в случае любого веб-стандарта в реальном мире, производительность зависит от того, правильно ли каждый браузер реализует этот стандарт.

---

Однако , что касается вашего примера ( +33 (0) 123 456 7890

. ..что может привести к звонку на +33 0 1234567890.

Будет ли это работать? Может быть? Теперь мы входим на территорию маршрутизации телефонных номеров.

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

[код страны][код города][номер телефона] , например.

 +33 123 456 7890
 

или

 (0) 123 456 7890
 

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

---

В качестве примечания, согласно документу ITU (Международный союз электросвязи) E.123, раздел 7.2,

Символ ( ) не должен использоваться в международном номере.

Эта рекомендация касается того, как телефонные номера записываются , но имеет некоторое значение с точки зрения текста, который следует использовать при создании ссылки href="tel:" , и является причиной двух альтернативных примеров I предоставили выше.

(Спасибо @NiKiZe за эту полусвязанную информацию).

---

Наконец, вот некоторая полусвязанная полезная информация об обработке браузером телефонных ссылок: https://css-tricks.com/the-current-state-of-telephone-links/ )

Протоколы Tel-link используются для настройки опций вызова в режиме онлайн (щелчок для вызова). С помощью протокола tel-link на веб-сайте создается ссылка для звонка по номеру телефона, обычно в виде текстовой ссылки, кнопки или изображения. Нажав на эту ссылку, клиенты могут начать прямой телефонный звонок, связанный с номером телефона по вашему выбору. Большинство современных веб-браузеров поддерживают автоматическое определение номеров, поэтому телефонные номера автоматически превращаются в ссылки. Иногда вы можете захотеть сделать это самостоятельно.

Клиентам не нужно загружать программное обеспечение, кроме стандартных подключаемых модулей, таких как Flash. Это устраняет опасения по поводу загрузки вредоносного программного обеспечения, такого как вредоносное или шпионское ПО. Многие технологии «нажми и звони» представляют собой бесклиентскую услугу «веб-телефон», что означает, что вызов происходит за пределами компьютера пользователя.

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

Все просто. Скопируйте приведенный ниже код на свой сайт и замените номер телефона в кавычках на свой.

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

 1-234-567-1111
Нажмите, чтобы позвонить 

Хотите еще больше улучшить свой бизнес?

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

Если вы хотите узнать больше, ознакомьтесь с LiveAgent — Возможности прямо сейчас.

Попробуйте LiveAgent БЕСПЛАТНО

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

14-дневная бесплатная пробная версия Запланировать демонстрацию

Часто задаваемые вопросы

Что такое Tel Link?

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