Как добавить ссылки на 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 protected]">[email protected]</a>
В данном примере используется вымышленный электронный адрес [email protected].
Ссылка на телефон
Для набора номера телефона с мобильных устройств нужно в гиперссылке HTML-документа указать URL-схему tel:
<a href="tel:+79223332211">+7 (922) 333-22-11</a>
В данном примере используется вымышленный номер телефона.
Первая цифра в номере (+7) означает код страны. Вы можете использовать код любой другой страны.
Размещение кликабельных контактных ссылок позволяет упростить и ускорить взаимодействие пользователей с нужными интернет-ресурсами. Каждый пользователь может выбрать для себя более удобный способ связи, будь то телефонный звонок или сообщение в мессендрере.
Как вставлять ссылки на электронную почту
Главная » Настройки
Настройки
Автор tiaurus Обновлено
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →
После того, как мы узнали, как вставлять ссылки на страницы в визуальном редакторе и режиме HTML, самое время вспомнить, что ссылки могут вести не только на какую-нибудь страницу, но и указывать на электронную почту. Многие предпочитают вставлять электронные адреса обычным текстом, забывая о том, что ссылки на электронную почту могут снабжаться дополнительными параметрами, делающими ваш сайт более удобным. Давайте рассмотрим несколько примеров.
Вставка ссылки на электронную почту мало чем отличается от вставки обычной ссылки, за исключением ее начинки. Вот так выглядит ссылка на электронный почтовый адрес:
<a href="mailto:tiaurus@msn.com">пишите письма</a>
Как видите, отличий мало, за исключением лишь того, что в качестве адреса фигурирует команда отправки почтового сообщения по определенному адресу. Если вы вставите эту ссылку на страницу, то при клике по ней для создания нового письма откроется почтовый клиент. Удобно? Несомненно!
Так как у электронного письма есть не только адрес получателя, но и тема, а так же содержание, то эту ссылку можно снабдить дополнительными параметрами. Давайте введем заранее заданную тему сообщения:
<a href="mailto:[email protected]?subject=Письмо c n-wp.ru">пишите письма</a>
Как видите, для того, чтобы при клике на ссылку автоматически создавалось письмо с темой «Письмо c n-wp.ru», нужно к адресу добавить ?subject=.
Можно так же задать и текст сообщения, который автоматически впишется в окно нового письма. Для этого существует параметр &Body=.
<a href="mailto:[email protected]?subject=Письмо c n-wp.ru&Body=Это текст сообщения">пишите письма</a>
Почтовое сообщение можно продублировать на определенный адрес — для этого в нем есть специальное поле.
Отвечает за это параметр &code=.
<a href="mailto:[email protected]?subject=Письмо c n-wp.ru&Body=Это текст сообщения&[email protected]">пишите письма</a>
Это письмо будет с темой «Письмо c n-wp.ru», в нем будет уже введен текст «Это текст сообщения», оно уйдет на адрес [email protected], и будет продублировано на адрес [email protected] (получатель увидит, что не он один получил это письмо — ему будет показан и дублирующий адрес). Но не всегда мы хотим, чтобы получатель видел, что кто-то еще получил письмо. Для этого придумали скрытые копии — соответствующее поле есть в форме нового письма почтового клиента. За скрытую копию отвечает параметр &bcode=.
<a href="mailto:[email protected]?subject=Письмо c n-wp.ru&Body=Это текст сообщения&[email protected]&[email protected]">пишите письма</a>
Получатель не увидит, что копия письма отправлена так же и на адрес [email protected]. Если вам не нужен какой-либо параметр, то просто не указывайте его.
Если нужно использовать несколько адресов, то перечислите их через запятую без пробелов.
Оцените автора
Как создать ссылку на почту и телефон в HTML?
Улучшить статью
Сохранить статью
- Последнее обновление: 10 окт, 2021
Улучшить статью
Сохранить статью
В этой статье мы рассмотрим пошаговый процесс создания ссылки HTML Mailto и звонка. Когда пользователь щелкает ссылку mailto, он открывает почтовый клиент по умолчанию в системе пользователя. Вы можете легко сделать эти типы интерактивных ссылок с помощью тега привязки.
Ссылка для отправки по электронной почте: Пользователи могут легко связаться с владельцами веб-сайтов или любым другим лицом с помощью ссылки по электронной почте. Ссылка Mailto перенаправляет пользователя в почтовый клиент и создает новую почту, адресовав письмо по ссылке mailto. Кроме того, мы можем указать тему и основной текст по умолчанию внутри ссылки mailto, что экономит время пользователей.
Следующие запросы и параметры в ссылку mailto:
- mailto: Он принимает адрес электронной почты получателя.
- cc: Это необязательный параметр. Он принимает другой адрес электронной почты, который получит копию.
- скрытая копия : Это также необязательный параметр. Он принимает один или несколько адресов электронной почты, которые получат скрытую копию.
- тема : В этом параметре вы можете назначить тему письма по умолчанию.
- body : позволяет установить основной текст по умолчанию. Однако это необязательно.
- ? : Это первый разделитель параметров.
- и : позволяет разделить более одного запроса.
Синтаксис:
" mailto:[email protected]">
Кроме того, пользователи могут добавлять темы по умолчанию для ссылки mailto.
Пример:
AT Geeksforgeekes
HTML
|
org" 
Выход:
9002 333.
0024 Поскольку мы добавили ссылку mailto, мы также можем добавить ссылку для вызова, используя HTML-тег привязки. Когда пользователь нажимает на ссылку вызова, он перенаправляет пользователя в приложение вызова по умолчанию с адресным номером телефона в ссылке вызова. Таким образом, пользователям не нужно набирать номер телефона, и они могут звонить напрямую, нажав кнопку вызова.Синтаксис:
Мы также можем добавить код страны перед номером телефона внутри ссылки.
позвонить в США
Различные действия при вызове:
- тел – для перенаправления в приложение вызова.
- звонок на – чтобы открыть приложение Skype.
- SMS – Для отправки текстового сообщения.
- факс – Для отправки факса.
Пример:
Пример:
HTML
1123-456-7890" .
Из курса: HTML для преподавателей
Видео заблокировано.
Разблокируйте полный курс сегодня
Присоединяйтесь сегодня, чтобы получить доступ к более чем 20 700 курсам, которые преподают отраслевые эксперты, или приобретите этот курс отдельно.
Начать бесплатную пробную версию на 1 месяц
Создание ссылки электронной почты
“
- [Преподаватель] Давайте создадим ссылку, которая автоматически открывает программу электронной почты учащегося и отправляет электронное письмо вам.
