Как создать подпись письма с кликабельными ссылками (пошаговый гайд)

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

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

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

Ключевые выводы 

1. Вы можете сделать кликабельным практически любой элемент в своей подписи: сайт, email-адрес, номер телефона, приложение, изображение или баннер, карту, календарь или страницу бронирования.
2. Кликабельные ссылки в подписи письма можно добавлять несколькими способами: прямо в почтовике, с помощью HTML-кода, в подписи в виде изображения или с помощью генератора подписей.
3. Ссылки в подписи письма могут не работать по разным причинам. К наиболее распространенным относятся ограничение на размер подписи в Gmail, отсутствие URL-протоколов, использование сервисов сокращения URL-адресов, а также проблемы, характерные для отдельных почтовиков.
4. UTM-параметры позволяют отслеживать эффективность ссылок и измерять трафик, генерируемый подписью письма.
5. Убедитесь, что все ссылки доступны, и всегда тестируйте их в светлом и темном режимах.

Что такое кликабельная подпись письма?

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

(Источник: шаблон Stripo)

В этой статье мы подробно рассказываем, как создать подпись письма в Stripo.

Почему кликабельные ссылки так важны

В подписи письма уже указаны все необходимые сведения: имя, должность и контактные данные. Так нужно ли действительно добавлять кликабельные ссылки? Ответ — да. Благодаря правильным ссылкам подпись становится не просто способом предоставить контактную информацию.

С помощью кликабельных ссылок в подписи письма можно: 

• выстраивать доверие, давая получателям возможность легко узнать больше о вас или вашей компании через сайт или профили в соцсетях, где можно ознакомиться с предоставляемыми услугами, кейсами, ценами и другой важной информацией; 
• сократить время на запись на консультацию, разместив прямую ссылку на страницу бронирования или календарь встреч; 
• побуждать клиентов совершать желаемое действие одним кликом; 
• упростить коммуникацию, направляя людей к нужным ресурсам вместо разъяснения всего в письме;
• превратить каждое письмо в источник трафика, направляя получателей на сайт, лендинг, портфолио или страницу продукта; 
• повысить вовлеченность без запуска отдельной email-кампании, поскольку подпись служит постоянным CTA в каждом сообщении;
• постоянно генерировать лиды, предоставляя им удобный способ связаться с вами или запросить демо; 
• продвигать контент, размещая ссылки на блог или YouTube-канал; 
• помочь получателям быстрее находить нужную информацию. 

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

(Источник: Exclaimer)

Что можно сделать кликабельным в подписи

Короткий ответ: практически все. 

К наиболее распространенным кликабельным элементам в подписи письма относятся:

• ссылка на сайт или портфолио;
• кликабельные ссылки на социальные сети;
• кликабельный email-адрес;
• кликабельный номер телефона;
• ссылка на страницу бронирования или календарь;
• отзывы клиентов или рекомендации;
• ссылка на приложение;
• ссылка на аффилиатную программу;
• кликабельная ссылка на спецпредложения и акции;
• кликабельное изображение или баннер;
• ссылка на карту или адрес офиса;
• ссылка на страницу подписки на рассылку.

(Источник: Exclaimer)

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

Как добавить кликабельные ссылки в подпись письма

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

Метод 1: в почтовике (только текст)

В большинстве почтовиков этот процесс выглядит примерно так:

1. Добавьте всю необходимую информацию, включая имя, должность, email-адрес, номер телефона, сайт, профили в соцсетях и CTA типа «Записаться на встречу».
2. Выделите текст, который хотите превратить в гиперссылку. Например выделите слово «LinkedIn».
3. Кликните на кнопку «Ссылка» или иконку цепочки на панели инструментов.
4. В поле «Введите или вставьте ссылку» вставьте URL-адрес.
5. После добавления ссылки при наведении курсора на слово «LinkedIn» будет отображаться URL-адрес сайта. По умолчанию текст также будет подчеркнут и окрашен в синий цвет.
6. Если хотите сделать ссылку более заметной, можете применить жирный шрифт или изменить ее цвет.

Метод 2: сверстанная HTML-подпись 

Второй вариант — создать подпись письма в HTML и добавить ссылки прямо в код. В этой статье мы рассказываем, как шаг за шагом создать HTML-подпись письма.

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

Метод 3: графическая подпись

Еще один вариант — создать свою подпись в виде изображения с помощью программы для графического дизайна наподобие Canva, Figma или Photoshop. Готовый дизайн обычно экспортируется в формате PNG, а затем добавляется в почтовик.

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

Метод 4: в конструкторе подписей писем (Stripo)

Создание HTML-подписи с нуля требует технических знаний. Если вы предпочитаете более простой подход, можете воспользоваться бесплатным генератором подписей писем от Stripo.

Этот инструмент доступен отдельно от email-платформы Stripo, и любой желающий может воспользоваться им бесплатно. Созданную подпись можно добавить в любой почтовик. 

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

Также можно воспользоваться шаблонами подписей писем, доступными в редакторе Stripo. Сделайте их источником вдохновения или модифицируйте для создания подходящей подписи. 

Типы ссылок в HTML: референс (с кодом)

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

• Ссылка на сайт

<a href="https://dr-gill.com" target="_blank">Visit our website</a>

Убедитесь, что URL-адрес начинается с https://. Без этого почтовик может интерпретировать адрес как относительный путь, в результате чего ссылка перестанет работать.

• Ссылка на email-адрес

<a href="mailto:m.gill@example.com">m.gill@example.com</a>

• Ссылка на номер телефона

<a href="tel:+48756461001">+48 75 64 61 001</a>

• Ссылка в виде картинки или иконки соцсети

<a href="https://linkedin.com/in/you" target="_blank"><img src="..." alt="LinkedIn" width="24" height="24" style="border:0"></a>

Стоит иметь в виду несколько моментов:

• атрибут src должен содержать полный URL-адрес изображения, размещенного на вашем домене;
• всегда указывайте атрибут alt. Это повышает доступность и служит фолбэком на случай, если почтовик заблокирует изображения;
• или в случае иконок с гиперссылками атрибут alt картинки выполняет две функции. Когда изображение заключено в гиперссылку без видимого текста, атрибут alt становится доступным именем этой гиперссылки. Без него скринридер может озвучить только имя файла или сказать «ссылка», в результате чего пользователи не получат никакой информации о том, куда ведет эта ссылка;
• используйте параметр border:0, чтобы избежать появления синих рамок вокруг изображений со ссылками в старых версиях Outlook;
• укажите width и height в качестве HTML-атрибутов, а не полагайтесь исключительно на CSS.

• Подчеркнутая ссылка для темного режима

<a href="https://example.com" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;"> Visit our website 
</a> 

Не следует полагаться на цвет как на единственный признак того, что текст является кликабельным. В темном режиме почтовики часто инвертируют цвета, из-за чего ссылки могут сливаться с окружающим текстом. Такие свойства, как text-decoration: underline и font-weight: bold, не зависят от цвета, поэтому остаются видимыми даже после инверсии цветов. 

• Ссылка на страницу бронирования или CTA-кнопку

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td align="center" bgcolor="#2B5CE6" style="border-radius:4px; mso-padding-alt:12px 24px;">
     <a href="https://calendly.com/yourname/30min"
 style="display:inline-block; padding:12px 24px; font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; color:#ffffff; text-decoration:none; border-radius:4px;">
       Book a 30-min call
     </a>
   </td>
 </tr>
</table>

Кнопка в подписи письма — это компромиссное решение, поэтому ее лучше использовать только в том случае, если CTA является основным элементом подписи.

Более простая альтернатива — текстовая ссылка с понятным анкором:

<a href="https://calendly.com/yourname/30min"
  style="font-family:Arial,Helvetica,sans-serif; font-size:14px; font-weight:bold; color:#2B5CE6; text-decoration:underline;">
 Book a 30-min call →
</a>

До сих пор мы рассматривали отдельные составляющие HTML-подписи в письме. Полная подпись объединяет все эти элементы в единую разметку.

В качестве примера возьмем следующую подпись письма:

Майк Гилл

General Practitioner

Сайт: dr-gill.com

Телефон: +48 75 64 61 001

Email: m.gill@example.com

Facebook 

LinkedIn

Назначить встречу

Ниже приведен полный HTML-код для этой подписи.

<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="font-family:Arial,Helvetica,sans-serif; font-size:14px; line-height:20px; color:#333333;">
 <tr>
   <td style="padding-bottom:8px;">
 <span style="font-size:16px; font-weight:bold; color:#1a1a1a;">Mike Gill</span><br>
     <span style="font-size:14px; color:#555555;">General Practitioner</span>
   </td>
 </tr>
 <tr>
   <td style="padding-bottom:2px;">
   Website:
 <a href="https://dr-gill.com" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;">dr-gill.com</a>
   </td>
 </tr> 
 <tr>
   <td style="padding-bottom:2px;">
     Phone:
     <a href="tel:+48756461001" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;">+48 75 64 61 001</a>
   </td>
 </tr>
 <tr>
   <td style="padding-bottom:12px;">
     Email:
     <a href="mailto:m.gill@example.com" style="color:#2B5CE6; font-weight:bold; text-decoration:underline;">m.gill@example.com</a>
   </td>
 </tr>
 <tr>
   <td style="padding-bottom:12px;">
     <a href="https://facebook.com/drmikegill" style="text-decoration:none;">
       <img src="https://yourdomain.com/icons/facebook.png" alt="Facebook" width="24" height="24" style="border:0; display:inline-block; vertical-align:middle;">
     </a>
     &nbsp;
     <a href="https://linkedin.com/in/drmikegill" style="text-decoration:none;">
       <img src="https://yourdomain.com/icons/linkedin.png" alt="LinkedIn" width="24" height="24" style="border:0; display:inline-block; vertical-align:middle;">
     </a>
   </td>
 </tr>
 <tr>
   <td>
     <table role="presentation" cellpadding="0" cellspacing="0" border="0">
       <tr>
         <td align="center" bgcolor="#1F4BC4" style="border-radius:4px; mso-padding-alt:12px 24px;">
           <a href="https://dr-gill.com/book?utm_source=email-signature&utm_medium=signature&utm_campaign=appointments"
              style="display:inline-block; padding:12px 24px; font-size:14px; font-weight:bold; color:#ffffff; text-decoration:none; border-radius:4px;">
             Book an appointment
           </a>
         </td>
       </tr>
     </table>
   </td>
 </tr>
</table>

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

Как сделать ссылки по-настоящему кликабельными

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

Включите подчеркивание ссылок в Stripo

Самый простой способ сделать ссылки более заметными — включить в Stripo параметр «Подчеркивание ссылок». Этот переключатель позволяет одним кликом включить или выключить подчеркивание ссылок во всем шаблоне письма.

Эта функция может оказаться особенно полезной, если в brand guidelines указан один из вариантов email-дизайна, которого необходимо придерживаться: либо выделять ссылки только цветом, либо подчеркивать все текстовые гиперссылки.

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

Другие визуальные ориентиры

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

• выделяйте ссылки с контрастным цветом. Сделайте так, чтобы ссылки выделялись на фоне окружающего текста. Например, если в тексте письма используется темно-синий цвет шрифта, можно сделать ссылки оранжевыми или выделить их другим контрастным цветом;
• используйте жирный или полужирный шрифт. Немного более жирный шрифт помогает привлечь внимание к важным ссылкам;
• добавьте иконку или стрелку. Небольшие визуальные элементы подсказывают получателям, что они могут кликнуть, чтобы узнать больше или выполнить какое-либо действие;
• используйте кнопку в качестве основного CTA. Кнопки хорошо подходят для таких действий, как «заказать демо», когда CTA является основным фокусом подписи;
• добавьте узнаваемые иконки соцсетей. Большинство получателей уже знают, что иконки LinkedIn, Instagram, Facebook и других соцсетей являются кликабельными;
• составьте понятный анкорный текст. Текст ссылки, например «запланировать звонок», позволяет сразу понять, что произойдет после клика.

(Источник: шаблон Stripo)

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

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

Диагностика: почему ссылки в подписи не работают (и как это исправить)

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

Ограничение на размер подписи

Одной из распространенных причин является ограничение на размер подписи в Gmail. Gmail допускает использование подписей письма длиной примерно 10000 символов, включая не только видимый текст, но и сопутствующий HTML-код, форматирование и длинные URL-адреса.

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

(Источник: Gmail)

Чтобы устранить эту проблему, попробуйте сделать следующее:

• вставьте подпись в виде простого текста;
• удалите ненужное форматирование;
• уменьшите размер изображений;
• если это не поможет, удалите подпись и создайте ее заново прямо в Gmail, чтобы удалить всю скрытую HTML-разметку.

В URL отсутствует протокол

Еще одна распространенная проблема — отсутствие протокола в URL-адресе. Если адрес сайта не содержит https://, почтовик может не распознать его как действительную ссылку. Текст может по-прежнему отображаться синим цветом, быть подчеркнутым или даже кликабельным, но сама ссылка не будет работать должным образом при клике.

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

Пересланные письма или реплаи

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

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

Сервисы сокращения URL-адресов

Будьте осторожны при использовании сервисов сокращения URL-адресов. Они скрывают конечный адрес за редиректом, что может выглядеть подозрительно для почтовиков. Сокращенные ссылки также часто используются в фишинговых атаках. Даже если сокращенная ссылка работает правильно, письмо может быть отфильтровано в спам или содержать предупреждение о том, что ссылка может быть небезопасной. По этой причине используйте сервисы сокращения ссылок с осторожностью.

Некоторые проблемы со сломанными ссылками характерны для отдельных почтовиков.

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

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

Соединение различных частей одного изображения

Этот механизм называется «карта изображения». На сайтах она создается с помощью HTML-элементов <map> и <area>, которые определяют области изображения, на которые можно кликнуть. Каждая такая область может указывать на свой URL-адрес. 

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

Таким образом, при размещении ссылок на изображения в подписи письма есть два варианта:

1. Используйте разные изображения. Добавьте каждый визуальный элемент в виде отдельного изображения и присвойте ему индивидуальную ссылку. Например, добавьте ссылку на логотип вашей компании, ведущую на сайт, а на иконку LinkedIn — на ваш профиль в LinkedIn.
   
   

   
   (Источник: Exclaimer)

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

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

Отслеживайте клики на ссылки в подписях (UTM-параметры)

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

Добавление UTM-параметров поможет:

• оценивать эффективность кампаний, определяя источники трафика;
• лучше понимать поведение аудитории и выяснять, какие ссылки вызывают у нее наибольшую вовлеченность;
• оптимизировать маркетинговые усилия на основе каналов и кампаний, приносящих наилучшие результаты;
• проводить А/Б-тесты и сравнивать эффективность различных ссылок в подписи.

Имейте в виду, что UTM работает только для доменов, которые вам принадлежат или находятся под вашим контролем. Они не предоставляют аналитику по ссылкам, ведущим на сторонние сайты; то есть вы не сможете получить данные о конверсиях в соцсетях. В большинстве случаев наиболее важно отслеживать посещения вашего сайта, и для этого UTM-параметры подходят как нельзя лучше. 

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

Доступность и темный режим

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

Обеспечьте доступность ссылок

Чтобы сделать ссылки доступными, придерживайтесь следующих рекомендаций:

• используйте реальные ссылки. Всегда используйте правильный HTML-элемент <a href>, чтобы ссылки распознавались скринридерами, системами навигации с клавиатуры и другими ассистивными технологиями;
• не опирайтесь только на цвет. Это требование WCAG 2.2 Success Criterion 1.4.1 (Use of Color). Если ссылка отличается от окружающего текста только цветом, люди с дальтонизмом могут не распознать ее. Добавьте подчеркивание или жирный шрифт;
• обеспечьте достаточную контрастность. WCAG 2.2 Success Criterion 1.4.3 (Contrast (Minimum)) требует коэффициента контрастности не менее 4,5:1 между текстом и фоном. Проверьте ссылки в светлом и темном режимах. Ссылка, которая хорошо читается на белом фоне, может не иметь достаточной контрастности на темном;
• используйте описательный анкорный текст. Согласно WCAG 2.2 Success Criterion 2.4.4 (Link Purpose), назначение ссылки должно быть понятно из ее текста. Вместо общих формулировок типа «Кликните здесь» или «Подробнее» используйте такие формулировки, как «Назначить встречу»;
• добавьте alt-текст к иконкам со ссылками. Без альтернативного текста скринридеры не могут определить назначение иконки. Это требуется в соответствии с WCAG 2.2 Success Criterion 1.1.1 (Non-text Content); 
• сделайте кликабельную область достаточно большой. WCAG 2.2 Success Criterion 2.5.8 (Target Size (Minimum)) рекомендует минимальный размер иконки 24 × 24 пикселя в CSS. Оставляйте достаточное расстояние между соседними иконками для удобства касания на мобильных устройствах. 

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

Чтобы убедиться в соответствии подписи письма требованиям доступности, перед отправкой запустите проверку с помощью инструмента доступности от Stripo.

Как рендерятся ссылки в темном режиме

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

(Источник: шаблон Stripo)

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

Следите за соответствием подписей у всех членов команды

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

Если каждый сотрудник будет создавать собственную подпись, вероятность ошибок будет высокой. В результате могут появиться разные шрифты и цвета, разные форматы телефонных номеров, неработающие ссылки или ссылки, некорректно оформленные с помощью элемента <a href>. 

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

Вы также можете воспользоваться набором Brand Guidelines от Stripo, чтобы все придерживались единых правил. Он помогает стандартизировать фирменные цвета, шрифты и другие элементы дизайна, что упрощает создание подписей писем, соответствующих вашему бренд-киту.

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

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

В завершение

Подпись письма с кликабельными ссылками — это не просто блок контактной информации. Эти ссылки помогают получателям узнать больше о компании, посетить сайт, записаться на консультацию или подписаться на рассылку. Используйте эти возможности с максимальной эффективностью, отслеживая результативность ссылок через UTM-параметры и регулярно проверяя подпись на работоспособность. 

Для начала рекомендуется проверить свою текущую подпись. Актуальны ли ваша должность и контактные данные? Стоит ли добавить ссылки на ваш сайт, портфолио, блог или другие важные ресурсы? Все ли имеющиеся ссылки по-прежнему работают корректно?

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

FAQ

1. Как добавить гиперссылку в подпись письма в Outlook?

Для добавления гиперссылки в Outlook откройте вкладку «Insert» и выделите текст, который хотите превратить в ссылку. Выберите «Link» и «Insert Hyperlink», а затем вставьте URL-адрес в диалоговое окно.

Outlook также позволяет форматировать гиперссылки различными способами. Можно изменить цвет текста, выделить его жирным шрифтом или курсивом, а также использовать другие стили текста, чтобы сделать ссылки более заметными.

2. Что такое кликабельная HTML-подпись письма?

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

3. Как сделать так, чтобы номер телефона в подписи письма стал кликабельным?

Выберите номер телефона, нажмите комбинацию клавиш «Ctrl+K» или кликните на иконку «Link», а затем введите «tel:», после чего укажите номер телефона в международном формате.

Если вы создаете HTML-код вручную, он будет выглядеть следующим образом:

<a href="tel:+48756461001">+48 75 64 61 001</a> 

В HTML-коде номер телефона следует указывать в международном формате с префиксом «+» и кодом страны. Не используйте пробелы, скобки или дефисы внутри значения атрибута href. 

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

Самый простой способ — добавить email-адрес в редакторе подписи. Выберите email-адрес, воспользуйтесь комбинацией клавиш «Ctrl+K» или кликните на иконку «Link», а затем введите следующее в поле URL: 

mailto: и адрес без пробелов.

Если вы создаете свою подпись в формате HTML, используйте следующий код:

<a href="mailto:m.gill@example.com">m.gill@example.com</a>

Не забудьте указать префикс mailto:. Без него почтовик не распознает адрес как ссылку на электронную почту, и при клике на него не откроется новое письмо. 

5. Почему ссылки в моей подписи письма некликабельны?

Существует несколько распространенных причин, по которым ссылки в подписи письма могут не работать: 

• в URL-адресе отсутствует правильный протокол. Каждая ссылка должна начинаться с https://, mailto: или tel:. Без соответствующего префикса почтовик может не распознать ее как действительную ссылку;
• это не настоящая гиперссылка. Текст может отображаться синим цветом и с подчеркиванием, но если он не заключен в тег <a href>, то это лишь стиль, придающий ему вид ссылки, и на него нельзя будет кликнуть;
• ваша подпись — это одно изображение. Подпись в виде изображения может содержать только одну кликабельную ссылку. Любые другие контактные данные, отображаемые внутри картинки, не могут выступать в качестве отдельных ссылок.

6. Можно ли сделать так, чтобы разные части подписи-картинки были кликабельными?

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

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