«Сам себе дизайнер», или Как за 10 минут создать новый шаблон для e-mail оповещений
4 мин читать
В нашем сервисе уже в стартовой конфигурации по умолчанию доступен целый набор e-mail оповещений, которые отправляются по тем или иным событиям, например, ответственному о комментарии в заявке или клиенту о решении его заявки.
Так как оповещения – один из основных инструментов информирования, нам важно, чтобы они были удобны в использовании, «радовали глаз», не вызывая отторжения у пользователей сервиса, а также корректно отображались во всех почтовых клиентах (Outlook, Thunderbird и др.).
![](/static/8dbade49cfa8612e789d763ae07fdd68/e19c9/1_mail_8bf0ded9c2.png)
С подписки Standard для технолога доступна возможность изменения внешнего вида e-mail оповещений. Как вариант, можно полностью изменить внешних вид стандартных оповещений, загрузив новый HTML.
![](/static/d817cf14e125aa1bf38bee1ebea728f3/37fa5/2_mail_215a5c102f.png)
Кроме того, вы можете создать новые шаблоны оформления самостоятельно, используя возможности фреймворка MJML.
Как создать HTML для e-mail оповещений и быть уверенным, что в Outlook они будут работать корректно
Создать такие оповещения можно легко и быстро с помощью бесплатного приложения MJML.
- Скачиваем редактор с сайта.
- Запускаем редактор.
- Перед нами откроется окно среды разработки MJML.
![](/static/449b0e968c9de8ab06057b79e005d7ec/df623/1_setup_397513f9e3.png)
- Нажимаем «New project», задаем имя проекта (Project name), выбираем расположение проекта (Location) и переходим к выбору шаблона, на основе которого будем создавать наше оповещение.
![](/static/10df10ef48f5865677a2319023739fe4/37961/2_setup_76677d6406.png)
![](/static/2449dc05ebdfce8f907e6390dbb6475b/369bb/3_setup_50a1b5095a.png)
- Открываем галерею шаблонов (Gallery) и выбираем подходящий вариант оформления, нажимаем кнопку «Create», после этого редактируем шаблон под свои требования.
![](/static/847e9fe9deea7f5ac26b78903f82f0a3/2893a/4_setup_fc7d70f2ef.png)
- В целом тэги в MJML схожи с тэгами HTML. Но за счет включения в тэги MJML стилей CSS временные затраты на верстку шаблона значительно сокращаются. Документация по тэгам MJML доступна по ссылке.
![](/static/da6f1c07c4ad8bf2bfdbfc928f2841e0/f67a1/5_setup_781c8a2a6b.png)
- Уже через несколько минут новый стиль оформления для оповещения готов. Важно отметить, что данный шаблон автоматически адаптирован под мобильные устройства, поэтому нет необходимости писать медиа-запросы.
![](/static/f8636b31589ad246870edc82fb15c489/9be8b/3_mail_76393fb740.png)
- Чтобы получить HTML-код данного оповещения, нажимаем в правом верхнем углу редактора кнопку «Copy HTML».
- В ITSM 365 HTML-код из MJML вставляем в исходный код нужного e-mail оповещения (действия по событию).
![](/static/df55e31e95a112d18e6dafb654a9d527/7da18/4_card_94d42efa3b.png)
Процесс настройки завершен! Вот так легко и быстро можно создать свой стиль оформления для e-mail оповещений.
Если у вас остались вопросы или вы хотите получить уже готовые варианты преднастроенных шаблонов, то напишите нам по адресу cs@itsm365.com, и мы загрузим их в вашу систему.