Настройка AMP-карусели

Один из самых простых и популярных элементов интерактивности в письмах - карусель изображений. Добавить её в редакторе eSputnik достаточно просто как с помощью встроенных блоков, так и сторонних сервисов.

Важно! Чтобы при отправке рассылки AMP-карусель отображалась у получателей - подайте заявку на подтверждение отправителя.


Создание AMP HTML-карусели

Для создания AMP-карусели необходимо зайти в редактирование любого письма:

  1. Зайдите в раздел Блоки

 

Добавление блока AMP-карусель




 
  1. Перетащите блок AMP-карусели в HTML-шаблон, с которым вы работаете;

 

Добавление AMP-карусели

 

Этот блок по умолчанию будет со значком “⚡HTML”, так как этот элемент будет отображаться только в AMP-письмах, в почтовиках, которые поддерживают эту технологию (Gmail, Mail.ru). В остальных почтовых клиентах этот блок будет скрыт, для них мы позже в настройках зададим альтернативную версию.

 

3. Задайте параметры самому блоку AMPHTML. Для этого: 

 
  • Кликните дважды по блоку для запуска панели настроек;

Настройка параметров блока

  • Переключите бегунок “Показывать превью”, чтобы в предпросмотре письма отображались миниатюры всех изображений;

Отображение превью в карусели

 
  • Укажите ширину для предпросмотра этих изображений;

Настройки ширины картинок

  • Добавить первый слайд, кликнув на значок загрузки;

Загрузка картинок в письмо

Выбор картинок в редакторе

  • Задайте Альт-текст;

 

Альтернативный текст к картинке

 
  • Добавьте соответствующую ссылку;

 

Ссылки к картинке

 

Чтобы создать остальные слайды карусели, нажмите “Добавить слайд” и повторите все те же действия с загрузкой других картинок. Количество используемых слайдов не ограничено.

Добавить ещё один слайд

 

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

 

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

 

Редактирование изображений в письме

 

Создание HTML-блока для других получателей

 

Пользователи Gmail или Mail.ru увидят AMP-блок, а как быть с остальными? Создадим запасной HTML блок, который покажется в случае, если “⚡HTML” не поддерживается.

 

Вариант 1: Интерактивная карусель с помощью FreshInbox

 

Поддерживается только устройствами Apple и почтовиком Yahoo! Mail.

  • Заходим в Freshinbox и задаём свои картинки, добавляя ссылки на них

 

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

 
  • Минимальное количество картинок в карусели три, но можно добавить дополнительные, нажав на кнопку “More images”

Добавление слайдов в карусель

 
  • Задайте необходимые размеры этому блоку. Адаптивность здесь включена по умолчанию.

 

 
  • Протестировать элемент можно отправив на свой емейл-адрес

 

 

Перенос блока в eSputnik

 
  • Добавьте в вашем письме блок HTML

Добавление HTML-карусели

 
  • Нажмите на редактор кода, чтобы открылось HTML-окно

 

Редактор кода в eSputnik

 
  • Cкопируйте HTML из Freshinbox

Создание карусели в Freshinbox

  • Вставьте скопированный код в HTML-часть

Копирование карусели

 
  • Скопируйте CSS из Freshinbox

 

Перенос CSS-стилей

 
  • В редакторе eSputnik откройте вкладку CSS и вставьте скопированный CSS в конец кода

 

Заполнение CSS-стилей

  • Нажимаем ещё раз на иконку, чтобы закрыть редактор кода.

 

Работа с кодом

 
  • Кликните на добавленную карусель и в открывшейся панели настроек в строке “Включать” выберите вариант HTML.

 

Включение HTML-элементов

 

Чтобы проверить как работают оба блока, нажмите на предпросмотр:

Предпросмотр карусели в письмах


И переключайтесь между версиями

 

Превью карусели

 

Bажно! 

  • После того, как вы нажмете “Включать в HTML”, выбранный элемент будет отображаться во всех почтовиках, которые поддерживают только традиционный протокол HTML-mime. 

  • Опция “Включать в AMPHTML” (⚡HTML), позволяет показывать элемент в почтовых клиентах, которые поддерживают MIME-type AMPHTML (text-x-amphtml).

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

  • Если почтовый клиент не поддерживает выбранный вами вид интерактивности, получатель увидит только первое изображение.

 

И ещё несколько нюансов:

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

HTML элемент - карточка товаров

 
  • Редактирование картинок в карусели можно выполнить через фоторедактор, как и для обычных изображений:

    • добавить текст

    • изменить размеры

    • добавить кнопку и т.д.

 

Редактирование изображений в письме

Читайте так же "Как подать заявку для добавление в белый список отправителей AMP"