Как добавить ссылки на Viber, WhatsApp, электронную почту и телефон в HTML-документ

Юзабилити современных веб-ресурсов позволяют легко и быстро находить нужную информацию. Но интернет-пользователю этого уже не достаточно. Большое значение имеет возможность взаимодействия с различными ссылками, позволяющими установить быстрый контакт пользователя с желаемым ресурсом.
Наверняка многие из вас сталкивались с подобным вопросом: как добавить ссылки на мессенджеры, электронную почту и телефон в HTML разметку. Эта потребность возникает в связи с высоким спросом пользователей интернета, особенно часто использующих мобильные платформы. Вот несколько вариантов, как добавить в HTML-разметку кликабельные ссылки на Viber, WhatsApp, а также телефон и e-mail.

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

Ссылки на Viber

Для перехода по ссылке на Viber со стационарного ПК или планшета указывается код:

<a href="viber://chat?number=+79223332211">Ссылка на Viber</a>

Для перехода по ссылке на Viber с мобильных устройств используется следующий код:

<a href="viber://add?number=79223332211">Ссылка на Viber</a>

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

Ссылки на WhatsApp

Для перехода по ссылке на WhatsApp со стационарного ПК или планшета указывается код:

<a href="https://wa.me/79223332211">Ссылка на WhatsApp</a>

Для перехода по ссылке на WhatsApp с мобильных устройств используется следующий код:

<a href="whatsapp://send?phone=79223332211">Ссылка на WhatsApp</a>

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

Ссылка на электронную почту

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

<a href="mailto:email@yandex.ru">email@yandex.ru</a>

В данном примере используется вымышленный электронный адрес email@yandex.ru.

Ссылка на телефон

Для набора номера телефона с мобильных устройств нужно в гиперссылке HTML-документа указать URL-схему tel:

<a href="tel:+79223332211">+7 (922) 333-22-11</a>

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

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