Настройка AMP-карусели
Один из самых простых и популярных элементов интерактивности в письмах - карусель изображений. Добавить её в редакторе eSputnik достаточно просто как с помощью встроенных блоков, так и сторонних сервисов.
Важно! Чтобы при отправке рассылки AMP-карусель отображалась у получателей - подайте заявку на подтверждение отправителя.
Создание AMP HTML-карусели
Для создания AMP-карусели необходимо зайти в редактирование любого письма:
-
Зайдите в раздел Блоки
-
Перетащите блок AMP-карусели в HTML-шаблон, с которым вы работаете;
Этот блок по умолчанию будет со значком “⚡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-окно
-
Cкопируйте HTML из Freshinbox
-
Вставьте скопированный код в HTML-часть
-
Скопируйте CSS из Freshinbox
-
В редакторе eSputnik откройте вкладку CSS и вставьте скопированный CSS в конец кода
-
Нажимаем ещё раз на иконку, чтобы закрыть редактор кода.
-
Кликните на добавленную карусель и в открывшейся панели настроек в строке “Включать” выберите вариант HTML.
Чтобы проверить как работают оба блока, нажмите на предпросмотр:
И переключайтесь между версиями
Bажно!
-
После того, как вы нажмете “Включать в HTML”, выбранный элемент будет отображаться во всех почтовиках, которые поддерживают только традиционный протокол HTML-mime.
-
Опция “Включать в AMPHTML” (⚡HTML), позволяет показывать элемент в почтовых клиентах, которые поддерживают MIME-type AMPHTML (text-x-amphtml).
-
Если же для элемента ничего не выбрано, то он будет отображаться на всех устройствах и во всех почтовиках.
-
Если почтовый клиент не поддерживает выбранный вами вид интерактивности, получатель увидит только первое изображение.
И ещё несколько нюансов:
-
Вместо интерактивной HTML-карусели можно добавить обычную карточку товара и для неё включите показывать HTML. Благодаря этому ваша карточка товаров будет отображаться только в тех почтовиках и на тех устройствах, которые не поддерживают AMP.
-
Редактирование картинок в карусели можно выполнить через фоторедактор, как и для обычных изображений:
-
добавить текст
-
изменить размеры
-
добавить кнопку и т.д.
-
