Drag-n-drop and API export instead of hard-coding every email _ How HelloAsso built a bridge between design and code
05 February

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 конструктор листів.