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

Чтобы создать по-настоящему запоминающийся опыт для подписчиков, нужно сделать так, чтобы ваше письмо выделялось в почтовом ящике. Один из способов добиться этого — добавить интерактивность в ваши email-кампании.

Хотя интерактивность в письмах и кажется желательной, её создание может показаться пугающим (или даже излишним). Однако интерактивные письма не обязательно должны быть сложными.

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

— Что такое интерактивное письмо?

— Почему стоит отправлять интерактивные элементы в письмах?

— Как начать использовать интерактивный email-маркетинг

— Семь элементов для экспериментов:

## Что такое интерактивное письмо?

По определению эксперта по интерактивным письмам Марка Роббинса (из Humans of Email), интерактивность в письмах — это «действие, совершённое в письме, которое вызывает событие без выхода из этого письма».

Интерактивные элементы в письмах могут принимать различные формы, включая:

— Опросы

— Анкеты

— Контент с вкладками

— Гамбургер-меню

— Горячие точки

— Викторины

— Якорные теги

— Формы или выбор с помощью радио-кнопок

— Аккордеоны

— Раскрытие предложений

— Отправка отзывов и оценок

— Поля поиска

## Почему стоит отправлять интерактивные элементы в письмах?

Email остаётся самым эффективным маркетинговым каналом с ROI 36:1. Поэтому важно постоянно улучшать опыт подписчиков — и интерактивные письма дают такую возможность.

По данным Martech Advisor, интерактивные письма способны увеличить показатель кликов к открытиям на 73%. Подписчики тоже этого хотят.

Вот как добавление интерактивных элементов в письма может улучшить ваши кампании:

— Повышение конверсии

— Более высокие показатели кликабельности

— Сбор дополнительных данных

— Выделение на фоне конкурентов

— Создание лучшего пользовательского опыта

Рассмотрим каждый пункт подробнее.

### Повышение конверсии

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

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

### Более высокие показатели кликабельности

По данным Dyspatch, 60% получателей писем готовы взаимодействовать с интерактивными письмами, а более 50% подписчиков *хотят* взаимодействовать с контентом прямо в письме. Короче говоря: подписчики *хотят* получать интерактивный опыт.

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

### Сбор дополнительных данных

С интерактивными письмами добавляется больше кликабельных элементов, и, как результат, собирается больше данных.

#### Данные о кликах

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

#### Предпочтения подписчиков

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

С помощью живых опросов подписчики могут голосовать прямо в письме. (Продолжайте читать — мы подробнее расскажем об этом позже!) Результаты можно использовать в качестве обратной связи разными способами: от корректировки email-кампаний до влияния на стратегию продукта.

### Выделение на фоне конкурентов

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

Когда мы спросили нашу аудиторию в LinkedIn, используют ли они интерактивность в своих письмах, 60% респондентов ответили «нет». Это шанс для email-маркетологов использовать интерактивные письма, чтобы выделиться на фоне остальных.

### Создание лучшего пользовательского опыта

Позволяя подписчикам взаимодействовать с контентом прямо в письме (вместо перенаправления на сайт или в приложение), интерактивность снижает трение, создавая в целом более удобный пользовательский опыт.

## Как начать использовать интерактивный email-маркетинг

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

## 7 интерактивных элементов для email-маркетологов

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

### Эффекты при наведении

Один из самых простых способов добавить интерактивность в письма — использовать эффекты при наведении.

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

#### 1. Эффекты при наведении: Текст

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

Вот пример, как можно изменить цвет ссылки с синего на красный при наведении:

Вот как это сделать:

**Встроенный CSS**

.txt-color:hover { color: #8ddaeb !important; }

**HTML – Изменение цвета текста при наведении**

Изменить цвет при наведении

Обратите внимание, что этот эффект поддерживается в:

— AOL

— Apple Mail

— Yahoo Mail

— Gmail

#### 2. Эффекты при наведении: Плавное появление

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

В приведённом выше примере мы используем эффект при наведении для изменения прозрачности текстовой ссылки до 50%. Но вместо мгновенного применения изменений эффект перехода, установленный на 0,3 секунды, помогает сгладить изменение прозрачности.

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

**Встроенный CSS**

.fade-slow{ transition: 0.3s !important; }

.fade-slow:hover{ transition: 0.3s !important; opacity: 0.5 !important;}

**HTML – Прозрачность текста 50% / 0,3 секунды**

Плавное исчезновение текста

Этот эффект поддерживается в следующих почтовых клиентах:

— AOL

— Apple Mail

— Gmail

#### 3. Эффекты при наведении: Фоновые цвета

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

Используйте приведённый ниже встроенный CSS, чтобы добавить простое изменение цвета при наведении для ваших кнопок CTA — например, чтобы кнопка меняла цвет с красного на серый. Просто добавьте класс `.bg-rollover` к HTML-элементу, в котором определяется фоновый цвет вашей кнопки.

**Встроенный CSS**

.bg-rollover:hover { background-color: #585f6a !important; }

**HTML**

Горизонтально расширяемый блок

Этот эффект поддерживается в:

— AOL

— Apple Mail

— Yahoo Mail

— Gmail

#### 4. Эффекты при наведении: Фоновые изображения

Вы также можете менять фоновые изображения при наведении, как в этом примере:

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

**Встроенный CSS**

.bgimg-swap:hover {background-image: url(‘http://www.fillmurray.com/284/197’) !important;}

**HTML – Замена фонового изображения**

Этот эффект при наведении поддерживается в:

— AOL

— Apple Mail

— Yahoo Mail

— Gmail

#### 5. Эффекты при наведении: Движение

Вы также можете добавить эффект движения в своё письмо, что может быть полезно, например, для выделения CTA. Вот два способа сделать это:

##### Всплывающая вкладка и изменение цвета

Вот основной CTA с небольшой всплывающей вкладкой сверху, которая при наведении поднимается:

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

Вот код для всплывающей вкладки. Добавьте его *над* любым CTA или контентом, который хотите выделить с помощью этого эффекта.

**Встроенный CSS**

.grow {transition: 0.3s !important;}

.grow:hover {background-color: #298aae !important; height: 50px !important; position: relative !important; transition: 0.3s !important;}

**HTML – Вкладка всплывает и меняет цвет**

Всплывающая вкладка

Этот эффект поддерживается в следующих почтовых клиентах:

— AOL

— Apple Mail

— Yahoo Mail

— Gmail

##### Эффект нажатия при наведении

Вы также можете сделать так, чтобы ваши кнопки CTA «вдавливались» при наведении, как мы сделали в нашем информационном бюллетене:

Кнопка CTA создана с использованием тени. Когда курсор наводится на кнопку, тень исчезает, а кнопка смещается с помощью свойства CSS transform, имитируя эффект нажатия.

**Встроенный CSS**

.btn { transition: 0.3s; }

.btn:hover { transform: translate(7px, 8px); box-shadow: none !important; }

**HTML – Эффект нажатия при наведении**

Ух ты!

Этот эффект поддерживается в Apple Mail. Мы сделали кнопку одинаковой в Gmail и Outlook с помощью фоновых изображений (Gmail) и VML (Outlook), но ни один из этих клиентов не поддерживает свойство transform, поэтому эффект движения там не отображается.

### 6. Переворачивающиеся карточки

Хотите добавить уникальный элемент интерактивности в свои письма? Попробуйте переворачивающиеся карточки, как мы сделали в нашем майском информационном бюллетене 2022 года, где темой была магия.

Этот интерактивный контент с переворачивающимися карточками, созданный с помощью продвинутой CSS-анимации, обеспечил 12,2% всех уникальных кликов в письме.

Полное руководство (и код) можно найти в этой статье от разработчика писем Litmus Карин Слейтер — включая запасные варианты.

### 7. Живые опросы

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

#### Как это работает?

С помощью такого инструмента, как Litmus Personalize, работающего на базе Kickdynamic, можно настроить кампании, которые помогут собирать данные о кликах, считающиеся «голосами» в опросах и анкетах.

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

#### Пример: Kate Spade

Kate Spade использует живые опросы как увлекательный способ собирать отзывы подписчиков.

Это письмо побуждает подписчиков кликать и помогает Kate Spade собирать ценные данные о предпочтениях подписчиков (в данном случае — предпочтениях в ювелирных изделиях). Эти данные затем можно использовать для создания более персонализированного опыта в будущем.

Более подробно об этом можно прочитать в нашей статье о том, как Kate Spade использует живые опросы в письмах.

#### Пример: Ежемесячный информационный бюллетень Litmus

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

#### Пример: Информационный бюллетень Litmus Product Pulse

Наш первый информационный бюллетень Product Pulse был запущен с живым опросом, в котором подписчиков просили выбрать темы, о которых они хотели бы узнать больше. (Просить подписчиков оставить отзыв — это не только лучшая практика маркетинга, но и лучшая практика для информационных бюллетеней!)

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

## Начните создавать интерактивные письма уже сегодня!

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

*Оригинал статьи от Элис Ли из её сессии на Litmus Live «Начало работы с интерактивными письмами».*