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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Крок 3. Складіть повідомлення для 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% одержувачів — саме такий відсоток аудиторії використовує поштові клієнти, сумісні з цими технологіями для правильного відображення інтерактивного контенту.

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