...

Особенности верстки для блока email в бизнес-процессах

Тема в разделе "Примеры решений и дополнительных модулей", создана пользователем fedorova, 11 фев 2022.

  1. fedorova

    fedorova Участник

    Встречается кейс с необходимостью особенной верстки письма (фирменное оформление писем: добавить логотип, кнопки, гифку).
    Стандартный блок 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