Редактор шаблонів Email

Для чого це потрібно?

Редактор шаблонів — це місце, де візуально проектуєте «оболонку» ваших автоматизованих листів: заголовок, логотип, кольори заголовка та футера, контактну інформацію та посилання на соцмережі. Основний текст листа пишеться пізніше в Редакторі сценаріїв. Думайте про це як про створення фірмового бланку: коли збережене, ви обратимете цей шаблон при додаванні кроку Email у будь-якому сценарії.

Покрокова інструкція

1. Відкрити Редактор

• Новий шаблон: У списку Шаблонів Email натисніть Створити → Створити шаблон.
• Редагувати існуючий: У списку, в рядку потрібного шаблону натисніть іконку Редагувати (олівець).
• Редактор відкривається у поділеному вигляді: Попередній перегляд (ліворуч) та Панель редагування (праворуч).

2. Задати Назву та Опис Шаблона (Метадані)

1. На верхній панелі інструментів натисніть іконку Метадані (тег/база даних) — підказка: «Додати метадані».
2. З'явиться форма:
   • Назва шаблону — Обов'язкове. Макс. 100 символів. Так ви ідентифікуєте його у списку та селекторах сценаріїв.
   • Опис шаблону — Опціонально. Макс. 200 символів. Внутрішні нотатки про призначення чи аудиторію.
3. Натисніть Зберегти. Назва з'являється у вкладці браузера та у списку шаблонів.

Важливо: Ви повинні зберегти метадані першими (створити шаблон на сервері), перш ніж зможете завантажити логотип. Кнопка завантаження логотипу неактивна, доки шаблон не існує.

3. Редагувати Заголовок Email

Попередній перегляд: Верхня кольорова смуга з відцентрованим текстом. Керування редактором:

1. Текст заголовка — Текстове поле. Введіть рядок заголовка (напр., «Оновлення TechConf 2024»). Макс. 50 символів.
2. Колір заголовка — Вибір кольору (іконка пензлика). Оберіть колір фону смуги. За замовчуванням: #4CAF50 (зелений).
3. Зміни миттєво відображаються у перегляді.

4. Додати Логотип

Попередній перегляд: Під заголовком, по центру в області контенту. Керування редактором:

1. Натисніть ОБРАТИ ЗОБРАЖЕННЯ.
2. Відкриється вибір файлу. Оберіть зображення:
   • Макс. розмір: 2 МБ
   • Рекомендовані розміри: 400 пкс ширини × 150 пкс висоти
   • Дозволені формати: JPEG, PNG, WebP, GIF
3. Після вибору логотип з'являється у перегляді.
4. Щоб видалити: натисніть іконку Видалити (кошик) поруч з кнопкою завантаження.

Примітка: Завантаження логотипу працює лише після щонайменш одного збереження шаблону (метаданих збережено). Якщо спробуєте завантажити раніше, побачите: «вимкнено: Вам потрібно зберегти (створити) шаблон перед завантаженням логотипу!»

5. Встановити Колір Футера

Попередній перегляд: Нижня кольорова смуга з контактами та соціальними посиланнями. Керування:

• Колір футера — Вибір кольору. Оберіть колір фону футера. За замовчуванням: #333333 (темно-сірий). Текст у футері завжди білий.

6. Додати Контактні Рядки

Попередній перегляд: Усередині футера, кожен контакт — окремий абзац. Керування:

1. Натисніть кнопку + (плюс) в розділі Контакти email щоб додати рядок.
2. З'явиться текстове поле. Введіть один контакт на рядок (напр., «+38 044 123 45 67», «support@example.com», «вул. Хрещатик 1, Київ»).
3. Макс. 50 символів на рядок.
4. Щоб додати ще рядки, знову натисніть +.
5. Щоб видалити рядок (якщо їх більше одного), натисніть іконку кошик на цьому рядку.

7. Додати Посилання на Соцмережі

Попередній перегляд: У футері, під контактами, як клікабельні посилання. Керування:

1. Натисніть кнопку + (плюс) в розділі Соціальні посилання email.
2. З'являються два поля:
   • Назва посилання — Видимий текст (напр., «Twitter», «LinkedIn», «Facebook»). Макс. 50 символів.
   • URL посилання — Повна URL (має починатися з https://). Макс. 300 символів.
3. Щоб додати ще пару, знову натисніть +.
4. Щоб видалити пару (якщо їх більше однієї), натисніть іконку кошик у цьому рядку.

8. Зберегти Шаблон

1. На верхній панелі натисніть Зберегти шаблон (зелена кнопка, іконка дискетки).
2. Toast успіху: «Успішно збережено!»
3. Шаблон з'являється у Списку шаблонів Email з вказаною назвою.
4. Тепер його можна обрати в будь-якому кроці Email у Редакторі сценаріїв.

Важливі правила та поради

Примітка: Текст заголовка обмежено 50 символами. Будьте короткими та ефективними.

Примітка: Логотип має бути ≤ 2 МБ, рекомендовано 400×150 пкс. Більші зображення приймаються, але можуть виглядати спотворено.

Примітка: Контактні рядки: макс. 50 симв. кожен. Назви соціальних посилань: макс. 50 симв. URL соціальних: макс. 300 симв.

Примітка: Не можна завантажити логотип, доки не збережений шаблон хоча б раз (метадані). Файлу потрібен ID шаблону для прив'язки.

Порада: Використовуйте перегляд для перевірки контрасту — текст заголовка білий, тому темніші кольори заголовка працюють краще. Текст футера теж білий, темні кольори футера — оптимальні.

Порада: Додайте хоча б один контактний рядок (email або телефон), щоб одержувачі могли відповісти або зв'язатися з підтримкою.

Порада: Соціальні посилання відкриваються в новій вкладці. Завжди використовуйте URL https://.

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

Поширені запитання та виправлення неполадок

П: Кнопка завантаження логотипу неактивна / показує повідомлення «вимкнено».
В: Ви ще не зберегли шаблон. Натисніть іконку Метадані, введіть назву, натисніть Зберегти, потім повторно спробуйте завантажити логотип.

П: Я завантажив логотип, але воно виглядає розтягнутим/стиснутим.
В: Перегляд вписує зображення в блок 400×150. Для найкращого результату завантажуйте зображення саме з цим співвідношенням сторін (8:3).

П: Чи можу я змінити шрифт або розмір тексту?
В: Не в поточному редактері. Шаблон використовує фіксований системний шрифтовий стек та попередньо задані розміри. Налаштовуються лише кольори, логотип, текст заголовка, контакти та соціальні посилання.

П: Я випадково видалив контактний рядок. Чи є «скасувати»?
В: Скасування відсутнє. Натисніть +, щоб додати новий рядок, і знову введіть текст.

П: Соціальні посилання не відображаються у перегляді.
В: Переконайтеся, що обидва поля (Назва та URL) заповнені. Порожні пари не рендеряться.

П: При натисканні Зберегти вискакує toast «Помилка збереження!».
В: Перевірте, чи заповнена Назва шаблону (у Метаданих). Також що жодне поле не перевищує свій ліміт символів. Якщо помилка повторюється — оновіть сторінку і спробуйте знову — ваші чернетки зберігаються в браузері до успішного збереження.

П: Чи можу я переглянути, як виглядає на мобільному?
В: Перегляд — це ширину десктопу (700 пкс). Відправлений лист є респонсивним. Для справжнього тесту на мобільному — надішліть тестовий лист собі з Редактора сценаріїв.

П: Де редактор тіла/контенту email?
В: Цей шаблон визначає лише каркас (заголовок, логотип, футер, контакти, соцмережі). Основний контент формується в Редакторі Email сценарію при створенні кроку Email — ви пишете повідомлення там, і воно вставляється в область контенту цього шаблону.