Создайте кликабельную email-ссылку за 2 минуты

Чтобы пользователь мог отправить вам письмо одним кликом, используйте протокол mailto: в атрибуте href ссылки. На сайте это выглядит как <a href="mailto:[email protected]">Написать нам</a>. При нажатии браузер автоматически откроет почтовый клиент пользователя с уже заполненным адресом получателя. Этот метод работает во всех современных браузерах и на мобильных устройствах, обеспечивая мгновенную связь без необходимости копирования адреса вручную.

Ниже приведены подробные инструкции для разных сценариев использования: от базовой HTML-верстки до интеграции с мессенджерами.

Ссылка на email для сайта: работа с тегом mailto

Основной инструмент для создания почтовых ссылок в вебе — стандартный HTML-тег <a> со схемой mailto. Это универсальное решение, которое не требует подключения сторонних скриптов.

Базовый синтаксис

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

<a href="mailto:[email protected]">Написать в поддержку</a>

При клике система предложит выбрать приложение по умолчанию (Outlook, Apple Mail, Gmail и др.) или откроет веб-интерфейс почты, если он настроен в браузере.

Расширенные параметры: тема, текст и копии

Протокол mailto поддерживает передачу дополнительных данных через параметры запроса (query parameters). Это позволяет предзаполнить тему письма, основной текст и добавить получателей в копию.

Формат строки: mailto:адрес?subject=Тема&body=Текст&cc=Копия

Пример готового кода:

<a href="mailto:[email protected]?subject=Заказ №450&body=Здравствуйте!%20Хочу%20уточнить%20статус%20заказа.&[email protected]">
  Оформить вопрос по заказу
</a>

Список доступных параметров:

• subject — тема письма.
• body — тело сообщения (основной текст).
• cc — адрес для открытой копии (carbon copy).
• bcc — адрес для скрытой копии.
• Несколько получателей перечисляются через запятую сразу после mailto:.

Решение проблем с мобильными устройствами

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

Для динамической генерации ссылок на JavaScript (например, чтобы подставить имя пользователя из формы) используйте следующий подход:

function generateMailLink(email, subject, text) {
  const encodedSubject = encodeURIComponent(subject);
  const encodedBody = encodeURIComponent(text);
  return `mailto:${email}?subject=${encodedSubject}&body=${encodedBody}`;
}

// Пример использования в onclick
// window.location.href = generateMailLink('[email protected]', 'Обратная связь', 'Привет!');

Встраивание ссылок в электронные рассылки

Если вы отправляете письмо через сервисы рассылок (Unisender, Mailchimp, SendPulse) или верстаете его в HTML-редакторе, логика остается той же. Ссылка mailto внутри письма полезна для организации быстрой обратной связи («Ответить специалисту», «Сообщить об ошибке»).

Особенности использования в письмах

1. Триггер действия: Кнопка «Написать нам» внутри письма работает эффективнее, чем просто текст адреса, так как снижает порог входа для пользователя.
2. Контекст: Всегда заполняйте параметр subject, чтобы сразу обозначить контекст обращения (например, Re: Ваша подписка).
3. Безопасность: Избегайте размещения более 2-3 ссылок mailto в одном письме. Спам-фильтры крупных почтовых провайдеров могут расценить избыток таких ссылок как признак фишинга или некачественной рассылки.

Альтернативы: ссылки на мессенджеры с упоминанием email

Современные пользователи часто предпочитают мессенджеры электронной почте. Хотя в Telegram или WhatsApp нет прямого аналога mailto, вы можете создать ссылку, которая откроет чат с предзаполненным сообщением, содержащим ваш email или вопрос о нем.

Telegram

Используйте универсальный формат https://t.me/username.

• Просто чат: https://t.me/mysupport
• С готовым текстом: Добавьте параметр text.

    https://t.me/mysupport?text=Здравствуйте!%20Мой%20email:%[email protected],%20нужна%20помощь.
    ```
    *Нюанс:* Ссылки с параметром `text` корректно работают только если у пользователя установлен десктопный клиент Telegram или мобильное приложение. В веб-версии параметр текста может игнорироваться.

### WhatsApp
Формат ссылки: `https://wa.me/номер?text=сообщение`.
*   Номер телефона указывается в международном формате без знака `+`, скобок и тире (например, `79990000000`).
*   **Пример:**
    
```text
    https://wa.me/79991234567?text=Добрый%20день!%20Прошу%20прислать%20чек%20на%20email:%[email protected]
    ```

### Viber
Схема немного отличается и зависит от платформы. Универсальный вариант для мобильных устройств:

```text
viber://chat?number=%2B79990000000&text=Текст%20сообщения

Для перехода в чат с ботом или группой часто используются специальные пригласительные ссылки (viber.com/join/...), которые генерируются внутри приложения.

Сравнение методов связи

Частые ошибки при создании ссылок

1. Отсутствие кодировки кириллицы. Если написать subject=Вопрос напрямую в коде, ссылка превратится в набор непонятных символов (%D0%92%D0%BE%D0... — это правильно, а просто русские буквы — ошибка). Всегда используйте URL-encoding.
2. Лишние пробелы. В атрибуте href не должно быть пробелов вокруг знака = или &. Строка должна быть сплошной.
3. Неверный формат телефона. Для WhatsApp и Viber номер должен быть чистым, без визуальных разделителей. Ошибка 7 (999)... приведет к неработающей ссылке.
4. Игнорирование мобильных клиентов. На iPhone ссылка mailto может открыть не то приложение, которое ожидает пользователь, если в настройках системы приоритет отдан другому клиенту. Это поведение системы, повлиять на него из кода сайта невозможно.

FAQ

Можно ли сделать так, чтобы письмо отправилось автоматически без открытия программы? Нет. Браузеры блокируют автоматическую отправку писем из соображений безопасности. Протокол mailto только инициирует создание черновика в почтовом клиенте пользователя. Отправка всегда требует подтверждения от человека.

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

Можно ли добавить вложение к письму через ссылку? Стандартный протокол mailto не поддерживает прикрепление файлов. Для загрузки файлов пользователем необходимо использовать полноценную форму обратной связи на сайте с элементом <input type="file">.