interactive-module-generator-find-a-pair
26 березня

Генератор інтерактивних модулів: «Знайдіть відповідність»

Створити ексклюзивні листи
Зміст
  1. Як використовувати гру «Знайдіть відповідність» в листах
  2. Як згенерувати інтерактивний модуль «Знайдіть відповідність»
  3. На завершення
1.
Як використовувати гру «Знайдіть відповідність» в листах

Ознайомтеся з нашим покроковим гайдом, щоб дізнатися, як можна легко згенерувати гру «Знайдіть відповідність» і вбудувати її в інтерактивний лист.

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

Як використовувати гру «Знайдіть відповідність» в листах

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

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

Гра «Знайдіть відповідність» для музичної індустрії

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

Гра «Знайдіть відповідність» для кіноіндустрії

Є одне доречне місце, де можна провести багато часу за переглядом фільмів. Правильно, під час польоту у відпустку.

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

Гра «Знайдіть відповідність» для сфери подорожей

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

Як згенерувати інтерактивний модуль «Знайдіть відповідність»

Ми продовжуємо дотримуватися простої схеми при генеруванні інтерактивних модулів, тому ви можете легко і швидко створити цю гру для своєї email-розсилки. Просто зробіть такі кроки.

Крок 1. Виберіть кількість клітинок

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

Вибір кількості клітинок

Крок 2. Додайте зображення для клітинок

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

Важлива примітка: завантажуване зображення має бути у форматі PNG, JPG або GIF. Крім того, вага завантажуваного файлу не має перевищувати 3 МБ, а розміри — 4000×4000 пікселів.

Додавання картинок у клітинки гри «Знайдіть відповідність»

Крок 3. Складіть повідомлення для HTML-версії гри

У зв'язку з технічними особливостями HTML гра вимагає створення додаткових повідомлень для її продовження, залежно від вибраної пари. Необхідно створити:

  • повідомлення, яке одержувач побачить у разі виявлення правильної пари; 
  • кнопку для підтвердження правильності пари; 
  • «Повідомлення про прогрес» із текстом і кнопку для продовження гри;
  • повідомлення про неправильну пару;
  • кнопку для продовження гри після того, як було знайдено неправильну пару.

Налаштування повідомлень для HTML-версії гри «Знайдіть відповідність»

У HTML-версії гри ці повідомлення матимуть такий вигляд:

Повідомлення в HTML-версії гри «Знайдіть відповідність»

Крок 4. Налаштуйте повідомлення про завершення 

Щойно одержувач знайде всі пари, потрібно показати йому вікно завершення гри з гідною нагородою. Можна написати власне повідомлення в невеликому текстовому редакторі прямо в генераторі, прикріпити посилання, додати емодзі, а також налаштувати відображення вікна завершення гри (у вигляді попапу поверх гри або тексту під нею).

Створення повідомлення про завершення в грі «Знайдіть відповідність»

Крок 5. Створіть фолбек

Ще один важливий момент — створення фолбека. Не всі поштові клієнти підтримують AMP і HTML, тому для таких користувачів потрібно підготувати окрему версію тексту, яку вони побачать у своїй пошті. У випадку з грою «Знайдіть відповідність» достатньо просто одразу надати винагороду, тоді як в інших поштових клієнтах одержувачам доведеться поборотися за приз у грі.

Генерування фолбека для гри «Знайдіть відповідність»

Можна також автоматично створити фолбек на основі повідомлення з AMP- і HTML-версії, клікнувши на відповідний перемикач.

Кнопка створення автоматичного фолбека

Крок 6. Налаштуйте оформлення гри

Отже, основа гри готова, і тепер час подбати про її зовнішній вигляд. Ми надаємо інструменти, які допоможуть налаштувати її оформлення відповідно до вимог вашого email-дизайну. У генераторі інтерактивних модулів можна:

  • вибрати колір клітинок попереднього перегляду, помістити на прев'ю картинку з уже готових або додати свою;
  • налаштувати закруглення меж фону для клітин;
  • налаштувати повідомлення про збіг пари та продовження гри для HTML-версії.

Важлива примітка: завантажувані зображення клітинок прев'ю мають бути у форматі PNG, JPG або GIF. Крім того, вага завантажуваного файлу не має перевищувати 3 МБ, а розміри — 4000×4000 пікселів.

Опції прев'ю картинок для клітинок

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

Опції повідомлень про збіг пари

Крок 7. Скачайте і додайте гру в лист

Наш генератор видає модуль з грою, що містить:

  • AMP-версію листа. Працює в Gmail, Yahoo і FairEmail;
  • інтерактивний фолбек. Працює на всіх пристроях і в поштових клієнтах, що підтримують HTML5 і CSS3. Він також працює в Apple Mail і Samsung Email; 
  • текстовий фолбек. Працює з поштовими клієнтами, які не підтримують HTML5 і CSS3, наприклад з деякими застосунками Outlook.

Використання AMP- та інтерактивного HTML-фолбека дозволить охопити 92% аудиторії, оскільки вони зможуть взаємодіяти з інтерактивною частиною цієї гри. Текстовий фолбек дасть змогу надати решті 8% аудиторії, які використовують поштові сервіси, що не підтримують інтерактивний контент, промокод або іншу винагороду, за яку решта боротимуться під час гри.

Процес додавання гри також досить простий і не займає багато часу. Ми детально описали його в нашому першому мануалі «Як створювати інтерактивний контент без проблем із кодом». Перейдіть за посиланням на цю статтю і знайдіть Крок 6, де детально описано весь процес.

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

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

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

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

Створюйте ексклюзивні листи за допомогою Stripo
Чи була ця стаття корисна?
Tell us your thoughts
Дякуємо за ваш відгук!
0 коментарів
Тип
Індустрія
Сезони
Інтеграції
Редактор Stripo
Спростіть процес створення листів.
Плагін Stripo
Інтегруйте Drag-n-Drop редактор Stripo у свій веб-додаток.
Замовити власний шаблон
Наша команда може розробити і зверстати його для вас. Просто заповніть бриф, і ми зв'яжемося з вами найближчим часом.

Редактор Stripo

Для команд фахівців з email-маркетингу та індивідуальних розробників листів.

Плагін Stripo

Для продуктів, які можуть ефективно використовувати інтегрований white label конструктор листів.