Drag-n-drop and API export instead of hard-coding every email _ How HelloAsso built a bridge between design and code
14 дней назад

Drag-n-drop и API-экспорт вместо жесткого хардкодинга каждого письма: как HelloAsso нашла связующее звено между дизайном и кодом

Алина Самульская-Холина
Алина Самульская-Холина Copywriter и content writer в Stripo

Подвести итог

ChatGPT Perplexity
Оглавление
  1. Знакомьтесь с компанией
  2. Задача: сделать процесс создания писем более гибким и автономным
  3. Решение: выбор конструктора писем, подходящего для технических и нетехнических команд
  4. Рабочий процесс: как HelloAsso создает и масштабирует письма
  5. Результаты и эффект: повышение скорости, качества и гибкости при создании писем
  6. В завершение
1.
Знакомьтесь с компанией

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

В этом практическом кейсе HelloAsso, ведущая вебплатформа для французских некоммерческих организаций с 20+ миллионами контактов и 3+ миллионами отправленных писем ежемесячно, рассказала нам, как Stripo позволила им отказаться от хардкодинга каждого шаблона письма. Благодаря сочетанию drag-n-drop дизайна и API-экспорта их маркетинговые и коммуникационные команды теперь могут самостоятельно создавать, обновлять и утверждать письма, сохраняя при этом целостный фирменный дизайн.

Эксперт

Гавен Мерсье
Marketing Team Manager в HelloAsso

Знакомьтесь с компанией

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

Задача: сделать процесс создания писем более гибким и автономным

Письма играют центральную роль в деятельности HelloAsso. 

Будучи платформой SaaS, она использует письма для реализации следующих направлений: 

  • онбординг и внедрение продукта: email сопровождает некоммерческие организации в освоении цифровых инструментов, помогая им легко настраивать кампании и максимально повышать их эффективность;
  • надежность работы: письма необходимы для рассылки транзакционных сообщений, таких как подтверждения оплаты и налоговые квитанции. Это автоматизирует трудоемкие задачи для волонтеров, позволяя им сосредоточиться на своей основной деятельности;
  • вовлеченность сообщества: это позволяет нам делиться лучшими практиками и вдохновлять подписчиков, укрепляя идею о том, что цифровые инструменты являются рычагом для крепких социальных связей.

До внедрения Stripo компания HelloAsso сталкивалась с явными операционными трудностями при создании писем. Шаблоны транзакционных писем администрировались непосредственно в коде продукта.

В результате даже небольшие обновления текста или визуальные корректировки требовали участия верстальщиков и приоритезации со стороны команды продукта. Эта зависимость замедляла обновления и затрудняла повседневное внесение изменений в письма.

Со временем такая организация работы привела к росту технического долга в области электронной почты. Шаблоны писем больше не отражали эволюцию бренда HelloAsso, а команде не хватало гибкости, чтобы обновлять письма в ответ на отзывы получателей или появление новых функций продукта. Команды по маркетингу и коммуникациям не могли работать независимо и оптимизировать письма в режиме реального времени. HelloAsso нужен был способ отделить дизайн от разработки и дать командам по контенту полную свободу в создании писем.

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

Гавен Мерсье

Гавен Мерсье,

Marketing Team Manager в HelloAsso.

В этом примере показано транзакционное письмо с использованием различных merge-тегов, которое требует безупречного экспорта в почтовую систему и подключения к базе данных:

Пример письма с merge-тегами

(Источник: письмо от HelloAsso)

Решение: выбор конструктора писем, подходящего для технических и нетехнических команд

HelloAsso обнаружила Stripo через поиск Google, когда искала решение для email-дизайна, которое предлагало бы готовые HTML-шаблоны и бесперебойно работало с ее технической конфигурацией. Команде нужен был инструмент, на который могли бы полагаться разработчики, а также который делал бы создание писем доступным для специалистов по маркетингу и коммуникациям.

После тщательного тестирования бесплатной версии Stripo привлекла внимание по нескольким причинам:

  1. Гибкость дизайна: ее drag-n-drop редактор позволил нетехническим членам команды создавать сложные варианты разметки и персонализированные письма без необходимости верстания. 
  2. Идеальная интеграция: в то же время API-интеграция позвонила Stripo напрямую подключиться к проприетарной системе транзакционных писем HelloAsso, устранив разрыв между дизайном и реализацией.
  3. Экономическая эффективность: цена также сыграла важную роль, поскольку Stripo предложила выгодный вариант, который хорошо отвечал потребностям некоммерческой организации с миссией.

Приветственное письмо для некоммерческой вебплатформы

(Источник: письмо от HelloAsso)

Рабочий процесс: как HelloAsso создает и масштабирует письма

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

Большинство созданных в Stripo писем являются транзакционными и запускаются действиями подписчиков, такими как продление членства, регистрация на мероприятия, донаты или солидарные покупки. Эти сообщения представляют собой наиболее важные точки соприкосновения в воронке HelloAsso. Имея базу данных с 20+ миллионами контактов и отправляя 3+ миллиона писем ежемесячно, команда полагается на процесс, который гарантирует надежность, автоматизацию и целостность дизайна во всех коммуникациях.

Stripo изменила внутреннюю организацию процесса создания писем. Теперь команды по маркетингу и коммуникациям полностью самостоятельно занимаются email-дизайном, не полагаясь на верстальщиков и хардкодинг шаблонов.

Вот как сейчас выглядит рабочий процесс создания писем:

  • графический дизайнер создает базовые шаблоны в Stripo, используя drag-n-drop редактор;
  • затем контент-маркетолог адаптирует эти шаблоны для каждого нового письма; 
  • для утверждения команда делится ссылкой на превью с бренд-менеджером, маркетинговым и продуктовым менеджерами;
  • после утверждения шаблоны синхронизируются с проприетарной системой HelloAsso через API Stripo, который управляет автоматической массовой рассылкой.

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

Наиболее ценной комбинацией функций Stripo для нас является drag-n-drop конструктор и подключение по API. Мы используем сохраненные блоки для повторяющегося контента. Это важная функция, которая позволяет нам обеспечить целостность всех писем и экономить время за счет использования повторяющихся элементов, таких как хедеры, футеры и дисклеймеры.

Гавен Мерсье

Гавен Мерсье,

Marketing Team Manager в HelloAsso.

Примечание от Stripo: если вы хотите быстро создавать письма с различными данными, можете воспользоваться API от Stripo. Этот метод подключения автоматически создает письма с помощью предварительно настроенных модулей, хранящихся в библиотеке, которые определяют дизайн и разметку конечного письма, а также внешний источник данных (источник контента).

 

Для экспорта любого письма или шаблона письма из проекта в HTML-файл с помощью API от Stripo и последующей отправки с любой платформы необходимо найти ID-номер, кликнув на иконку «три точки» > вкладка «Получить информацию», и отправить API-запрос на экспорт письма / шаблона.

 

Более подробно этот метод описан здесь и в документации по API от Stripo.

Как найти номер идентификатора письма в редакторе Stripo

Результаты и эффект: повышение скорости, качества и гибкости при создании писем

С момента внедрения Stripo компания HelloAsso отметила значительные улучшения в нескольких ключевых аспектах коммуникации по электронной почте. Эффект выходит за рамки ускорения работы и затрагивает повседневную работу команды с письмами.

Пример письма для французской некоммерческой платформы

(Источник: письмо от HelloAsso)

Основные результаты использования Stripo:

  • более быстрые и гибкие обновления: шаблоны писем больше не сложно настраивать. То, что раньше казалось устаревшим, теперь выглядит современно и профессионально. Простые изменения, такие как добавление временного блока для продвижения Giving Tuesday, можно сделать примерно за пять минут. До Stripo даже небольшие обновления создавали неудобства и замедляли работу всей команды;
  • улучшенное качество дизайна: письма легче обновлять и приводить в соответствие с брендом. Это сделало повседневную коммуникацию более целостной и визуально совершенной, без необходимости обращаться к верстальщикам за каждым изменением;
  • повышенная гибкость для маркетинговых команд: самым большим изменением стала внутренняя плавность. Stripo устранила технические препятствия, которые ранее мешали команде вносить какие-либо улучшения. Речь идет не только об экономии времени, но и о возможности выполнять действия, которые ранее были невозможны;
  • более эффективные онбординг и внедрение продукта: ярким примером являются приветственные и онбординговые письма. Создав эти письма в Stripo, HelloAsso сделала путь клиента более понятным и увлекательным. Это значительно улучшило восприятие продукта и помогает каждому новому члену ассоциации чувствовать поддержку с самого первого взаимодействия.

Самым впечатляющим моментом, безусловно, было тестирование API-соединения. Увидеть, что мы можем создавать индивидуальные письма, экспортировать HTML через API и получать их идеальное отображение в нашей базе данных, было настоящим откровением. Возможность вставлять переменные, такие как [first_name], прямо в редактор Stripo и видеть их правильное отображение в нашей системе в момент отправки, было тем доказательством, в котором мы нуждались. Мы наконец-то нашли связующее звено между дизайном и кодом.

Гавен Мерсье

Гавен Мерсье,

Marketing Team Manager в HelloAsso.

В завершение

Благодаря Stripo HelloAsso превратила электронную почту из технического ограничения в гибкий и надежный канал коммуникации. Команда получила полный контроль над email-дизайном, улучшила его целостность и добилась гибкости, необходимой для масштабной поддержки миллионов клиентов. В результате HelloAsso может обеспечивать современность, актуальность и полезность своих писем, гарантируя, что каждая некоммерческая организация, которую она поддерживает, получает четкие инструкции и лучший опыт на каждом этапе своего пути.

Создавайте в Stripo, экспортируйте куда угодно
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
0 комментариев
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.

Редактор Stripo

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

Плагин Stripo

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