8 примеров интерактивного контента в письмах

Интерактив в письмах — один из основных трендов дизайна email-маркетинга в течение уже многих лет.

Но сегодня, когда самой обсуждаемой темой стала технология Google AMP 4 Emails, мы почти забыли, что это не единственный способ создания интерактивных писем.

И в этой инструкции мы покажем, как при помощи Stripo можно встраивать в рассылки самые популярные интерактивные элементы.

Хорошая новость: в Stripo вы можете не только создавать письма такого типа с нуля, но и просто кастомизировать наши готовые интерактивные шаблоны.

Для вашего удобства мы подготовили 15 интерактивных шаблонов

Просмотреть

 

Виды интерактивности и их использование в письмах

Интерактивные элементы, которые мы представим, отлично отображаются в основных почтовиках — и если даже они не поддерживают интерактивность, ее можно заменить полностью веб-безопасным вариантом:

1. CSS-анимированная кнопка для промо-писем;

2. оценивание/рейтинг, чтобы пользователи оценили ваши услуги, не покидая письма;

3. встроенные опросы, чтобы получатели могли ответить на ваши вопросы прямо в рассылке;

4. карусель изображений для показа нескольких товаров на одном экране в промо-письмах;

5. эффект ролловера изображения, чтоб показать товары в промо-письмах под разными ракурсами или продемонстрировать их особенности;

6. меню-аккордеон для кампаний всех типов, чтобы сделать интерактивные рассылки более компактными;

7. встроенные видео, чтобы лучше презентовать ваш новый продукт, поздравить клиентов с праздниками и объяснить новичкам, как пользоваться вашим инструментом;

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

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

Мы расскажем, как создавать интерактивные письма, а затем протестируем каждое из них.

Важно отметить:

Как известно, Email on Acid и Litmus — лучшие инструменты для тестирования электронных писем. Но в данном случае они нам не особо помогут, так как предоставляют только скриншоты. Однако их все же стоит использовать, потому что они показывают, были ли удалены блоки с интерактивным контентом или нет.

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

1. CSS-анимированная кнопка

CSS-анимированные кнопки. Все мы используем в рассылках кнопки CTA — так почему бы не оживить их, когда получатель наводит на них курсор мыши? Анимация привлекает внимание и помогает вам придерживаться дизайна бренда, если кнопки на вашем сайте тоже анимированы с помощью CSS.

(Источник: рассылка от Stipo)

Раньше для анимации кнопок вам нужно было добавлять для них CSS-свойство в редакторе HTML-кода. Это было сложновато.

В прошлом году мы выпустили новую опцию — Интерактивная кнопка/Подсвечивание по наведении. Такая кнопка меняет цвет при наведении на нее курсора.

Как это делается:

• зайдите во вкладку «Оформление»;

• затем откройте «Общие настройки»;

• перейдите в пункт «Кнопка»;

• и включите «Подсвечивать по наведению»;

• настройте стиль текста, например шрифт, тип и размер шрифта;

• настройте цвет кнопки и шрифта;

• эти настройки будут применены ко всем кнопкам в вашем интерактивном HTML-шаблоне;

• готово.

На этом скриншот «Цвет кнопки» означает основной цвет, а цвет по наведению — тот, который увидят пользователи при наведении на кнопку курсора. Цвет текста обозначает цвет шрифта.

2. Оценивание / рейтинг

Не секрет, что после покупки клиенту нужно отправить письмо с приглашением к опросу.

Существует несколько типов опросов. Но оценивание — самый простой для пользователей. Не нужно никуда идти — оценить услуги можно прямо в письме.

Клиенты оценивают ваш продукт, инструмент или сервис. Разумеется, вам и вашему ESP стоит подготовить посадочные страницы с благодарностью. Они могут быть достаточно лаконичными: основная цель таких страниц — просто подтвердить, что вы получили отзыв клиента.

Вы также можете создать две страницы благодарностей. Одна для тех, кто поставил вам 4 или 5 звезд — здесь вы просто благодарите клиентов. А вторая — для тех, кто поставил вам 1-3 звезды. Сюда вы можете добавить ссылку на Google Form, где спрашиваете, по какой именно причине им не понравился ваш инструмент, или говорите, что вы сожалеете по поводу их недовольства. Обязательно свяжитесь с ними как можно быстрее, чтобы узнать причину.

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

Как это делается:

Процесс состоит из трех простых шагов:

Шаг 1. Встраивание кода

• поместите в шаблон структуру с одной колонкой;

• перетащите в структуру блок «HTML»;

• кликните левой кнопкой мыши по этому блоку в шаблоне, чтобы открыть его;

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

<style>
    .rating {
        display: inline-block;
    }
    .rating td {
        background: #DDDDDD;
    }
    .rating td:hover,
    .rating td:hover~td {
        background: #FFE173 !important;
    }
    .rating td a:active,
    .rating td a:focus,
    .rating td a:visited {
        background: #FDB140;
        display: inline-block;
    }
    .rating td:active~td {
        background: #FFCF20;
    }
</style>
<table class="rating es-table-not-adapt" dir="rtl">
    <tbody>
        <tr>
            <td><a href="https://secure.esputnik.com/7nq4mBLee8s" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt></a></td>
            <td><a href="https://secure.esputnik.com/7nq4mBLee8s" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt></a></td>
            <td><a href="https://secure.esputnik.com/7nq4mBLee8s" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt></a></td>
            <td><a href="https://esputnik.com" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt="https://secure.esputnik.com/7nqE9Vq2mes" title="https://secure.esputnik.com/7nqE9Vq2mes"></a></td>
            <td><a href="https://esputnik.com" class="esd-frame-element esd-hover-element esdev-disable-select"><img width="42" height="42" src="https://kvlya.stripocdn.email/content/guids/CABINET_6ca2ce0f0df1dc995059ef62e794b713/images/37641586443918323.png" alt="https://secure.esputnik.com/7nqE9Vq2mes" title="https://secure.esputnik.com/7nqE9Vq2mes"></a></td>
        </tr>
    </tbody>
</table>

Код написал наш продуктовый дизайнер Роман Бурдыга.

Шаг 2. Замена ссылок на страницу благодарности

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

Замените подчеркнутые ссылки в коде ссылкой на страницу благодарности.

Строки 1-2 предназначены для 4 и 5 звезд. Сюда вы вставляете ссылку страницы, на которой просто благодарите клиентов за оценку.

А строки 3-5 — это уже для 1, 2 и 3 звезд. Здесь вы добавляете ссылку на страницу, на которой приносите свои извинения и сообщаете пользователям, что ваша команда поддержки клиентов свяжется с ними в ближайшее время.

Шаг 3. Выравнивание оценивания по центру

Чтобы выровнять оценивание по центру, вам нужно:

• открыть редактор кода для структуры с оцениванием. Для этого кликните левой кнопкой мыши значок «Структура» в письме, а затем символ «Редактор кода» над шаблоном;

• вставить приведенный ниже код в строку "td class="esd-block-html" прямо над кодом, который вы встроили на предыдущем этапе.

align="center"

Ваше письмо готово к отправке.

Почтовики, успешно прошедшие тест:

С этим оцениванием успешно справились все основные почтовики, включая Gmail, AOL, Yahoo, Apple Mail, Samsung Mail и даже Outlook как на десктопных, так и на мобильных устройствах.

Альтернативный вариант

Хотя интерактивное 5-звездочное оценивание отлично сработало во всех почтовиках, которые я смогла найти для тестирования, есть вероятность, что вы предпочтете другой способ клиентской оценки в письме.

(Источник: Really Good Emails)

Как это делается:

• вставьте 5 изображений по горизонтали;

• прикрепите к каждому изображению соответствующие ссылки на страницы с благодарностями.

3. Встроенные опросы с несколькими вопросами

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

Как это делается:

• вам надо создать форму Google;

• и отправить ее на свой электронный адрес;

при отправке формы Google убедитесь, что вы выбрали «Отправить по электронной почте», после чего введите свой адрес. При необходимости отредактируйте тему и сообщение, так как все получатели увидят их, и поставьте галочку «Добавить форму в письмо»;

• скопируйте код встраивания;

Откройте форму в папке «Входящие», кликните по ней правой кнопкой и выберите «Инспектировать». Найдите строку ячеек таблицы align="center". Выделите ее и нажмите «CTRL+C» (то есть не кликайте правой кнопкой мыши и не копируйте);

• добавьте новый HTML-блок в шаблон интерактивной рассылки;

• откройте его и удалите «Вставьте HTML-код в редактор» из блока;

• вместо этого вставьте в блок код встраивания;

• готово.

На этой гифке показан процесс встраивания опроса.

Примечание: формы опросов, встроенные в наши интерактивные шаблоны рассылок, корректно отображаются на всех типах устройств. НО! Флажки можно кликнуть только на десктопе, на мобильных они некликабельны.

Поэтому при открывании писем с опросами на смартфонах и планшетах ваши пользователи увидят ссылку на саму форму Google (помните Тему формы, которую вы указали? Это и есть имя ссылки. Она добавляется автоматически. Получатели могут смело кликать ссылку, чтобы отправить ответы).

В моем случае это «Christmas Sales».

Почтовики, успешно прошедшие тест:

• Gmail;

• AOL;

• Yahoo! Mail;

Работает только на десктопных компьютерах.

Пользователи мобильных, а также получатели, использующие другие почтовики увидят ссылку. Они также могут быть перенаправлены в Google Form по клику кнопки «Отправить» (в Apple Mail).

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

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

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

Альтернативный вариант

Если по какой-то причине форма опроса, встроенная в интерактивный шаблон, не работает в вашем ESP или ваш конструктор писем не позволяет вставлять Google Forms, вы можете попробовать такой метод:

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

(Источник: рассылка от Maybelline New York)

Как это делается:

• создайте страницу опроса или встройте форму Google на свой сайт;

• добавьте кнопку CTA в письмо;

• оформите ссылку в виде кнопки.

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

4. Эффект ролловера изображений 

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

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

Важно отметить:

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

Как это делается:

• добавьте изображение в шаблон;

• на панели настроек переключите кнопку «Эффект ролловера»;

• добавьте второе изображение;

• готово!

Почтовики, успешно прошедшие тест:

• Yahoo! Mail;

• AOL;

• Thunderbird;

• Gmail;

• Apple Mail;

• Outlook 2003;

• Outlook Web;

• Outlook для Mac.

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

Вам также может понравиться

Ролловер изображений в емейлах: 12 беспроигрышных идей

5. Карусель изображений в письмах

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

Вы хотите продвигать товары с ценами и описаниями? Тогда подготовьте все заранее с помощью любого фоторедактора (Stripo предлагает встроенный) — и разместите информацию прямо на изображениях. Таким образом, все ваши изображения товаров в карусели/слайдере/ролловере будут информативными и уникальными. И вы точно сможете привлечь неактивных пользователей и как минимум убедите их нажать кнопки, если не превратите их в клиентов.

(Источник: Really Good Emails)

Как это делается:

• создайте карусель при помощи соответствующего подходящего инструмента. Я использовала Freshinbox;

• скопируйте код встраивания;

• в Stripo перетащите базовый блок HTML в свой шаблон;

• дважды кликните по нему, чтобы активировать панель настроек;

• вставьте код встраивания.

Итак, если вы решили создать интерактивное письмо с каруселью изображений, вам понадобится сторонний инструмент для создания такого интерактивного контента. Или же используйте наши интерактивные шаблоны с уже готовой каруселью изображений — просто замените изображения и вставьте свои URL-адреса.

К сожалению, только некоторые ESP поддерживают этот тип интерактивности в письмах.

Почтовики, успешно прошедшие тест:

• Apple Mail;

• Apple iPhone;

• Apple iPad;

• Yahoo! Mail.

Другие пользователи увидят изображение, которое вы установили как первое.

Нужно еще больше идей для интерактивных рассылок? Тогда продолжаем.

6. Аккордеон

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

Вы вряд ли найдете примеры таких интерактивных рассылок, потому что только несколько компаний рискнули использовать меню-аккордеоны в письмах (читайте: их редакторы дали такую техническую возможность).

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

Как это делается:

• откройте этот интерактивный шаблон в редакторе;

• дважды кликните по любому элементу аккордеона, который нужно отредактировать;

• вы можете вносить любые изменения в текст, шрифт, размер шрифта и т. д. либо на панели настроек, либо в коде, как показано ниже:

Более подробную информацию по обоим альтернативным способам вы найдете в статье «Как добавить меню в email с помощью Stripo» в нашем блоге.

7. Встроенные видео

Интерактивный email-маркетинг может быть по-настоящему полезным: в частности видео в письмах способны дать повышение CTR до 85%. И 65% получателей с большей вероятностью приобретут что-либо у вас, если у них будет возможность посмотреть видео о товарах, которые вы продвигаете при помощи электронной почты.

Добавить видео в письма можно четырьмя способами:

• использовать видео с YouTube/Vimeo

Почтовик показывает только изображение превью — в Stripo вы можете заменить его любой понравившейся картинкой;

• загрузить ваше видео в формате mp4

Таким способом вы создаете интерактивное письмо, то есть видео у получателей воспроизводится непосредственно во входящих;

• использовать нашу комбинацию кода

Если почтовик поддерживает интерактивность, пользователи посмотрят видео во входящем письме. Если же интерактивность не поддерживается, клиенты будут перенаправлены на YouTube для просмотра видео;

• с помощью стороннего инструмента

Такие инструменты, как Viwomail.com или Liveclicker, предоставляют вам код встраивания.

Фактически они позволяют встраивать видео в режиме реального времени.

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

Загрузка mp4 видео

Я загрузила видео в формате mp4 на сторонний сайт, а затем вставила ссылку в блок HTML.

Наше собственное видео в формате mp4 отображалось и даже воспроизводилось в Outlook 2011 и 2016.

Но не в Gmail и не в Apple. Печалька… Такое себе решение для привлечения клиентов.

Использование нашей комбинации кода

Наш верстальщик Любовь Роленко написала кодовую комбинацию:

<video poster="https://tlr.stripocdn.email/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" controls="controls" width="100%" height="176"><source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><a href="https://www.youtube.com/watch?v=8gqqANVWdjU"><img src="https://tlr.stripocdn.email/content/guids/CABINET_f98886e36d3d2f7b2dc5420f03cfb022/images/20091519918813053.png" width="320" height="176"></a></video>

Первые две ссылки — основные. А последние две, начинающиеся с <a href> — альтернативные. Здесь мы использовали два видео: одно с YouTube, а другое было загружено на другой сайт, потому что нам была нужна ссылка на МР4 видео, — и одно изображение в качестве основного и альтернативного. Просто сделайте скриншот своего видео на YouTube.

Если первая часть кода — встроенное видео — не отработает, то наши клиенты увидят альтернативу.

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

Почтовики, успешно прошедшие тест:

• iPhone 7 и все последующие модели воспроизвели наши видео;

• Apple Mail тоже воспроизвел;

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

• Outlook 2011 на MacBook воспроизвел видео.

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

Альтернативный вариант

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

8. Анкорные ссылки

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

(Источник: рассылка от Mercedes-Benz)

Как это делается:

• создайте меню для вашего письма;

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

• кликните левой кнопкой мыши по блоку HTML в шаблоне, чтобы открыть редактор кода;

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

<a name="yourlabel"></a>

• возвращаемся назад к меню;

• открываем его код;

• и для необходимой вкладки меню вместо гиперссылки вводим после символа хэштега название элемента письма, к которому вы подключаете вкладку меню. В моем примере это будет «#yourlabel»;

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

Почтовики, успешно прошедшие тест:

• Gmail (Web);

• Gmail на Android;

• Apple Mail;

• Yahoo! Mail;

• Outlook.com;

• AOL.com;

• Samsung Email на Android;

• Windows Mail;

В завершение

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

И еще раз напомним:

• делайте дизайн интерактивных писем простым: упор здесь делается именно на интерактивность;

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