Красивое HTML-письмо клиенту из бизнес-процесса

Хочется, чтобы автоматические письма были не только вовремя, но и красивые. Благо Битрикс позволяет вставлять html-письма в действие БП. Сегодня расскажу как оформила красивое письмо в ответ на прохождение Квиза на главной странице сайта.

Для начала квиз попадает в смарт-процесс, где и настроена отправка письма. В элемент смарт-процесса попадают все заполненные данные, а также сумма автоматизации, рассчитанная на основе ответов пользователя.

Формирование письма

Создание письма в стороннем сервисе

В интернете много онлайн-редакторов писем. Я воспользовалась этим.

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

Регистрируемся и видим, что есть уже множество подготовленных шаблонов на разную тему и отрасли. Можем воспользоваться одним из них, модифицируя под себя, а можем создать с нуля.

Я создала с нуля. Мои шаблоны —> + Новый шаблон.

Здесь такой же конструктор как и при создании сайтов на битрикс, ничего сверхнового или сложного.

Добавляете картинки, текст и другие необходимые блоки.

В текст вставляете поля и переменные из бизнес-процесса.

Когда письмо готово, нажмите Экспорт и выберите формат. Нам понадобится HTML-файл.

Открываем файл, например с помощью Notepad++, и копируем код. Там же можно изменить переменные и текст при необходимости.

Переходим к бизнес-процессу.

Создание письма в шаблонах Битрикса

В битриксе также можно создать шаблоны писем. Для этого перейдите Маркетинг —> Мои шаблоны —> Создать шаблон.

Выбираете любой готовый и редактируете под себя. Когда шаблон будет готов, скопируйте код:

Настройка отправки письма

В дизайнере бизнес-процессов

В смарт-процессе включены роботы. Заходим в роботы.

Выбираем нужный статус и настраиваем бизнес-процесс.

У меня в квизе в зависимости от способа связи, который выбрал пользователь, сообщение уходит в WhatsApp, Telegram или на почту. В данном случае рассматриваем письмо.

Выбираем действие Отправить письмо. Выбираем от кого отправлять, пишем тему письма, а в текст вставляем код из нашего файла или скопированный в шаблоне битрикса.

В роботах

Если бизнес-процессов на тарифе нет, то можно обойтись роботом. Переходим в автоматизацию сделок и добавляем робота в нужной стадии.

Выбираем режим редактирования исходного кода на панели форматирования и вставляем код.

Для просмотра можно перейти в визуальный режим.

Сохраняем.

Результат

В результате при выполнении бизнес-процесса в карточке элемента смарт-процесса в ленте справа появляется Исходящее письмо.

Открыв его, увидим, что оно именно в том виде, что я собрала в конструкторе.

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