Как создать красивые шаблоны для email-рассылки на 1С-Битрикс

Почтовые шаблоны Битрикс для рассылок – важный инструмент, который может оказывать прямое влияние на продажи. Однако стандартные решения Bitrix для создания и отправки писем — это примитивные шаблоны, отсутствие возможности кастомизации и красивых писем по триггерам. Но это лишь полбеды. Доступные для внесения данные заранее ограничены настройками пакетного инструмента Битрикс.

Всё это ощутимо связывает нам руки, если у нас, например, интернет-магазин, и мы хотим отправлять клиентам письма с подробными данными их заказов, добавлять в сообщения промокоды на скидку или расширять автописьма о регистрации подборкой акционных товаров. Предустановленные рассылки Битрикс этого просто не умеют.

А как в таком случае возможно использовать автоматические сервисные письма для увеличения продаж? Как вообще создавать современные, красивые письма с полнотой данных и дополнительными маркетинговыми инструментами, если у вас сайт на Битрикс? Есть ли альтернатива стандартному решению?

Есть. И даже не одна. Но и от этих вариантов можно ожидать весёленьких сюрпризов, которые бросаются на маркетолога, как чёрт из табакерки. Спокойно! Так бывает не всегда и не со всеми.

Для лучшего понимания темы давайте сперва разберёмся со способами реализации писем.

Как правило, генерируются встроенным решением CMS, на которой сделан сайт, — это самый простой способ реализации. Выглядит такое письмо, как отчаянная попытка вернуть 2007 год. Или даже 98-й.

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

Но так ли этот способ хорош, скажем, для автописьма с информацией о заказе? Судите сами:

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

Этим способом можно навести порядочек и сотворить любую красоту, как говорится, пусть расцветают все цветы. Но есть нюанс.

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

Так, СТОП! Но ведь именно этот способ используется в стандартном решении для писем в Битрикс!

Технически — этот, а визуально — добро пожаловать назад в 2009-й.

Да, письмо о заказе Битрикса — это не текст, а нормальный такой html: есть сетка, в которой размещается шапка, контент, футер. Просто результат, как будто это весточка от налоговой, а не обещание приятной посылки с косметосом ¯\_(ツ)_/¯

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

Спойлер: это тоже решаемо даже без скиллов. Подробности оставим на десерт.

Здесь, по сути, та же HTML-верстка, но она автоматизирована и не требует писать теги вручную: исполнитель берёт готовые компоненты из набора редактора и заполняет нужными данными.

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

К сожалению, тут тоже полная панамка проблем (извините, задач). О них далее и поговорим.

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

И для всего подбираются свои цвета, размеры, отступы. Осуществить это можно:

Углубимся в тему.

Сейчас многие обращаются к конструкторам писем HTML, которые позволяют легко создавать шаблоны без необходимости глубоких знаний в программировании. Например, такие сервисы, как Topol, Letteros, MakeMail и Chamaileon, предлагают удобные инструменты для создания и редактирования писем с помощью интерфейса Drag&Drop. Это значит, что можно быстро собрать письмо, добавив текст, изображения и кнопки, а затем сохранить готовый шаблон.

Полученный HTML-код можно использовать для массовых рассылок или адаптировать для разных кампаний, просто меняя контент. Главное преимущество этих сервисов – отсутствие необходимости в верстальщике: вы самостоятельно сможете подготовить профессиональное письмо с минимальными усилиями. Однако у каждого сервиса есть свои особенности, о которых стоит помнить.

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

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

Если кратко: страх и боль. Нередко даже для специалиста-верстальщика, а для рядового пользователя и подавно. Потому что необходимо разбираться в целом ряде нюансов вёрстки под разные почтовые программы: gmail, Apple mail, Яндекс почту, Outlook (не стоит списывать его со счетов).

Может показаться, экая ерунда: разок выучил каждую почтовую программу и всё. Но на практике, здесь всё так же, как и в вёрстке сайта, в которой львиную долю времени занимает заточка под разные браузеры.

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

К этому способу прибегают, когда задачи шире предлагаемого конструктором функционала. Или нужно большое количество шаблонов, ещё и с сильно отличающимся оформлением.

Частично облегчить задачу создания шаблона для рассылок могут библиотеки, например, zurb.com или github.com/mailchimp/Email-Blueprints (их гораздо больше, это лишь популярные примеры). Но и они не сделают даже половину работы за верстальщика, хотя и помогут сэкономить время на рутине.

Если вы хотели услышать ответ «рассылать по почтовым ящикам», то вынуждена вас огорчить. Как было сказано выше, это не совсем готовое решение, и необходим ещё ряд операций.

Дело в том, что ваши стили оформления находятся внутри шаблона, который вы создали, в теле <style>. Но когда произойдёт отправка письма, почтовый клиент получателя очистит стили, и пользователь увидит вместо вот этого 👇 стройного красавца…

…его несуразного брата-близнеца, который и не брат ему вовсе:

Почему так происходит, точно неизвестно. Возможно, из-за неких мер безопасности, а может, из-за несовершенства почтовых клиентов. Но стили будут удалены. А Outlook вообще красавчик, он ещё и добавит новых стилей от себя 😎

Справиться с этим призван так называемый инлайнер. Этот инструмент запускает процесс, который преобразует готовый шаблон так, что стили каждого элемента будут записаны в соответствующий элементу атрибут style html-тега. После такой манипуляции почтовые клиенты уже не удалят стили – они будут отправляться через любой клиент одинаково (но для подстраховки это всегда лучше проверить на тестовой рассылке).

Примеры удачных инлайнеров:

1. Уведомления от сайта

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

Здорово, когда вместо безликого уведомления с неопрятным полотном текста приходит красиво оформленное сообщение. И как только компания разрастается, и появляется какой-то бюджет на email-маркетинг, уведомления стараются оформлять в фирменном стиле — это отличный приём для повышения узнаваемости компании.

Здесь и пригодится готовый шаблон, который рассылается через путь 1С-Битрикс – «Тема оформления». Шаблон делится на 3 компонента: основное тело письма, шапку и подвал. Последние сохраняются в теме оформления. А вот основное тело помещают в шаблон почтового уведомления.

А что потом? Если захочется поменять что-то (наверняка захочется, и не раз)? Даже цвет фона. Или вы вдруг задумаетесь: как добавить поля? Любое действие займёт много времени и сил. Как это оптимизировать, расскажу ниже через скролл.

2. Красивая рассылка по готовой базе

Если рассылка уже готова и не нуждается в редактировании, всё сравнительно просто: полученный после этапа с использованием инлайнера шаблон письма можно вставить в пустой шаблон и настроить рассылку по адресам.

Но если надо что-то отредактировать (что требуется нередко), возникает ряд сложностей, которые будут требовать от специалиста трудозатрат. А нам надо без заморочек, пожалуйста.

Переходим к универсальному решению, которое сэкономит вам время и деньги.

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

Эта задача должна решаться проще и практичнее. Поэтому наши разработчики создали специальный модуль рассылки «Шаблоникс», который полностью закрывает задачу по созданию красивых и информативных сервисных писем для сайтов на Битрикс.

1. При использовании встроенного инструмента Битрикс, сервисные письма получаются унылыми и примитивными. Пользователи плохо читают их, ведь важная информация просто теряется в простыне текста.

Решение

Быстро и легко собрать письма получится прямо в админке Битрикс, как будто вы это делаете в специализированном сервисе-конструкторе: по блокам, гармонично и удобно для восприятия. Результат: выделенные заголовки, заказ оформлен в наглядную таблицу, а стиль и цвета соответствуют брендбуку компании. При этом стили html не слетят стараниями почтовых клиентов.

2. При сборке письма стандартными инструментами Битрикс, вы получаете на выходе крайне скудный набор информации о составе заказа, статусе оплаты, покупателе, условиях доставки и пр.

Решение

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

3. Нет инструментов для апсейла. Стандартные письма Битрикс — это просто сервисные письма, которые содержат минимум информации, всё строго по делу, в них нет никаких дополнительных инструментов для увеличения продаж.

Решение

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

Шаблоникс делает то, что предустановленные рассылки Битрикс просто не умеют.

Модуль содержит как готовые решения, так и возможность кастомизации по целому ряду параметров.

При всей функциональности, он имеет предельно простой, интуитивно понятный интерфейс. Поэтому работать с ним может каждый, любой и всякий 🙂

Ещё больше узнать о «Шаблониксе» для красивых расширенных писем и его настройках вы можете здесь.

Можно и дальше подробно рассказывать о силе модуля. Но пора переходить к практике и протестировать все возможности самостоятельно: мы предоставляем бесплатный демо-доступ к модулю на 7 дней. Сделать это можно на маркетплейсе 1C-Bitrix.

С какими нюансами вёрстки писем сталкивались вы? О чём я недальновидно забыла упомянуть? Ругайте и хвалите в комментариях.