retailCRM Документация

Работа со Stripo

Конструктор писем Stripo позволяет создавать адаптивные шаблоны писем без знаний HTML при помощи визуального блочного редактора и интуитивно понятных инструментов.

Stripo активируется как дополнение к пакету «Маркетинг». На данный момент доступен для работы только в маркетинговых рассылках, поэтому использовать его можно, приобретая маркетинг с полным функционалом или пакет «Сегментация + рассылки».

Управлять включением редактора Stripo можно в категории Администрирование > Настройки > Почта > Исходящая > Маркетинговые рассылки.

После активации, при создании шаблона письма, Вы увидите кнопку «Конструктор писем», при нажатии на которую перейдете в сам визуальный редактор.

Важно! Шаблон, созданный при помощи html или визуального редактора системы, не доступен для изменения при помощи Stripo.

Для редактирования такого шаблона будет доступен тот редактор, в котором данный шаблон был создан. Также возможно пересоздать шаблон, используя редактор Stripo.

Настройки в Stripo

Контент

Структуры

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

Блоки

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

Модули

Раздел «Модули» используется для сохранения в свою личную библиотеку контента всех видов для дальнейшего использования.

С нашей стороны представлен готовый модуль «Футер», который содержит ссылку на отписку от рассылки и находится во вкладке «Common».

Во вкладке «CRM» могут храниться сохраненные Вами модули, которые Вы можете использовать для дальнейших рассылок.

Система предложит дать название сохраняемому элементу на панели настроек для удобного поиска.

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

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

Оформление

Общие настройки

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

Ширина письма устанавливается в 600 пикселей по умолчанию – это самый распространенный размер.

Отступы - настраиваются внешние отступы контента от границы письма. Расстояние указывается в пикселях.

Примечание: отступы будут применены только к новым структурам, добавленным в письмо с вкладки Контент, или после добавления новых полос.

Цвет фона письма — применяется ко всему пространству письма. Если сообщение открыто на десктопе, фон занимает всю площадь письма, тогда как на мобильных экранах он скрыт.

Цвет фона контента – цвет внутри письма, который применяется для всех контейнеров с карточками товаров, контактной информацией и т.д.

Адaптировать для Gmail App - адаптирует шаблон письма под разные версии Gmail App.

Примечание: Gmail App под Android имеет встроенную функцию по адаптированию писем для мобильных устройств, но разные версии приложения показывают разные результаты с одним и тем же письмом.

Если какой-то из стилей, которые вы примените к отдельно взятой строке/контейнеру/блоку, будет отличаться от стилей, настроенных в разделе «Общие настройки», то он будет иметь приоритет над общим стилем.

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

Заголовки

Общие настройки применяются только к основному тексту вашего шаблона писем.

Блок «Заголовки» используется для настройки шрифта заголовка, его размера и стиля.

Хедер

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

Рассмотрим, как добавить логотип в хедер Вашего шаблона письма.

Для добавления необходимо пошагово выполнить следующие действия:

Альтернативный текст необходим в следующих случаях:

Рассмотрим, как добавить меню в хедер Вашего шаблона письма.

Для добавления необходимо пошагово выполнить следующие действия:

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

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

При необходимости Вы можете скрыть некоторые элементы для мобильных, просто нажмите значок «Скрыть на мобильном».

Футер

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

Кнопка

Кнопка является красиво оформленной URL-ссылкой. Она должна быть хорошо заметной, а текст – лаконичным.

Адаптивность

В разделе «Адаптивность» задаются параметры для размера заголовков, текста кнопок и контента в разных контейнерах.

Обратите внимание, что настройки адаптивности будут срабатывать только в мобильной версии письма в почтовых программах, поддерживающих медиа стили.

Работа с контентом

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

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

1 иконка (стрелка назад) - отмена предыдущего действия или несколько действий.

Данная функция избавляет от необходимости создавать шаблон с нуля в том случае, если Вам не понравятся последние изменения, внесенные в письмо.

2 иконка (стрелка вперед) - возврат отмененного действия.

3 иконка (исходный код) позволяет увидеть исходный код письма и, при необходимости, внести изменения непосредственно через код.

Работа с ссылками и кнопками

Добавление ссылок в текст письма

Для добавления ссылки в тело письма необходимо выделить необходимый текст и кликнуть по кнопке «Сделать ссылкой» в панели инструментов, которая располагается в верхней области.

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

При нажатии на ссылку отобразятся дополнительные поля: «Ссылка» и «Название». В поле «Ссылка» необходимо указать URL-адрес.

Разрешить перенос строк

Перенос строк осуществляется посимвольно, чтобы текст поместился в заданную ширину блока. Значение не работает для текста на китайском, корейском или японском языке.

Добавление кнопок CTA

Кнопка, по сути, является красиво оформленной URL-ссылкой.

Рассмотрим, как добавить кнопку в шаблон письма:

Вставьте блок «Кнопка» в шаблон рядом с элементом, с которым она связана.

Нажмите на блок кнопки в шаблоне, чтобы активировать панель настроек. Вставьте соответствующую URL-ссылку и введите текст для кнопки.

Настройте стиль текста – шрифт, тип и размер. Установите цвет кнопки и шрифта.

При необходимости Вы можете применить ховер-эффект при наведении на кнопку.

Примечание: если ховер-эффект отсутствует на панели настроек, его необходимо активировать по пути Оформление > Кнопка > настройка «Подсвечивать по наведению».

Также в настройках элемента возможно установить закругление, выравнивание, внутреннюю и внешнюю границы.

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

Добавление изображений

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

Добавление изображения в шаблон письма

Для добавления нового изображения необходимо добавить новую структуру с нужным количеством колонок в ваш шаблон.

Примечание: если вам нужно создать баннер – используйте блок «Баннер». Для других целей используйте «Изображение».

Добавить изображение можно двумя способами:

1. Вы можете перетащить изображение, которое собираетесь использовать, либо загрузить его со своего компьютера, кликнув по значку со стрелкой и выбрав изображение на компьютере.

2. Добавить ссылку на внешний ресурс при помощи поля «Ссылка на внешний ресурс», где нужно вставить ссылку вашего изображения.

Помимо добавления изображения, есть возможность их редактировать.

После загрузки изображения нажмите кнопку «Редактировать» на панели настроек справа от фрагмента изображения.

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

Когда вы завершите редактирование, нажмите «Сохранить» в редакторе Pixie – и только тогда изменения, которые вы внесли в изображение, будут применены к нему.

После нажатия на «Сохранить», данное изображение сохранится в хранилище изображений и его можно будет использовать в дальнейшем.

Добавление баннера в шаблон письма

Stripo предлагает генератор баннеров, который позволяет пользователям создавать сложные баннеры непосредственно в редакторе без каких-либо сторонних инструментов.

Рассмотрим, как добавить баннер в шаблон:

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

Не забудьте вставьте ссылку, которая приведет получателей на необходимую Вам страницу.

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

Примечание: Вы можете активировать функцию «дополнительная картинка» на панели настроек. Это может быть что угодно: стикер, рамка, логотип, фон, чтобы сделать ваш текст более заметным.

Когда баннер добавлен, Вы можете выполнять все этапы редактирования в любом порядке.

Эффект ролловера изображений

Эффект ролловера в Stripo - смена одного изображения на другое при наведении на него курсора мыши.

Данная функция сэкономит драгоценное место в письмах, поскольку вы можете скрыть детали продукта, например, под фото.

Важно! Эффект ролловера работает на десктопных устройствах. Остальные пользователи увидят только основное изображение.

Указанный эффект можно применить к любому изображению, которое вы добавляете в шаблон, кроме баннера.

Рассмотрим, как создать описанный выше эффект:

Добавление видео в шаблон письма

В Stripo доступно два метода добавления видео в шаблон:

  1. Вставить URL-ссылку на ваше видео;
  2. Встроить видео.

Метод 1. URL-ссылка на видео

Указанный метод идеально работает во всех почтовиках и ​​на всех устройствах.

Для вставки URL-ссылки на ваше видео необходимо:

Миниатюра/изображение превью ваших видео подставляется автоматически. Но вы также можете установить его самостоятельно.

Метод 2. Встроить видео

Встроенное видео воспроизводится непосредственно в письмах. Получателям не нужно переходить на другой сайт для просмотра.

Воспроизведение доступно не во всех почтовиках. Фактически этот тип контента поддерживают только Apple Mail, нативная почта iOS, Thunderbird и Outlook для Mac.

Встраиваемое видео добавляется при помощи HTML.

Для того, чтобы встроить этот код в шаблон письма, необходимо создать структуру с 1 колонкой и добавить в нее блок типа HTML.

Далее, кликните левой кнопкой мыши «Вставьте свой HTML в редактор кода» в шаблоне, чтобы открыть редактор кода. Добавьте сам код:

<video class="adapt-img" controls="controls" poster="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/92621531318217276.jpg" width="100%" height="313">

<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

<source src="http://www.w3schools.com/html/mov_bbb.webm" type="video/webm">

<!-- fallback -->

<a href="https://www.youtube.com/watch?v=ryqOEPk51Lg/" class="esd-frame-element esd-hover-element esdev-disable-select"><img class="adapt-img" src="https://tlr.stripocdn.email/content/guids/CABINET_0bd21bea47f1cfb916fb84d59a107495/images/48461531318273724.jpg" alt="" width="100%" height="313"></a>

</video>

Часть кода до слова fallback предназначена для тех получателей, чьи устройства и почтовики поддерживают эту интерактивность. Тогда как часть ниже — для тех, чьи клиенты не поддерживают ее. Они будут перенаправлены на Youtube, Vimeo или любой другой видеохостинг.

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

Настройка кода встраивания:

Видео MP4 генерирует свое собственное уменьшенное изображение, но оно не отображается на iPhone X и устройствах с дисплеями Retina. Кнопка воспроизведения появится на нем автоматически. Вставьте эту ссылку после атрибута «Poster».

Создание модулей контента товаров

Модуль достаточно сложный, так как содержит целый ряд блоков и элементов.

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

Рассмотрим, как создать модуль с товарами:

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

Добавление таймера обратного отсчета

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

Таймер создается и настраивается непосредственно в редакторе.

Рассмотрим, как добавить таймер в шаблон письма:

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

Не забудьте указать URL-адрес для таймера, кликнув по которому клиенты перейдут на необходимую Вам страницу. Указанная ссылка будет также применена к картинке, которая отобразится по окончанию таймера.

Добавление разделителя

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

Рассмотрим, как добавить разделитель в шаблон письма:

Включите кнопку «Адаптивный разделитель», чтобы он правильно отображался на мобильных устройствах;

Добавление ссылок на социальные сети

Значки соцсетей, или иконки, могут быть расположены где угодно: в меню, футере или где-то в центре письма.

Рассмотрим, как добавить иконки на социальные сети:

Для начала добавьте базовый блок «Соц. сети» в шаблон письма.

Дважды кликните по добавленному блоку в шаблоне, чтобы активировать панель настроек:

Отписка

Пользователи всегда должны иметь возможность в любой момент отписаться от вашей рассылки. Кнопка отписки должна быть работоспособной и заметной. Разместите кнопку отписки в каждом письме. Кнопку отписки можно разместить двумя способами:

1. Использовать готовый модуль «Unsubscribe» в Stripo, который вставит текст «Отписаться от рассылки» в Ваше письмо с уже указанной ссылкой на отписку. Текст можно изменить, но, главное, случайно не удалите тег <unsubscribe>.

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

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

Персонализация

При помощи персонализации возможно выводить информацию о клиенте, которая отразится в основном содержании Вашего письма. Для персонализации используются Twig-шаблоны.

Например:

<p>Уважаемый(ая) {{ customer.firstName }}, </p>

<p>Ваш заказ №{{ customer.lastOrder }} подтверждён. Заявка поступила в обработку на склад.</p>

Для использования персонализации необходимо кликнуть по текстовому полю в теле письма. В верхней части редактора появится область редактирования текста, в правой части которого будет отображаться блок «Персонализация».

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


Редакция от 12.09.2019 13:03