Встречается кейс с необходимостью особенной верстки письма (фирменное оформление писем: добавить логотип, кнопки, гифку).
Стандартный блок Email в бизнес-процессах на данный момент не имеет функционала для верстки письма. Есть только вариант встроить верстку в тело стандартного блока Письма в бизнес процессе, который принимает только html, без тега <style>. То есть поддерживаются только инлайновые стили.
Скрипты, соответственно, также не поддерживаются. Если что-то необходимо подготовить, то записываем все в переменные и используем их в разметке:
HTML:
<tbody>
<tr>
<td align="left" valign="top">
{$wrapper} -
</td>
</tr>
</tbody>
В wrapper содержится подготовленный блок, причем, с разметкой. Например, это может быть абзац:
Context.data.wrapper = “<p>test</p>”
Либо это может быть уже сгенерированная верстка, и мы только включаем ее в какой-то блок таблицы.
Кстати о таблицах. Некоторые почтовые сервисы много чего не поддерживают, и поэтому следует сразу верстать в таблицах. Больше всего проблем вызывает Outlook, он по-своему рендерит письма. У него большое количество ограничений, которые ломают все верстку.
Для Outlook есть специальный синтаксис: см. https://buttons.cm/.
На этом сайте можно настроить верстку кнопок специально для Outlook. Код для кнопки будет выглядеть следующим образом:
HTML:
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" stroke="f" fillcolor="#556270">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#556270;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Show me the button!</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
Выравнивание
В Outlook не работают margin, поэтому если у вас все отступы основаны на них, то для outlook нужно переделать, изменив границы самой ячейки.
На StackOverflow есть небольшой ответ по этой теме: https://stackoverflow.com/questions/20347803/html-margins-not-supported-in-outlook
Также стоит помнить про выравнивание в таблицах: https://www.geeksforgeeks.org/html-table-align-attribute/
Обычный вариант с <div>, display: flex; может сработать, но опять же в Outlook большая часть подобного синтаксиса не поддерживается.
Картинки
Если у вас нет возможности разместить где-то все ваши картинки, чтобы получить ссылки на них в письме, есть альтернативный вариант с base64. В Сети множество конвертеров. Однако, если у вас какое-то динамическое добавление картинок не файлом (а отображение в теле письма), то понадобится некая интеграция с конвертерами, либо можно конвертировать самим:
https://stackoverflow.com/questions...-an-image-into-base64-string-using-javascript
Множество писем
Если вам нужно отправлять за раз множество писем или даже объединять письма, то их можно разбивать на функциональные части (аналогично полям приложения в системе ELMA365). Так, в одном из проектов нам удалось собрать тело письма в процессе, где просто текстовым переменным были присвоены header, body, title, адреса, footer. Все это сохранялось как элемент другого приложения. А дальше происходил парсинг: каждый день, в 10 утра скрипт автоматически собирал все письма для одного человека и отправлял их скопом, разделяя тела писем линиями, а в конце общий футер.
Последнее редактирование: 18 окт 2022
