interactive-module-generator-find-a-pair
26 марта

Генератор интерактивных модулей: «Найдите соответствие»

Anton Diduh
Anton Diduh Content writer & Video content creator в Stripo
Оглавление
  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 в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.