Как сделать кликабельные телефон и 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 сохраняет цвет текста, без этого ссылки окрасятся в синий и сломают визуал подписи.

Частые ошибки

Важный нюанс про Outlook

Кликабельные телефоны в Outlook на десктопе не работают, клиент не распознаёт атрибут tel:. На мобильном Outlook, в Gmail и Яндекс Почте всё работает корректно. Подпись должна выглядеть нормально и без кликабельности. На случай, если читатель откроет письмо в десктопном Outlook.