Телефон и email в виде обычного текста в письме — лишний шаг для читателя. На мобильном нужно скопировать номер, открыть приложение звонков и набрать цифры вручную. Большинство пользователей этого не делают.
Кликабельный телефон открывает приложение для звонка одним нажатием. Кликабельный email открывает почтовый клиент с заполненным адресом. Оба элемента делаются через одни и те же HTML-атрибуты.
Кликабельный телефон
Атрибут tel: превращает текст в ссылку на звонок.
<a href="tel:+74951234567">+7 (495) 123-45-67</a>
Правила для атрибута href:
- Номер пишется без пробелов, скобок и дефисов
- Обязательно укажите код страны с плюсом: +7
- В тексте ссылки можно писать в любом удобном формате
Неверно:
<a href="tel:+7(495)123-45-67">+7 (495) 123-45-67</a>
Верно:
<a href="tel:+74951234567">+7 (495) 123-45-67</a>
Если нужно добавить добавочный номер, используйте символ p для паузы в одну секунду перед набором:
<a href="tel:+74951234567p345">+7 (495) 123-45-67, доб. 345</a>
Кликабельный email
Атрибут mailto: открывает почтовый клиент с заполненным полем «Кому».
<a href="mailto:hello@letteros.com">hello@letteros.com</a>
Можно сразу задать тему письма:
<a href="mailto:hello@letteros.com?subject=Вопрос по рассылке">
hello@letteros.com</a>
Как добавить в письмо
Через конструктор. Выделите номер телефона или email в текстовом блоке, нажмите на иконку ссылки и введите tel:+74951234567 или mailto:hello@letteros.com.
Через HTML-блок. Если нужен полный контроль над стилями, вставьте готовый код через блок кастомного HTML:
<table cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px;
padding-bottom: 4px;">
Иван Иванов
</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px;
padding-bottom: 4px;">
<a href="tel:+74951234567"
style="color: #000000; text-decoration: none;">
+7 (495) 123-45-67
</a>
</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px;">
<a href="mailto:hello@letteros.com"
style="color: #000000; text-decoration: none;">
hello@letteros.com
</a>
</td>
</tr>
</table>
text-decoration: none убирает подчёркивание. color: #000000 сохраняет цвет текста, без этого ссылки окрасятся в синий и сломают визуал подписи.
Частые ошибки
Важный нюанс про Outlook
Кликабельные телефоны в Outlook на десктопе не работают, клиент не распознаёт атрибут tel:. На мобильном Outlook, в Gmail и Яндекс Почте всё работает корректно. Подпись должна выглядеть нормально и без кликабельности. На случай, если читатель откроет письмо в десктопном Outlook.
Собрать письмо с кликабельной подписью в Letteros