Время чтения: 9 минут
В первой статье были описаны три вида рассылок: системные, новостные сообщения и уведомления безопасности. Вторая статья полностью посвящена настройке шаблонов сообщений.
По умолчанию в биллинге включены шаблоны сообщений, в них есть текст и минимальное визуальное оформление. Выглядят они просто и не отражают бренд компании. Чтобы сделать письмо более привлекательным, необходимо разбираться в HTML и CSS, а также понимать, как работают переменные EJS.
Как я настраивала письма для ISPsystem
Немного отойду от темы и расскажу о наших внутренних процессах. Я как маркетолог редко занимаюсь чем-то узко техническим и прикладным, в основном в мои обязанности входит создание и курирование проекта, организация работы между отделами. Чтобы наши клиенты получали удобные и привлекательные письма, нужно было заняться их дизайном и разработкой. О каждом шаге подробнее дальше.
Шаг 1. Дизайн
Дизайн шаблонов мне предоставил департамент UX. У ребят к тому моменту уже сформировалась дизайн-система, и вместе с дизайном типовых писем я получила мини-гайд по использованию элементов в письмах. Всего у меня было 5 видов писем, из которых я могла собирать любые другие письма, передвигая элементы, меняя текст и добавляя медиа-контент.
Отрывок из гайда по дизайн-элементам для писем
Дизайн шаблонов сообщений
Шаг 2. Верстка
Следующим этапом я передала прототипы 5 писем коллегам из веб-разработки, откуда мне вернули уже готовые файлы HTML.
Тут важно заметить, что в BILLmanager при настройке внешнего вида шаблонов сообщений нельзя использовать CSS отдельно. Это сильно затрудняет работу с кодом, ведь в каждом теге HTML может быть вложено несколько десятков уточнений CSS, отчего вся эта конструкция становится тяжело читаемой.
Сильно упрощает задачу фреймворк Zurb Foundation, именно он использовался для создания наших писем.
Шаг 3. Сборка шаблонов и вставка переменных
Как вы помните, в BILLmanager более 70 шаблонов сообщений. У нас на проекте включено 60, из которых 14 — шаблоны одного типа “Об активации услуг” для разных продуктов. Моей задачей было сделать разные письма с разным содержанием, придерживаясь единого дизайна.
Лайфхак для гуманитария: когда вы создаете новый шаблон и выбираете его тип, система автоматически заполняет поля по умолчанию. То есть этот самый минимальный код с простым оформлением. Вам остается сделать свой дизайн и подставить туда те переменные, которые уже есть в исходном шаблоне.
Рассмотрим конкретный пример. Возьмем шаблон “Уведомление об остановке услуг”. На скриншоте ниже слева исходный файл, который заполняется автоматически, справа — итоговый вид письма, которое получит клиент.
Исходный код письма и его фактическое отображение для клиента
Теперь покажу, как выглядит наше письмо в исходном и итоговом вариантах.
Исходный код письма и его фактическое отображение для клиента
Для каждого письма можно использовать ограниченный набор переменных. Например, в шаблоне “Ответ от техподдержки” нельзя использовать переменную текущего баланса или информацию о задолженности клиента.
Чтобы посмотреть список данных, доступных для использования в конкретном письме, сделайте следующее:
- Выберете шаблон и нажмите Испытать в верхнем меню.
- Введите данные для формирования письма.
- Далее вы увидите письмо-образец, а внизу страницы появится раздел Исходные, это и есть перечень всех возможных данных для данного шаблона.
Слева — перечень данных. Справа — использование конкретной переменной в шаблоне.
Шаблоны в таком виде появились в BILLmanager совсем недавно. Раньше использовалась XML-разметка данных, в которой мне разобраться было труднее. Проверьте ваш биллинг. Если у него шаблоны в XML, а вы их не хотите, то просто создайте новые шаблоны таких же типов и система даст вам автоматический код с EJS-переменными. Также актуальные шаблоны по умолчанию можно получить в демо-версии BILLmanager на сайте.
Шаг 4. Тестирование и отладка
Испытание шаблона в BILLmanager
Любой шаблон можно Испытать. Достаточно заполнить требуемые данные и посмотреть образец письма, которое будет отправляться клиентам.
После выбора шаблона активируется кнопка Испытать
Форма испытания шаблона “Об остановке услуги”
Важно. Необходимо заполнить реальные данные из биллинга, но не обязательно эти данные должны принадлежать конкретному пользователю.
Поясню: на скриншоте выше форма испытания шаблона “Об остановке услуги”, где нужно заполнить ID любого вашего клиента и ID любой услуги, когда-либо заказанной на вашем проекте. Эти данные не обязательно должны принадлежать одному аккаунту. Но если в поле “Код услуги” вы напишете что-то другое, например, ID запроса в техподдержку, то вместо успешного теста появится ошибка. Также будет ошибка, если вы укажете несуществующие данные.
Ошибка при попытке испытать шаблон на неверных данных
Если все введенные данные верны, мы увидим в биллинге готовое письмо в разделе “Сообщение в HTML формате”. Тут может быть два пути: мы молодцы или нет.
Пример успешного и неуспешного испытания шаблона
Учитывайте, что сломать шаблон могут только некорректно использованные переменные. Распространенные причины:
- неверное написание, опечатка,
- невозможность использовать переменную в данном шаблоне,
- некорректная работа при иных внешних факторах.
Тестирование шаблона в почтовом клиенте
Испытание не ограничивается отображением письма в интерфейсе биллинга. После того, как письмо сформировалось, в самом низу появляется кнопка Отправить сообщение. Если почтовые шлюзы настроены, письмо отправится клиенту.
Создайте клиента с email, к которому у вас есть доступ, и тестируйте все шаблоны на этом клиенте. Таким же образом можно протестировать шаблоны в разных почтовых клиентах и на разных условиях.
Важно. Не стоит полагаться на сервисы, которые имитируют почтовые службы и размеры экранов. Письма из BILLmanager в тестовой среде могут выглядеть хорошо, а в реальной — плохо. Или наоборот.
Неочевидные тонкости с кнопкой отписки
Сегодня все почтовые службы требуют от корпоративных рассылок функции отписки. Если от ваших писем невозможно отписаться, то вероятнее всего вы попадёте в спам-листы, и ваши клиенты перестанут видеть от вас уведомления.
Как правило, всегда банится домен верхнего уровня. Поэтому вам будет сложно отправить письмо даже с личной рабочей почты, не говоря уже о ящиках, созданных специально для рассылок.
Кнопка “Отписаться” не отписывает от всех рассылок
Вы наверняка видели в Настройках пользователя блок, в котором вам предлагают выбрать тип рассылок: финансовые, новостные, уведомления по услугам и уведомления центра поддержки.
Настройка уведомлений
То есть для каждого шаблона сообщения где-то указан определенный тип. Когда клиент в письме жмет кнопку "Отписаться", биллинг отписывает его только от одного типа рассылок.
Ссылка для отписки от рассылок во всех шаблонах одинаковая: <%= billurl %>?func=unsubscribe&cmdhash=<%= cmdhash %>. Но по факту она отписывает клиента только от определенного типа уведомлений. Невозможно одной кнопкой отписаться сразу ото всех писем провайдера.
Например, клиент получил письмо “Вам выставлен счет”, это финансовое уведомление. Нажав “Отписаться”, он отпишется лишь от финансовых рассылок, но продолжит получать письма от техподдержки, уведомления об услугах и пр.
Как это можно подать клиенту? В разных письмах мы пишем разный сопроводительный текст к ссылке отписки. В письме об услугах говорим, что можно отписаться от уведомлений услуг, а в письме от техподдержки — от ответов техподдержки. Когда после отписки от одного типа уведомлений клиент получает от нас письмо другого типа, он уже предупрежден и не злится. Если нужно, отписывается еще раз.
Уведомления, от которых невозможно отписаться
Вопрос: к какому типу уведомлений отнести сообщение “О восстановлении пароля”? А письмо “О подтверждении почты”? В BILLmanager есть такие шаблоны, от которых невозможно отписаться. Вот несколько примеров:
- регистрация клиента,
- подтверждение email,
- пароль успешно изменен,
- активация плательщика,
- другие системные уведомления.
Эти уведомления важны для нормальной работы системы и взаимодействия провайдера с клиентом. Поэтому от них нельзя отписаться, и если в них добавить ссылку отписки, то письмо отправится с ошибкой. Будьте внимательны и не добавляйте ссылку отписки во все шаблоны.
Когда cmdhash в ссылке отписки не определен
С отпиской есть еще один нюанс. Письмо шаблона "Об открытии услуг" не только отправляется клиенту, но еще хранится в BILLmanager и при нажатии на кнопку Инструкция открывается в интерфейсе биллинга.
Если не изменить шаблон, письмо в интерфейсе будет ломаться. Дело в ссылке отписки. Когда мы открываем это письмо как Инструкцию, у него не определен параметр cmdhash. Поэтому в ссылку отписки шаблона “Об открытии услуги” надо прописывать дополнительное условие, которое будет скрывать ссылку отписки при просмотре письма в качестве Инструкции:
<% if (typeof cmdhash !== 'undefined') { %>
<a href="<%= billurl %>?func=unsubscribe&cmdhash=<%= cmdhash %>”>Отписаться</a>
<% } %>
Помощь пользователю при настройке шаблонов
Когда вы начнете создавать и редактировать шаблоны сообщений в BILLmanager, у вас наверняка будут возникать вопросы. Часть ответов вы найдете в новой документации, в разделе Система уведомлений, остальные вопросы задавайте в нашу первую линию или техподдержку.