Шаблоны транзакционной электронной почты с открытым исходным кодом

При настройке новой учетной записи SendGrid одной из самых важных задач является создание набора шаблонов электронной почты для вашей учетной записи. Если вы планируете отправлять электронную почту через наш API для своего приложения или службы, вам, скорее всего, понадобится несколько различных типов шаблонов электронной почты. Некоторыми из наиболее распространенных являются сброс пароля, подтверждение по электронной почте и квитанции.

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

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

Я понял, что команда SendGrid может принести пользу нашим клиентам, создав набор шаблонов электронной почты с открытым исходным кодом, которые пользователи могли бы использовать для решения этих распространенных задач. Мало того, что шаблоны легко настроить, вы будете быстро готовы к отправке!

Наш набор шаблонов, который мы называем «Вставить», охватывает 5 вариантов использования:

• Сброс пароля
• Подтверждение электронной почты
• Приветственные письма
• Квитанции
• Дайджесты (ежедневные, еженедельные или ежемесячные)

Скачать шаблоны на GitHub

Чтобы начать работу с нашими шаблонами Paste, перейдите на GitHub и клонируйте репозиторий или загрузите папку шаблонов Paste. Также стоит упомянуть, что эти шаблоны находятся в репозитории шаблонов электронной почты с открытым исходным кодом, в создании которого участвовали другие пользователи SendGrid во время нашего последнего Hacktoberfest.

Настройка шаблонов вставки

Получив локальную копию шаблонов Paste, откройте их в предпочитаемом вами редакторе кода (я бы рекомендовал VSCode или Atom; оба они бесплатны).

Я бы рекомендовал начать с base.html, так как он содержит большинство повторно используемых компонентов, которые можно найти во многих других шаблонах. Все эти шаблоны имеют общую структуру HTML, и, хотя в документе есть несколько базовых стилей, большинство из них встроены.

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

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

Добавьте свой логотип в шаблоны

Первое, что вам нужно сделать, это заменить логотип Paste templates на свой собственный. Вы можете быстро найти блок логотипа, выполнив поиск его HTML-комментария, указывающего его начальное место:

В этом блоке вам нужно найти тег привязки (<a> ) и изменить HREF на ваш URL. Шаблон должен быть связан с домашней страницей SendGrid по умолчанию.

После настройки URL-адреса давайте заменим логотип Paste на ваш собственный. Я бы порекомендовал хранить ваш логотип где-то, на что вы можете легко ссылаться, например, на ваш веб-сервер или CDN. После того, как вы заменили логотип src, настройте встроенные стили, чтобы ширина/высота были правильными — это будет зависеть от соотношения сторон вашего логотипа. По умолчанию логотип Paste имеет квадрат размером 48 пикселей, поэтому мы установили стили ширины на 48 пикселей.

Пример:

В этом примере URL-адрес логотипа «Вставить» упоминается вместе с некоторыми стилями ширины, чтобы установить желаемый размер 48 пикселей. Отрегулируйте эти значения для вашего собственного логотипа, чтобы он выглядел четким.

Настройка цветов фона

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

Самый простой способ переключаться между этими стилями — использовать редактор для поиска встроенных стилей, цвета фона и цвета фона. Значение этих свойств можно заменить шестнадцатеричными значениями (например, #000000) или названиями цветов (например, черным). Когда вы работаете с этими изменениями, легко следить за вещами, если вы открываете один из шаблонов в предпочитаемом вами браузере и обновляете его по мере внесения изменений.

Пример:

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

Настройка кнопок

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

По умолчанию кнопки Paste оформлены в виде синих блоков с тонким радиусом границы для закругления углов. Настройка этих кнопок в соответствии с вашим брендом аналогична изменениям, которые мы уже внесли в цвет фона нашего шаблона. Найдите блок, используя HTML-комментарий, который мы добавили для вас:

У нас есть несколько ячеек таблицы с белым фоном (#ffffff) для создания блока вокруг кнопки, но вы захотите найти ячейку таблицы со следующими стилями ниже.

Пример:

В этом примере <td> имеет bgcolor, который используется для установки цвета кнопки, а также радиус границы для тонкого закругления углов. Поэкспериментируйте с этими стилями, чтобы добиться уникального внешнего вида кнопок, соответствующего вашему бренду.

Вторая часть нашей кнопки — это якорь (<a> ) в ячейке таблицы, показанной выше.

Этот якорь управляет URL-адресом, на который будет переходить ваша кнопка при нажатии, а также стилями текста для метки. Вы можете настроить стили, чтобы настроить ярлык на основе ваших предпочтений и того, что соответствует вашему бренду.

Настройка типографики

По умолчанию шаблоны вставки загружаются в веб-шрифт Source Sans Pro через Google Fonts. Вы можете использовать другой веб-шрифт из коллекции Google или использовать стандартный набор шрифтов, который можно найти на большинстве современных компьютеров (Arial, Georgia, Times и т. д.).

Если вы планируете использовать другой веб-шрифт, ознакомьтесь с моими советами и рекомендациями по разработке электронной почты, чтобы найти несколько полезных советов. Убедитесь, что вы просматриваете HTML для любых встроенных стилей, которые ссылаются на семейство шрифтов, и настройте их в соответствии с вашими предпочтениями.

Пример:

В этом примере <td> имеет стиль семейства шрифтов, настроенный на использование Source Sans Pro, с некоторыми откатами к более стандартным шрифтам в случае, если веб-шрифт не загружается.

Конечные мысли

Я надеюсь, что эти указатели помогут вам настроить эти шаблоны в соответствии с вашим брендом и помогут вам начать работу на платформе SendGrid. В будущем я надеюсь расширить наш репозиторий шаблонов электронной почты большим количеством шаблонов, а также инструментом сборки, который значительно ускорит процесс настройки.

Если вы столкнетесь с какими-либо проблемами по пути, отправьте сообщение о проблеме в репозиторий GitHub, а если вы хотите внести свой вклад, отправьте запрос на включение. Ищете другие шаблоны для экспериментов? Попробуйте бесплатные адаптивные HTML-шаблоны электронной почты SendGrid.