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-анімована кнопка

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

(Джерело: лист від Stipo)

Раніше для анімації кнопок потрібно було додати CSS-властивість до кнопки в редакторі HTML-коду. Що було непросто.

Минулого року ми випустили нову функцію — інтерактивну кнопку/кнопку з підсвічуванням по наведенню, яка змінює свої кольори, коли ви наводите на неї курсор миші.

Як це зроблено:

• перейдіть до вкладки «Оформлення»;

• потім відкрийте вкладку «Загальні налаштування»;

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

• перемкніть кнопку «Підсвічувати по наведенню»;

• налаштувати стилі тексту, такі як шрифт, його тип та розмір шрифту;

• налаштувати колір кнопки та колір шрифту;

• ці налаштування будуть застосовані до всіх кнопок в інтерактивному HTML-листі;

• готово.

На цьому скриншоті «Колір кнопки» означає основний колір, колір підсвіченої кнопки означає колір, який бачать ваші користувачі, коли наводять на неї курсор миші, а колір тексту означає колір шрифту.

2. Зоряний рейтинг

Не секрет, що за купівлею клієнта має йти лист із запрошенням пройти опитування.

Існує кілька типів опитувань. Але зірковий рейтинг — найпростіший для користувачів, оскільки їм не потрібно нікуди йти — вони оцінюють ваш сервіс прямо у листі.

Клієнти оцінюють ваші товари/інструменти/послуги. Зрозуміло, що ви й ваш постачальник послуг електронної пошти повинні підготувати цільові сторінки типу «Дякуємо». Вони можуть бути дуже короткими. Головна мета цих сторінок — дати клієнтам зрозуміти, що ви отримали їхні відповіді.

Ви також можете створити дві сторінки «Дякуємо». Одна призначена для тих, хто поставив вам 4 або 5 зірок — тут ви просто дякуєте користувачам. Інша — для тих, хто дав вам 1-3 зірки — тут ви можете додати посилання на Google Forms, щоб запитати користувачів, чим саме вони незадоволені у вашому сервісі. Обов'язково зверніться до них найближчим часом, щоб з'ясувати причину.

Гарний 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, Samsung Mail і навіть Outlook як на десктопних, так і на мобільних пристроях.

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

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

(Джерело: Really Good Emails)

Як це зроблено:

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

• доповніть кожне зображення відповідними посиланнями до сторінки «Дякуємо».

3. Вбудовані анкети з кількома питаннями

Якщо вам потрібно поставити кілька питань, слід створити форму квізу та вбудувати її в інтерактивну email-розсилку, щоб виключити зайві дії для ваших підписників — вони зможуть голосувати прямо у листах.

Як це зроблено:

• потрібно створити Google Form;

• надіслати її на вашу електронну поштову адресу;

Примітка: під час надсилання Google Form переконайтеся, що ви вибрали опцію «Надіслати електронною поштою», потім введіть свою email-адресу, при необхідності відредагуйте тему та повідомлення, оскільки всі одержувачі побачать її, та встановіть прапорець «Включити форму в лист»;

• скопіюйте код вбудовування;

Відкрийте форму в папці вхідних повідомлень, клікніть правою кнопкою миші на формі та виберіть "Inspect". Знайдіть рядок table align="center" cellpadding. Коли її буде виділено, натисніть "CTRL+C" (не клікайте правою кнопкою миші, а потім скопіюйте);

• додайте новий HTML-блок до шаблону інтерактивного листа;

• відкрийте його та зітріть напис «Вставте свій HTML-код у редактор», який є в цьому блоці;

• вставте код вбудовування у цей блок;

• готово.

Будь ласка, перегляньте GIF-ку нижче, щоб побачити весь процес «Вбудовування анкети».

Примітка: форми анкети, вбудовані в інтерактивні шаблони розсилки, коректно відображаються на всіх типах пристроїв. АЛЕ! Прапорці клікабельні лише на десктопах, а на мобільних пристроях вони не клікабельні.

Тому при відкриванні листів з опитуваннями на мобільних телефонах і планшетах у ваших користувачів буде посилання на саму Google Form (пам'ятаєте тему форми, яку ви вказали? Це і є назва посилання — вона додається автоматично. Одержувачі можуть вільно натиснути на посилання, щоб надіслати свої відповіді).

У моєму випадку там написано «Різдвяні розпродажі».

Поштові клієнти, що успішно пройшли тест.

• Gmail;

• AOL;

• Yahoo! Mail.

Це працює лише на десктопах.

Користувачі мобільних пристроїв та одержувачі, які використовують інші поштові клієнти, побачать посилання. Вони також можуть бути перенаправлені до Google Form після натискання кнопки «Надіслати».

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

Примітка: зараз Stripo — єдиний конструктор шаблонів листів, який дозволяє вбудовувати Google Forms таким чином.

Деякі конструктори шаблонів листів не дозволяють працювати з відкритим HTML-кодом; інші дозволяють це робити, але їхній редактор змінює код вбудовування, і форми опитування виглядають неробочими навіть на десктопних пристроях.

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

Якщо з якихось причин форма опитування, вбудована в інтерактивну розсилку, не працює в ESP або ваш конструктор листів не дозволяє вставляти Google Forms, ви можете спробувати цей метод:

Вставте кнопку CTA з посиланням, яке веде ваших клієнтів до цільової сторінки вашого сайту, де ви попередньо розмістили форму опитування.

(Джерело: лист від Maybelline New York)

Як це зроблено:

• створіть сторінку квізу або вбудуйте Google Form на своєму сайті;

• додайте CTA-кнопку до листа;

• помістіть посилання у кнопку.

Примітка: перевірити коректність роботи посилань можна тільки при надсиланні тестового листа самому собі або в режимі «Прев'ю». Посилання ніколи не працюють у редакторах шаблонів.

4. Ролловер-ефект зображення в листах

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

Stripo пропонує веб-безпечний ролловер-ефект зображень, який коректно відображається у більшості поштових клієнтів. Наш унікальний код підтримується всіма ESP, включаючи Mailchimp.

Важливо зазначити:

Ролловер-ефект зображень призначений лише для десктопних пристроїв. На мобільних платформах одержувачі побачать лише перше зображення.

Як це зроблено:

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

• в панелі «Налаштування» перемкніть кнопку «Ефект Rollover»;

• додайте другу картинку;

• готово!

Поштові клієнти, які успішно пройшли тест:

• Yahoo! Mail;

• AOL;

• Thunderbird;

• Gmail;

• Apple Mail;

• Outlook 2003;

• Outlook Web;

• Outlook для Mac.

Нові ідеї, рекомендації та вимоги до зображень ви знайдете у статті блогу, наведеній нижче.

You might also like

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

Карусель зображень — це цікавий спосіб показати кілька фотографій товарів на одному екрані.

(Джерело: Really Good Emails)

Як це зроблено:

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

• скопіюйте код для вбудовування;

• у Stripo перетягніть основний блок HTML і помістіть його у шаблон листа;

• двічі клікніть на нього, щоб активувати панель «Налаштування»;

• вставте код вбудовування.

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

На жаль, лише деякі ESP підтримують такий тип інтерактивності у листах.

Поштові клієнти, які успішно пройшли тест:

• Apple Mail;

• Apple iPhone;

• Apple iPad;

• Yahoo! Mail.

Інші користувачі спочатку бачать налаштоване вами зображення.

Потрібно більше ідей для інтерактивної розсилки? Читайте далі.

6. Акордеон

Цей вид інтерактивності у листах стає дедалі популярнішим серед маркетологів. Чому ми його любимо? Бо акордеони призначені для приховування довгих текстів за булітами, тобто для економії дорогоцінного місця у ваших листах на мобільних телефонах.

Ви навряд чи знайдете приклади таких інтерактивних розсилок, тому що лише деякі компанії досить сміливі, щоб використовувати (читай, їхній редактор листів технічно готовий надати) акордеони в листах.

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

Як це зроблено:

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

• двічі клікніть на будь-який елемент в акордеоні, який вам потрібно відредагувати;

• ви можете внести всі зміни до тексту, шрифту, розміру шрифту тощо або в панелі «Налаштування» чи в коді, як показано нижче:

Більш детальну інформацію про обидві альтернативи можна знайти у статті блогу «Як додати меню до листа за допомогою 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, а інше було завантажено на інший сайт, тому що нам потрібне було додаткове посилання — і одне зображення як основне та альтернативне посилання. Просто зробіть скриншот відео на YouTube.

Якщо основні посилання не працюють, то наші клієнти побачать запасний варіант.

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

Поштові клієнти, які успішно пройшли тест:

• iPhone 7+ відтворював наші відео;

• Apple Mail відтворював відео;

• Gmail показував прев’юшку. Тільки коли я натиснула на неї, поштовий клієнт відобразив посилання, яке привело мене до YouTube;

• Outlook 2011 на MacBook відтворював моє відео.

Примітка: при додаванні резервного прев ‘ю зображення, переконайтеся, що ви розмістили над ним кнопку «Відтворити». Інакше як ваші читачі дізнаються, що тут є вбудоване відео і що вони повинні натиснути на картинку?

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

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

8. Анкорні посилання

На відміну від інших прикладів інтерактивної розсилки, цей інтерактивний елемент не призначений для того, щоб розважати ваших клієнтів. Він покликаний швидше перевести їх до частини листа, що їх цікавить.

(Джерело: лист від Mercedes-Benz)

Як це зроблено:

• створіть меню для свого листа;

• тепер за допомогою відповідної вкладки меню у вашому інтерактивному листі прямо над розділом листа користувачі повинні перейти до базового блоку «HTML». Не хвилюйтеся. Це не вплине на шаблон дизайну;

• клікніть лівою кнопкою миші на HTML-блок у шаблоні, щоб відкрити редактор коду;

• видаліть вміст і вставте наведений нижче зразок коду, де "yourlabel" означає назву потрібного елемента листа. У моєму прикладі це "yourlabel". Незалежно від того, скільки слів містить назва елементу листа, пробіли тут не допускаються;

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

• тепер поверніться до меню;

• відкрийте його код;

• для потрібної вкладки меню замініть гіперпосилання на назву елемента листа, який ви підключаєте до вкладки меню, перед яким стоїть символ хештегу. У моєму прикладі це буде "#yourlabel";

• зробіть те саме з іншими вкладками меню, щоб зв'язати їх з відповідними елементами листа.

Поштові клієнти, які успішно пройшли тест:

• Gmail (Веб);

• Gmail на Android;

• Apple Mail;

• Yahoo! Mail;

• Outlook.com;

• AOL.com;

• Samsung Email на Android;

• Windows Mail.

На завершення

Інтерактивні email-кампанії — це гарний спосіб оживити ваші розсилки. Тому ми вважаємо, що вам варто спробувати. Разом з тим ми знаємо, що створення власних інтерактивних листів зазвичай займає більше часу, ніж звичайних. Тому ми в Stripo створили інтерактивні шаблони, а також зробили все можливе, щоб надати вам необхідні приклади коду та навіть протестовані листи, щоб допомогти вам швидше створювати привабливі листи.

Дозвольте нагадати вам:

• робіть дизайн інтерактивних листів простим, оскільки основна увага приділяється інтерактивності;

• завжди надсилайте тестового листа на всі адреси електронної пошти та пристрої, оскільки це єдиний спосіб перевірити, чи дійсно інтерактивні елементи працюють, чи це просто статичні зображення.