Как сделать кликабельные телефон и email в подписи письма
Телефон и 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 сохраняет цвет текста, без этого ссылки окрасятся в синий и сломают визуал подписи.
Частые ошибки
| Ошибка | Неверно | Верно |
| Дефисы в номере внутри href | tel:+7-495-123-45-67 | tel:+74951234567 |
| Нет двоеточия после tel | tel+74951234567 | tel:+74951234567 |
| Нет кавычек в атрибуте | href=tel:+74951234567 | href=»tel:+74951234567″ |
| Нет кода страны | tel:4951234567 | tel:+74951234567 |
Важный нюанс про Outlook
Кликабельные телефоны в Outlook на десктопе не работают, клиент не распознаёт атрибут tel:. На мобильном Outlook, в Gmail и Яндекс Почте всё работает корректно. Подпись должна выглядеть нормально и без кликабельности. На случай, если читатель откроет письмо в десктопном Outlook.