Как создать кликабельные номера телефонов с помощью HTML в письмах

Адаптивный список email-рассылки — это первый шаг к повышению узнаваемости бренда. Использование вашей базы email для создания списка телефонных номеров — отличный следующий шаг.

К счастью, вы можете объединить эти два канала, встроив в письма кнопки click-to-call (звонок по клику). Это позволит вашей аудитории оставлять отзывы, быстрее решать срочные проблемы и общаться с вами через разные платформы.

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

## Что такое номер телефона с функцией click-to-call?

Номер телефона click-to-call, или кликабельный номер телефона, — это ссылка в письме, которая открывает приложение для звонков. Таким образом, если вы открываете письмо на телефоне, ссылка откроет приложение телефона с уже введенным номером.

При добавлении кликабельного номера телефона в ваши письма начните с тестирования кнопки click-to-call для мобильных устройств. Если ваша аудитория реагирует на нее, протестируйте версию для ПК.

Будьте на связи с вашей командой поддержки или колл-центром, чтобы узнать, увеличилось ли количество звонков после рассылки письма. В сочетании с хорошим показателем кликабельности (CTR), высокий объем звонков будет показателем успеха.

## Почему кликабельные номера телефонов важны в email-рассылках?

Есть несколько причин, почему кликабельный номер телефона важен в письме:

— Это укрепляет доверие вашей аудитории

— Это требует от аудитории меньше усилий, чем написание email

— Это дает клиентам немедленный способ связи с вашей компанией

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

### 1. Письма по продажам

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

### 2. Письма службы поддержки

Дайте клиентам возможность быстро обратиться за поддержкой. Расстроенному клиенту может не хотеться писать (и ждать ответа на) email. Используя кликабельный номер телефона, они смогут связаться с вами быстрее.

### 3. Консультационные письма

Бренды со штатными консультантами (например, стилистами, диетологами или техниками) могут извлечь выгоду из HTML-кнопки с кликабельным номером телефона. Клиенты могут использовать их для прямой связи с экспертами, что повышает вовлеченность и узнаваемость бренда.

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

### 4. Письма для сбора отзывов

Кликабельные номера телефонов в письмах для сбора отзывов, используемые после покупки (или после взаимодействия), делают вас более доступными для клиента.

В этом примере кликабельный номер телефона используется для получения отзыва о покупательском опыте клиента.

### 5. Письма по возврату товаров

Оформление запросов на возврат через формы и приложения для покупок может быть утомительным — использовать кликабельный номер телефона для оформления возврата гораздо проще для клиента.

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

Не добавляйте кнопку click-to-call, если вы не можете справиться с возросшим объемом звонков. Вы же не хотите, чтобы подписчики звонили только для того, чтобы повисеть на линии. И если у вас большая аудитория в Apple Mail, имейте в виду, что функция click-to-call на Mac открывает FaceTime. Не знаете, где взаимодействует ваша уникальная аудитория? Узнайте с помощью Litmus Email Analytics.

## Как сделать HTML-ссылку на телефонный номер в письме

### Шаг 1

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

Click to call

Если вы используете кнопку, сделайте ее пуленепробиваемой (bulletproof). Пуленепробиваемые кнопки — это кнопки призыва к действию (CTA), созданные с помощью кода, а не изображений. Поскольку они созданы с помощью кода, они работают, даже если ваш клиент находится в зоне с плохим покрытием или отключил загрузку изображений. Это делает пуленепробиваемые кнопки более надежными и общедоступными.

Примечание: обязательно добавляйте пуленепробиваемые кликабельные номера телефонов в письма, которые конкретно требуют от подписчиков связи с вами. (Например, в письма по продажам с CTA «запланировать звонок»).

### Шаг 2

Вместо добавления URL в href добавьте «tel:» для создания ссылки click-to-call, а затем добавьте номер телефона:

Click to call

Если вы добавляете ссылку «нажать, чтобы написать SMS», вы также можете добавить `»?&body=»`

после номера телефона, так же, как вы бы сделали это со ссылкой «mailto:». Затем вам нужно закодировать любое сообщение, которое вы хотите включить, как URL. (Вы можете использовать онлайн-инструменты, такие как URLEncoder, для помощи в этом).

**Ссылка для отправки SMS будет выглядеть так:**

Click to text

### Шаг 3

Затем используйте класс mobile, чтобы скрыть ссылки click-to-call для настольных компьютеров:

.mobile { display: none !important; }

Затем вы можете использовать класс desktop, чтобы предоставить связанную версию, которая представляет собой либо целевую страницу с формой обратной связи, либо ссылку mailto с адресом электронной почты: .mobile { display: none !important; }

### Шаг 4

Вы можете стилизовать ссылки click-to-call, ориентируясь на атрибуты HTML:

a[href^=»tel»] { color: #1F7F4C !important; } a[href^=»sms»] { color: #C54D3F !important; }

Это работает во многих почтовых клиентах, но размещение стилей inline (встроенными) — лучший способ обеспечить поддержку везде.

Примечание: тестирование этих ссылок в почтовых клиентах имеет ключевое значение! (Например, мы слышали, что click-to-text не работает в Gmail, Yahoo и Outlook.com — но когда мы тестировали их для этой статьи, они работали).

Вот две версии click-to-call и click-to-text в Litmus Builder.

## Как стилизовать HTML-ссылку на телефонный номер в письме

Вы можете стилизовать HTML-ссылку на телефон как **кнопки, ссылки, **или** обтекание картинкой. **

В этом примере кликабельный номер телефона оформлен в виде кнопки «Получить помощь».

### Есть два разных способа стилизации HTML-ссылки на телефон.

**Стилизация в разделе заголовка (head) письма.** Для этого используйте селекторы атрибутов, например: `a[href^=»tel:»] or a[href^=»sms:»]`

.

или…**Стилизация inline (шаги описаны выше).** Если вы делаете это, стилизуйте ссылку с подчеркиванием.

Карин Слейтер, специалист по email-маркетингу в Litmus, также дает профессиональный совет: «Для встроенных (inline) стилей эффект при наведении (hover) — это стилистическое улучшение. Когда ваш читатель наводит курсор на кликабельную ссылку, это улучшение заставляет подчеркивание исчезать. Это дает вашему читателю понять, что ссылка является интерактивным элементом».

**Примечание:** Gmail не поддерживает кликабельные номера телефонов в разделе заголовка. Поэтому, если у вас большое количество подписчиков в Gmail, добавляйте стили **inline. **

## Добавление ссылки click-to-SMS

Кликабельная ссылка для отправки сообщений позволяет вашим клиентам писать вам SMS вместо звонка. Она работает как кликабельный номер телефона, но для некоторых клиентов может быть более удобным вариантом.

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

В этом примере ссылка click-to-SMS оформлена в виде кнопки CTA «пообщаться с нами».

В этом примере ссылка click-to-SMS поощряет клиентов присоединиться к эксклюзивному списку SMS для запуска мероприятия.

## Не забудьте протестировать ваш кликабельный номер телефона!

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