Как в письме сделать ссылку на сайт

Ссылки mailto: что это такое и как добавить в электронное письмо

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

Зачем все это нужно в рассылках и как создать mailto-ссылку – рассказываем в сегодняшней статье.

Особенности ссылки mailto

Чтобы понять, как именно работает ссылка mailto, посмотрите на скриншот ниже:

В этом письме читателю предлагается написать на почту, чтобы подобрать сценарий для Нового года и организовать идеальный корпоратив для всей команды – онлайн или офлайн. По клику на адрес электронной почты автоматически открывается окно для отправки письма. Вместе с этим указывается адресат и тема «Организация корпоративного мероприятия на Новый год 2021».

Все это работает благодаря ссылке mailto, которая также помогает:

• Упростить процесс ответа на письмо. Когда автоматически заполняются некоторые поля при создании электронного письма, пользователю требуется меньше шагов, чтобы отправить сообщение. Такой подход поможет вам увеличить количество ответов и повысить лояльность аудитории. Последнее связано с тем, что людям нравится, когда за них совершают даже такие простые шаги как заполнение полей.
• Облегчить обработку писем от подписчиков. При использовании ссылки mailto вы всегда будете знать, по какой теме к вам обращается пользователь. Кроме того, можно настроить фильтрацию по теме или телу письма – таким образом в вашем почтовом ящике всегда все будет структурировано и понятно.

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Основные составляющие ссылки mailto

По умолчанию mailto состоит из одного адреса электронной почты. Выглядит она следующим образом:

В почте такой формат должен использоваться в виде HTML-кода с добавлением тега «a» и названия:

Если открыть письмо, то такая конструкция преобразуется в рабочую ссылку:

Таким образом вы можете сделать кнопку, которая будет открывать почтовый клиент с заполненным полем «Получатель». Но, как мы уже говорили выше, это далеко не все, что умеет ссылка mailto. В нее также можно добавить и другие атрибуты:

• subject – позволяет автоматически заполнить тему сообщения;
• cc и bcc – используются для указания кого-то в копии;
• body – с помощью этого параметра можно добавить текст письма.

Теперь давайте попробуем добавить эти атрибуты в ссылку. Чтобы это сделать, потребуется воспользоваться дополнительными символами. Вопрос «?» нужен, чтобы отделить адрес получателя от других параметров. А знак амперсанда «&» необходим для связки атрибутов.

По клику на такую ссылку откроется окно со следующими данными:

Обратите внимание, что для использования пробелов или вопросительных и восклицательных знаков нужно будет добавить специальные символы. Например, вопрос заменяется на %3F, а пробел на %20.

Выглядеть это может следующим образом:

Изучить кодировку символов вы можете в подробном руководстве от W3schools.

Как добавить mailto-ссылку в письмо

Итак, мы разобрались как создается ссылка mailto, теперь давайте добавим ее в свое письмо. Для примера воспользуемся сервисом рассылок Cheapsender. Все, что вам нужно, – пройти регистрацию, создать шаблон и добавить в него кнопку с использованием префикса.

Рассмотрим все по порядку:

1. Открываем официальную страницу сервиса и нажимаем «Попробовать бесплатно».
2. Заполняем поля и нажимаем «Зарегистрироваться».
3. Подтверждаем адрес электронной почты и переходим в личный кабинет. Там нажимаем «Создать рассылку».
4. Выбираем готовый шаблон либо в разделе «Новый шаблон» применяем конструктор шаблонов. Для примера воспользуемся вторым вариантом.
5. Осталось добавить элемент и вставить в него ссылку mailto. Для примера воспользуемся кнопкой – перетаскиваем ее из правой части на холст.
6. Кликаем по кнопке и добавляем в нее нужную ссылку через раздел «Действие». Обратите внимание, что HTML-теги использовать не нужно. Достаточно указать формат типа «mailto:example@gmail.com?subject=Вопрос&body=Привет» без кавычек. В таком случае сервис сразу же вас поймет и преобразует окно редактирования.

С помощью Cheapsender вам необязательно использовать сложные формулы с различными атрибутами. Вы можете выбрать функцию «Отправить письмо» и указать все значения самостоятельно. Ссылка mailto сгенерируется автоматически. Если нужно изменить название кнопки, то кликните по ней двойным щелчком мыши и введите желаемое имя. Изменить дизайн также можно – для этого в правой части есть отдельные разделы.

Когда ваше письмо будет полностью оформлено, вы можете его протестировать. Для этого используйте кнопку «Тестовое письмо», которая находится в верхнем правом углу конструктора. Кроме того, вы можете отправить до 100 писем бесплатно, а пакет для рассылки на 5000 писем обойдется всего в 70 рублей.

Сервисы для генерации ссылки mailto

Рассмотрим еще несколько ресурсов, которые помогут вам быстро сгенерировать ссылку mailto. Они будут полезны, если вы планируете создавать рассылку с использованием HTML-кода.

Вам может пригодиться:

• Mailtolinkgenerator. Простой в использовании сервис – достаточно ввести нужные параметры и нажать на кнопку «Generate my mailto link».

• Parcel. Аналог предыдущего сервиса, только кликать на кнопку не нужно – все происходит в автоматическом режиме. Также можно проверить работу ссылки mailto прямо на платформе.

• Mailtolink. Здесь также генерация происходит в автоматическом режиме. Все, что нужно, – заполнить необходимые поля и скопировать полученный код.

Заключение

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

Чтобы создать ссылку mailto, достаточно добавить префикс и после двоеточия прописать нужный адрес, тему сообщения и текст письма. Для быстрой генерации используйте сервис рассылок Cheapsedner – он поможет вам быстро добавить mailto-ссылку в письмо, а сам процесс создания рассылки займет всего несколько часов.

Как использовать ссылки mailto: и tel:

Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.

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

mailto:

Ссылка формируется из нескольких частей. Сначала в адресе ставится префикс mailto: , после которого указывается адрес почты. Это самый простой вариант.

Текст письма указывается с помощью параметра body .

За тему письма отвечает параметр subject .

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc .

Что произойдёт, если кликнуть на ссылку с mailto

Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в MacOS:

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом. Подробнее об этом и других сложных случаях читайте в RFC 6068.

Как стилизовать mailto

Для стилизации ссылки на электронную почту можно воспользоваться CSS-селектором a[href^=»mailto:»] .

a[href^="mailto:"]

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel: .

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

Хорошо

В href указан номер с кодом страны и города, в тексте ссылки есть код города 812, по которому понятно, что речь о Санкт-Петербурге.

Чуть хуже

В этом случае жители всех городов смогут дозвониться до компании, а короткий номер будет понятен и местным. Случай перейдёт в категорию «плохо», если по сайту непонятно, из какого города компания.

Плохо

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

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

Хорошо

Звоните 8-900-111-11-11 по любому поводу. 

Номер видно в тексте ссылки.

Плохо

Звоните по любому поводу. 

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

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

• Android, iOS — откроется звонилка по умолчанию.
• Chrome, Edge, Firefox на Windows — откроется предложение использовать какую-нибудь программу для звонка.
• Safari — если номера нет в списке контактов, то появится подтверждение вызова, после этого откроется FaceTime.

Например, Chrome на OS X предложить открыть FaceTime для звонка, так как эта программа установлена по умолчанию. Вместо неё легко может быть Skype или любая другая звонилка.

Как стилизовать

С помощью CSS-селектора a[href^=»tel:»] .

a[href^="tel:"]

А так можно добавить иконку телефона из Unicode, которая есть во всех системах:

a[href^="tel:"]:before

Получится такой результат:

Дополнительные материалы по теме

• RFC 6068 — The ’mailto’ URI Scheme
• RFC 3966 — The tel URI for Telephone Numbers
• The Current State of Telephone Links

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

• 23 октября 2023

Простое диалоговое окно на HTML

Вот короткое демо:

• 18 октября 2023

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

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

• 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

• 14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

• 12 сентября 2023

Осмысленный alt-текст: 6 правил

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

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

• 31 июля 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

• 13 июня 2023

Как понять, что перед вами заголовок

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.

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

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

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

• 8 июня 2023

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ 

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

• 1 июня 2023

Как создавать адаптивные изображения. Атрибут srcset

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

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

�� В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.

• 25 мая 2023

Как добавить ссылку и изображение в Email-рассылку

Чтобы добавить ссылки и изображения в письмо, используйте встроенный текстовый редактор. Обратите внимание, что некоторые почтовые клиенты не открывают изображения в письмах.

Ссылка

Выделите текст, который вы хотели бы сделать ссылкой, и нажмите на кнопку «Добавить/Изменить ссылку»: В открывшемся окне заполните параметры ссылки и нажмите на кнопку «Вставить»: В поле «Цель» выбирается способ открытия ссылки — в текущем окне или в новом. Подсказка отображается при наведении на ссылку в письме:

Изображение

Нажмите на кнопку «Редактировать HTML код»: Откроется «Редактор HTML кода». Для добавления изображения используйте следующий код:

В кавычки вставьте ссылку на изображение, расположенное на вашем сайте, и нажмите на кнопку «Обновить»: Вот так выглядит это изображение в письме:

Ссылка в изображении

Вы можете добавить ссылку к изображению — при клике на изображение произойдет переход по указанному вами адресу. Для этого выделите изображение в текстовом редакторе и нажмите на кнопку «Добавить/Изменить ссылку»:

Как настроить обтекание текста вокруг картинки в welcome-письме

1. В блоке «Текст приветствия» выберите пункт «Редактировать HTML-код»:
2. Вставьте код следующего вида:

Для регистрации в отеле необходим оригинал внутреннего паспорта гражданина РФ, для детей до 14 лет — оригинал свидетельства о рождении, для иностранных граждан — оригинал паспорта с действительной визой, а также миграционная карта.

где — код изображения с заданными параметрами.
В письме изображение встанет на левую часть страницы, а текст переместится по правую сторону от него:
Обратите внимание: необходимо помнить, что почтовые сервисы могут по своему интерпретировать написанный код. Для справки: к примеру, Рамблер иногда меняет цвет письма, шрифты и символы в письмах. Также для данного редактора нельзя заводить классы стилей css, нужно оперировать тегом style у элемента.

Путь гостя в отель: полезные материалы для каждого шага

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

Как сделать активную ссылку в электронном письме или в подписи к письму?

Как сделать активную ссылку на сайт в электронном письме или в подписи к письму?

На Яндексе, на Майле.

комментировать
в избранное
10 ответов:
Ксарф­ акс [156K]
5 лет назад

Активная ссылка в письме

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

Он изменит цвет (например, на голубой):

Если вам требуется, чтобы ссылка была «спрятана» под определённым словом (словосочетанием), то нужно воспользоваться инструментом для вставки ссылки.

Ставим курсор в нужное место.

На панели форматирования текста нажимаем на «Ещё», в выпадающем меню выбираем «Ссылка».

Теперь пишем адрес ссылки (то есть адрес сайта) и текст ссылки (подпись).

Нажимаем на «Добавить».

Вот что получится в результате:

2) Почта mail.yandex.ru

В почте Яндекса алгоритм будет похожим.

Нажимаем на значок «Вставить/изменить ссылку» (выделен красным на скриншоте):

Затем добавляем адрес и подпись:

После нажатия на «Добавить» ссылка появится в письме:

Аналогичным образом добавляется активная ссылка и в подписи к письму, это делается с помощью всё тех же инструментов.

автор вопроса выбрал этот ответ лучшим
комментировать
в избранное ссылка отблагодарить
СТЭЛС [318K]
4 года назад

Наверху, над полем для письма есть вот такая панель задач —

Нажимаем кнопку работы со ссылками (она обозначена на рисунке) и попадаем в меню.

Внизу вводите адрес, а еще ниже вводите текст под которым будет «замаскирована» эта ссылка.

Можно ссылку оставить и неизменной, как адрес вводимый в адресную строку, тогда в поле «текст» укажите туже ссылку, что и в поле «адрес»

комментировать
в избранное ссылка отблагодарить
-Irink­ a- [289K]
4 года назад

Сейчас отправить ссылку в письме очень просто. При этом вы можете ссылку отправить в «чистом виде» (именно адресом), либо замаскировать ссылку под каким-либо текстом.

Если вам не принципиально, как будет выглядеть ваша ссылка в письме, тогда просто вставляете ссылку в текст, после того, как вы нажмёте «Enter» адрес ссылки станет активным.

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

На панели задач находим кнопку зрительно напоминающую два квадрата, скреплённые вместе.

Заполняете поля, вставляете адрес ссылки и текст под которым она будет спрятана.

Остается лишь отправить письмо.

комментировать
в избранное ссылка отблагодарить
Алиса в Стран­ е [371K]
4 года назад

Ничего специально делать для этого не надо, когда вы вставляете ссылку в свое письмо, то после нажатия кнопки «ввод», она меняет цвет и становится активной. Если вы захотите ссылку замаскировать текстом, то, например, в почте Яндекс надо нажать специальную кнопку (выделена красным квадратиком):

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

В почте Мэйл такой же знак находится в пункте верхнего меню «Еще». Все действия такие же, вам также предоставят форму, которую надо будет заполнить, ввести адрес вашей ссылки и «маскировочный» текст.

комментировать
в избранное ссылка отблагодарить
Peres­ vetik [921K]
4 года назад

В данное время отправить ссылку красивую в письме совсем несложно. Нужно открыть окно для отправки и вверху вы увидите значок для ссылки.

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

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

Значки окна выглядят примерно вот таким образом, как на картинке, и разобраться сможет любой человек.

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