AMP в email-рассылках — это способ добавить в письмо интерактив: формы, карусели, смену контента без перехода на сайт. Однако, как и в случае с обычными html-письмами, здесь есть свои особенности отображения и поведения, которые важно учитывать при верстке и тестировании.

В этой статье разбираем 8 распространённых проблем, с которыми сталкиваются верстальщики при работе с AMP-письмами, — и показываем, как их решать на практике: с примерами, кодом и пояснениями.

## 1. Проблема AMP-карусели в Gmail на iOS

При использовании стандартного компонента ```<amp-carousel>``` в Gmail на iOS возникает неприятный баг — при переключении слайдов письмо резко прокручивается вверх. Проблема известна давно, но поведение так и не было исправлено.

**Решение:** Не использовать ```<amp-carousel>```, а реализовать его имитацию с помощью состояний (amp-bind). Ниже — рабочий пример:

```html
<amp-state id="carouselState">
  <script type="application/json">
    {
        "index": 0
    }
  </script>
</amp-state>

<style amp-custom>
  .carousel-wrapper {
    position: relative;
    width: 450px;
    height: 300px;
    overflow: hidden;
  }
  .carousel-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .slide-0 { transform: translateX(0%); }
  .slide-1 { transform: translateX(-100%); }
  .slide-2 { transform: translateX(-200%); }
  .carousel-slide {
    min-width: 100%;
    flex: 0 0 auto;
  }
</style>

<div class="carousel-wrapper">
  <div class="carousel-container" [class]="'carousel-container slide-' + carouselState.index">
    <amp-img src="https://amp.dev/static/inline-examples/images/image1.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image2.jpg" width="450" height="300" class="carousel-slide"></amp-img>
    <amp-img src="https://amp.dev/static/inline-examples/images/image3.jpg" width="450" height="300" class="carousel-slide"></amp-img>
  </div>
</div>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index - 1 + 3) % 3}})">
  Previous
</button>

<button on="tap:AMP.setState({carouselState: {index: (carouselState.index + 1) % 3}})">
  Next
</button>
```


## 2. Проблема начальных AMP-состояний в Mail.ru

Начальное состояние, заданное через ```<amp-state>```, не применяется при загрузке письма — оно подставляется только после действия пользователя (setState). Mail.ru же полностью игнорирует содержимое ```<amp-state>```. Рассмотрим на примере:

```html
<amp-state id="myItem">
  <script type="application/json">
    {
        "el":"some value"
    }
  </script>
</amp-state>
<span [text]="myItem.el"></span>
<button on="tap:AMP.setState({})">Кнопка</button>
```


При загрузке письма мы не увидим текста. В Gmail он появится только после клика на кнопку. Mail.ru же после клика на кнопку вместо текста отобразит null.

**Решение:**

**1.** Добавьте значение по умолчанию в HTML, чтобы текст отображался сразу.

```HTML
<span [text]="myItem.el">some value</span>
```

**2.** Для корректной работы в Mail.ru, нициализируйте состояние вручную по действию пользователя. Не используйте ```<amp-state>``` для начальной инициализации, а задайте значение через ```setState```: 

```HTML
<button on="tap:AMP.setState({ myItem: { el: 'some value' } })">
  Кнопка
</button>
<div [text]="myItem.el"></div>
```

## 3. Ограничение длины выражений в Mail.ru

Ещё одна особенность AMP в Mail.ru — ограничение на сложность/длину выражений, используемых в bind. Максимальный размер выражения — 100 единиц. Если выражение превышает этот лимит, Mail.ru выдаёт ошибку вида:

```JavaScript
amp-bind: Expression eval failed. Expression size (194) exceeds max (100). Please reduce number of operands.
```

С такой ошибкой мы столкнулись при [**разработке игры «Змейка» в AMP-письме**](https://pixcraft.io/ru/blog/zmejka-v-pisme-kak-my-s-altcraft-sozdali-igru-dlya-amp-rassylki): вычисления для движения и логики игры требовали выражений длиннее 100, что приводило к их блокировке на стороне Mail.ru.

**Решение:**

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

## 4. Переменные ESP и шаблоны AMP (конфликт синтаксиса)

Многие ESP (сервисы рассылок) позволяют вставлять переменные персонализации или условные конструкции в шаблон письма. Нередко синтаксис таких переменных пересекается с синтаксисом шаблонов AMP (amp-mustache), которые используют двойные фигурные скобки ```{{ }}```. Это приводит к тому, что платформа-рассыльщик «подменяет» или искажает AMP-шаблон, считая его своими переменными. В результате письмо может сломаться или вовсе не отправиться (если ESP сочтёт шаблон некорректным).

**Решения:**

[**Altcraft**](https://altcraft.com/ru): В Altcraft шаблоны тоже используют фигурные скобки, поэтому для обозначения AMP-шаблона нужно добавить префикс $. Например, вместо ```{{success}}``` пишем ```${{success}}```. Символ $ предотвратит интерпретацию платформой, и на выходе в отправленном письме останется чистый ```{{success}}``` для AMP. То есть Altcraft пропустит такой фрагмент, позволив AMP-механизму обработать его уже на стороне клиента.

Пример: 

```<template type="amp-mustache">$\{\{success\}\}</template>``` — Altcraft не тронет содержимое внутри ```$ {{ }}```, а AMP при отображении увидит стандартный ```{{success}}```.

**Mailganer:** В Mailganer для таких случаев предусмотрены специальные теги ```{% verbatim %} ... {% endverbatim %}```. Любой код, заключённый в ```{% verbatim %}```, платформа не будет менять. Поэтому AMP-шаблон можно обернуть этими тегами. 

**Пример:**

```HTML
 <template type="amp-mustache">
  {% verbatim %}{{success}}{% endverbatim %}
</template>
```

**Unisender:** В Unisender, наоборот, ничего дополнительно делать не нужно, так как внутри тега ```<template>``` платформа вообще не пытается подставлять свои переменные. Unisender по умолчанию игнорирует содержимое ```<template type="amp-mustache">```, полагая, что это для клиентской стороны. Это упрощает жизнь — можно прямо писать ```{{variable}}``` — но есть ограничение: вы не сможете вставить персонализацию внутрь ```amp-mustache```. 

## 5. Особенности работы тёмной темы в разных клиентах

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

**Разберем подробнее:**

**Mail.ru.** Не перекрашивает AMP-письма сам, но поддерживает кастомные стили для тёмной и светлой темы. Добавьте в ```<head>```:

```HTML
<meta name="supported-color-schemes" content="light dark">
```
В стилях используйте селекторы с префиксом:

```:root[data-ogsc]``` — для тёмной темы,
```:root:not([data-ogsc])``` — для светлой.

**Gmail на Android.** Перекрашивает светлые письма в тёмные автоматически.

**Gmail на iOS.** Не перекрашивает письмо и не даёт его кастомизировать. 

**Yahoo.** Поведение похоже на Gmail: на Android — автоинверсия, на iOS — письмо остаётся без изменений. 

## 6. Время жизни AMP-письма 

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

**Решения:**

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

## 7. Ограничение размера письма в Gmail 

В Gmail действуют два разных лимита на размер письма:

- HTML-часть: максимум 102 КБ. Если превышен, письмо обрезается, и Gmail показывает ссылку «Показать полностью». Это нарушит верстку и скроет часть контента.

- **AMP-часть:** максимум 200 КБ. Если превышен, AMP-версия просто не будет отображена — пользователь увидит HTML-версию.
<Img
img="/api/uploads/screely_1563350239721_5ab764f678.png"
alt="Показана часть сообщения"
/>

**Решения:**

- **Сжимайте код.** Удалите комментарии, пробелы, дублирующиеся стили. Используйте специальные инструменты (например, [**htmlminifier.com**](https://htmlminifier.com)).

- **Убирайте лишнее.** Сократите трекинг-ссылки, очистите шаблон от неиспользуемых элементов и скрытых блоков.

- **Оптимизируйте стили:** общие — в ```<style amp-custom>```, инлайн — только по необходимости.

## 8. Проблемы с аналитикой AMP-писем

AMP позволяет взаимодействовать с контентом прямо внутри письма — например, нажимать кнопки, заполнять формы или листать карусели — без переходов на сайт. Такие действия не фиксируются обычными трекерами, поскольку внутри AMP нельзя использовать JavaScript, а компонент ```<amp-analytics>``` не поддерживается в AMP для email. В результате клики и события остаются «невидимыми» для систем аналитики вроде Google Analytics, «Яндекс.Метрики» и большинства ESP.

**Решение:**

Для реализации такой аналитики можно использовать сервисы, поддерживающие сбор событий с помощью трекинг-пикселей. Один из надёжных вариантов — [**Pixcraft**](https://pixcraft.io), который предоставляет API для трекинга AMP-событий через обычные GET-запросы. 

## Заключение

При вёрстке AMP-писем важно учитывать, как они ведут себя в разных почтовых клиентах. Даже у таких крупных платформ, как Gmail и Mail.ru, поведение отличается: где-то ломается карусель, где-то игнорируются состояния.

Обязательно тестируйте рассылки в Gmail (веб, Android, iOS), Mail.ru, Yahoo. Главное — не полагаться на «работает в одном месте — значит, везде». Потратьте время на тестирование, и интерактив в письмах будет работать стабильно, независимо от платформы.

Если работаете в Figma, [**загляните к нам**](https://www.figma.com/@pixcraft). Здесь мы выкладываем много полезных материалов и инструментов для дизайнеров.

В этом материале — восемь сложностей при верстке AMP-писем и практичные решения с примерами и кодом.

small_amp-emails.png

thumbnail_amp-emails.png

amp-emails.png

Топ-8 тонкостей при создании AMP-писем

Figma получила крупное обновление с новыми инструментами для интерфейсного дизайна, прототипирования и работы с контентом. В редактор добавили рисование, адаптивные сетки, генерацию интерфейсов с помощью ИИ и конструктор сайтов. Появились функции для маркетинга и поддержки бренд-контента. Все нововведения объединены в рамках одной среды, без необходимости переключаться между разными сервисами. 

В этом обзоре — что именно изменилось и как это использовать в ежедневной работе.

## Figma Make

<Img
img="/api/uploads/figma_update_make_17ac1606c2.png"
alt="Figma Make"
/>

Figma Make превращает текстовое описание или фрейм из Figma в интерактивный прототип с кодом. Можно начать с нуля: ввести, что нужно — например, «экран профиля с аватаркой, кнопкой и списком» — и получить заготовку, которую потом легко подправить. Или скопировать в Make уже созданный фрейм и попросить AI добавить логику: анимации, переходы, интерактивность. Получается не просто макет, а реально работающий код — можно просмотреть результат, отредактировать его и даже опубликовать как мини-приложение.

Инструмент пока в бете и работает нестабильно — иногда результат странный или слишком простой. Сейчас Figma Make — скорее способ быстро проверить идею или собрать прототип «на коленке», а не замена полноценной разработке. В сообществе относятся к нему с интересом, но без восторга: потенциал есть, но в текущем виде всё ещё сыровато. Тем не менее, сам подход — генерация прототипов по описанию — открывает возможности для ускорения работы, особенно на ранних этапах.

Кроме Make, в Figma добавили и другие AI-функции прямо в редактор. Теперь можно автозаполнить текст — Figma предложит варианты на основе контекста, чтобы не копировать «рыбу» вручную. Есть простое редактирование изображений с помощью ИИ — например, убрать фон или улучшить качество без внешних сервисов. А ещё всё это теперь работает без дополнительных настроек: просто выбираешь объект и запускаешь замену контента.

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

## Grid Auto Layout 

<Img
img="/api/uploads/figma_update_grid_42f5ab67e5.png"
alt="Figma Grid Auto Layout"
/>

В Auto Layout появился новый режим — Grid. Теперь можно строить не только вертикальные или горизонтальные блоки, а нормальные двумерные сетки: с колонками, строками, ячейками, растяжением и адаптивностью. Раньше для сложных макетов приходилось вкладывать Auto Layout друг в друга или использовать хаки — теперь всё это делается напрямую, без костылей.

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

Grid — это то, чего давно не хватало, чтобы макеты в Figma были ближе к реальной вёрстке. Всё, что дизайнер настраивает в сетке, теперь читается в Dev Mode как CSS Grid, с нужными параметрами. Разработчики сразу видят структуру и могут взять нужный код без перевода с «дизайнерского на разработческий». Это снижает количество вопросов и исправлений на этапе передачи макета — всем понятна логика и поведение интерфейса.

## Figma Draw 

<Img
img="/api/uploads/figma_update_draw_fc0128b6a6.png"
alt="Figma Draw"
/>

Figma Draw — новый режим для рисования прямо внутри Figma. Раньше если нужно было нарисовать иллюстрацию, иконку или какую-то сложную форму, приходилось переключаться на Illustrator или другие векторные редакторы. Теперь этого можно избежать — в Figma добавили полноценные инструменты для ручного рисования и работы с векторной графикой.

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

Кроме кисти, добавили и другие полезные инструменты:

 - Текст по кривой, чтобы делать логотипы или декоративные надписи;
 - Заливки узором, вроде паттернов или текстур — удобно для фонов;
 - Динамические линии (Dynamic Stroke), где можно задать небольшое «дрожание» для живого, рисованного эффекта;
 - Эффекты шума и текстур — чтобы имитировать материал или «винтаж».

Раньше всё это приходилось делать в других программах и переносить в Figma. Теперь — не нужно. Всё работает внутри редактора, и это сильно упрощает жизнь, если нужно сделать графику для интерфейса или быстрый набросок.

## Figma Sites 

<Img
img="/api/uploads/figma_update_sites_ecb64781ae.png"
alt="Figma Sites"
/>

Figma Sites — это встроенный инструмент для создания сайтов прямо внутри Figma. Можно взять фрейм из дизайна, перенести его в отдельный проект и собрать из него простую веб-страницу. Не нужен код, не нужно ждать разработку — достаточно настроить адаптивность, добавить переходы или эффекты, и сайт можно сразу опубликовать. В бете доступны около 50 шаблонов и набор готовых блоков, плюс можно использовать стили и компоненты из своей дизайн-системы.

Сайты поддерживают брейкпоинты — можно настроить отображение под мобильные устройства, планшет и десктоп. Есть базовые визуальные эффекты: параллакс, плавные анимации, marquee, hover-состояния. Всё редактируется прямо в интерфейсе, как в любом визуальном редакторе. В будущем обещают добавить поддержку кастомного кода — это пригодится, если нужна нестандартная логика или поведение, которого пока нет «в коробке».

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

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

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

Планы на развитие есть — например, [**обещают встроенную CMS**](https://www.figma.com/blog/config-2025-recap/). Если Figma будет развивать Sites дальше, он может занять устойчивое место среди no-code решений.

## Figma Buzz 

<Img
img="/api/uploads/figma_update_buzz_aaf9bd3e83.png"
alt="Figma Buzz"
/>

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

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

Главная фишка — массовая генерация контента по таблице. Можно загрузить список текстов и изображений (например, из Google Sheets), и Buzz сам соберёт все возможные комбинации. Это удобно для кампаний, где нужно много вариантов одного и того же баннера с разными товарами, акциями или языками. Получившийся контент сразу доступен для скачивания.

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

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

## Заключение

Figma постепенно превращается из просто редактора в удобную рабочую среду для всей команды — от дизайна до запуска продукта. Новые функции вроде Make, Sites, Draw и Buzz упрощают задачи, сокращают количество ручной работы и помогают быстрее двигаться от идеи к результату. Не всё идеально, но направление развития в целом правильное.

Если работаете в Figma, [**загляните к нам**](https://www.figma.com/@pixcraft). Здесь мы выкладываем много полезных материалов и инструментов для дизайнеров.

Обзор обновлений Figma 2025: новые инструменты для дизайна, прототипов, сайтов и контента — всё в одном месте. Что добавили и как с этим работать.

small_figma-updates-main.png

thumbnail_figma-updates-main.png

figma-updates-main.png

Обновления Figma на Config 2025: подробный обзор

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

Технология AMP для email открывает новые возможности, интегрируя динамические элементы и формы обратной связи прямо в письма. [**В предыдущих материалах**](https://pixcraft.io/ru/blog/ispolzovanie-komponenta-amp-list-v-email-rassylke) мы рассмотрели базовые принципы работы с AMP-list в email-рассылках. В этой же статье сосредоточимся на компоненте **AMP-form** — ключевом инструменте для создания форм внутри писем. Он позволяет собирать данные, подтверждать действия и выстраивать полноценное взаимодействие с пользователями в реальном времени. Рассмотрим, как эффективно использовать AMP-form в email-маркетинге, а также как интегрировать его с помощью Pixcraft.

## Что такое AMP-form

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

- Регистрацию на мероприятие;
- Сбор отзывов;
- Подписку на рассылку;
- Опросы прямо в письме.

<Img
img="/api/uploads/amp_form_webinar_1_2d3b8c0338.png"
alt="Пример AMP в емейле"
src="Пример формы в письме, созданный с AMP-form"
/>

### Синтаксис AMP-form

Разметка простейшей формы на AMP выглядит так:

```HTML
<form method="post" action-xhr="https://example.com/submit">
<input type="text" name="name" placeholder="Ваше имя" required>
<input type="email" name="email" placeholder="Ваш email" required>
 	<button type="submit">Отправить</button>
 <div submit-success>
<template type="amp-mustache">
Спасибо за отправку, {{name}}!
</template>
  </div>
  <div submit-error>
Ошибка: попробуйте ещё раз.
  </div>
</form>
```
Основными атрибутами здесь являются:

**action-xhr**: указывает URL для отправки данных формы;
**div submit-success**: элемент, отображаемый при успешной отправке формы;
**div submit-error**: элемент, отображаемый при ошибке отправки формы;

Для динамической подстановки ответа используется [**amp-mustache**](https://amp.dev/documentation/components/email/amp-mustache).

## Примеры использования форм

### Регистрация на мероприятия и вебинары

С помощью AMP-form можно создать форму для регистрации, которая появится прямо в письме. Пользователь указывает имя и название организации, нажимает кнопку Зарегистрироваться, и его данные мгновенно отправляются на сервер организатора.

<Img
img="/api/uploads/amp_form_webinar_2_bc7aabca5e.png"
alt="AMP в письме"
/>

### Опросы и сбор обратной связи

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

<Img
img="/api/uploads/amp_form_cloud_3_9c665cdb6a.gif"
alt="AMP-письмо"
/>

### Бронирование встреч и консультаций

С помощью AMP-form клиент может выбрать дату и точное время встречи, а также оставить свои контакты прямо в письме.

<Img
img="/api/uploads/web_form_lawyer_4_a1af052a5c.png"
alt="Бронирование в AMP-письме"
/>

### Оформление заказов и заявок

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

<Img
img="/api/uploads/amp_form_order_5_4328e810a3.gif"
alt="Форма заказа в письме"
/>

### Расширение каналов коммуникации

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

<Img
img="/api/uploads/amp_form_phone_number_6_35773b5c67.png"
alt="Номер телефона в письме"
/>

### Сбор дополнительной информации

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

<Img
img="/api/uploads/amp_form_vet_7_c2f079b16a.png"
alt="Сбор дополнительной информации"
/>
## Реализация в Pixcraft

Быстро создать и настроить AMP-форму можно в [**визуальном конструкторе Pixcraft**](https://pixcraft.io/ru). Для этого на главной странице сервиса перейдите к разделу **AMP-компоненты** и  нажмите **Создать AMP-form**.

<Img
img="/api/uploads/amp_form_amp_components_8_a6b49995ff.png"
alt="Создание AMP-формы"
/>

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

Далее добавьте и расположите в нужном порядке **элементы** формы. Доступны следующие элементы:

**Input** — однострочное поле ввода текста;
**Checkbox** — галочки для выбора нескольких вариантов;
**Radio** — переключатели для выбора единственного варианта;
**Textarea** — многострочное поле ввода текста;
**Select** – выпадающий список, в котором можно выбрать единственный вариант из предложенных;

Также можно добавить сообщение об успешной отправке данных в форме.

Для текстовых полей можно настроить валидацию:

**Not Validate** — не проверять значение;
**Required** — поле обязательно для заполнения;
**Equal to value** — содержимое поля точно соответствует значению (необходимо указать в появившемся поле);
**Phone** — проверка количества числовых символов. Необходимое количество следует указать в дополнительном поле валидации;
**Email** — введенное значение должно соответствовать формату имейл-адреса.

<Img
img="/api/uploads/amp_form_element_label_9_baa17de081.png"
alt="Element label"
/>

По умолчанию данные из формы сохраняются в Pixcraft, но если вам нужно передать их во внешний сервис или базу, можете добавить ссылку на **Webhook**. Для этого в соответствующем поле укажите URL для перенаправления и тогда Pixcraft начнет отправлять **POST-запросы** по заданному адресу. Запрос содержит следующие параметры:

| Параметр   | Тип                                           | Пример                             | Описание                                                                                      |
|-------------|------------------------------------------------|-------------------------------------|--------------------------------------------------------------------------------------------------|
| componentId | Number                                         | 123                                 | ID компонента в Pixcraft.                                                                         |
| campaignId  | Number                                         | 124                                 | ID кампании, к которой принадлежит компонент. Может оставаться пустым, если компонент не привязан к кампании.                         |
| email       | String                                         | test@test.com                       | Емейл-адрес подписчика, отправившего форму.                                                       |
| date        | UNIX date                                      | 1648553051                          | Время, когда произошло событие.                                                                   |
| owner       | Number                                         | 125                                 | ID владельца формы в Pixcraft.                                                                    |
| data        | Content-Type: application/x-www-form-urlencoded | {"field0": "testInput", "field1": "radio1", "field2": "checkbox2", "success": "success"} | Данные формы.                                                        |

<Note>Подробнее о создании формы и настройке вебхука можно прочесть в [**документации Pixcraft**](https://docs.pixcraft.io/ru/amp/components/form.html).</Note>


Форма готова. Скопируйте сгенерированный код и вставьте его в шаблон письма.

<Img
img="/api/uploads/amp_form_podklucheniye_10_cafd79d172.png"
alt="Форма АМП"
/>

После сохранения форма будет доступна в разделе **Компоненты.**

<Img
img="/api/uploads/amp_form_my_space_11_da72f141cb.png"
alt="Форма АМП"
/>

Полученные через формы данные будут храниться в Pixcraft. В разделе **Статистика** вы найдёте информацию обо всех взаимодействиях с формой.

<Img
img="/api/uploads/amp_form_events_12_36a84288bc.png"
alt="Events: статистика AMP"
/>

Эту информацию можно экспортировать в виде **CSV-таблицы** или выгрузить в **Google Таблицы**. 

### Интеграция с Albato

Данные из форм можно автоматически передавать во внешние сервисы с помощью вебхука, а используя сервисы-посредники, вроде, **Albato** или **zapier** вы можете настроить любую интеграцию без программирования. В Albato перейдите в раздел **Мои связки**. Создайте новую связку.

<Img
img="/api/uploads/amp_form_moi_svyazki_13_6eed0cfa23.png"
alt="Мои связки"
/>

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

<Img
img="/api/uploads/amp_form_trigger_13_682d5fc608.png"
alt="Настройка триггера"
/>

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

<Img
img="/api/uploads/amp_form_webhook_14_aeaf54e4bf.png"
alt="Генерация вебхука"
/>

Скопируйте адрес, укажите его в поле Webhook в настройках формы в Pixcraft и сохраните изменения.

<Img
img="/api/uploads/amp_form_enter0webhook_15_e88b10e923.png"
alt="Вебхук"
/>






Вернитесь в Albato и нажмите **Ожидать вебхук**. Теперь необходимо отправить форму, чтобы отработал запрос. Для этого вставьте код формы в ваше письмо или воспользуйтесь [**плейграундом от Google**](https://amp.gmail.dev/playground/).
После отправки формы окно в Albato изменится, оно отобразит поля полученного вебхука.


<Img
img="/api/uploads/amp_form_webhook_catcher_16_2069c05d6e.png"
alt="Webhook catcher"
/>


Далее необходимо решить, что делать с полученными данными: отправить данные в ESP, CDP, CRM-систему и т.д. — вы можете выбрать любую интеграцию из списка. Например, можно отправить данные в CDP Altcraft: для этого при настройке действия после старта связки выберите Altcraft, укажите нужное действие и подключите ваш аккаунт в сервисе.



<Img
img="/api/uploads/amp_form_deistvie_17_0e4032d1bc.png"
alt="Запуск автоматизации"
/>

Для завершения и запуска автоматизации нажмите **Запустить**.

## Заключение

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

А если вы создаёте формы в [**визуальном конструкторе Pixcraft**](https://pixcraft.io/ru/builder), вам не придется разбираться в особенностях синтаксиса AMP-form. Вместо этого вы сможете использовать это время для разработки наиболее креативных маркетинговых кампаний для вашей компании.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

Узнайте, как использовать AMP-form в email-маркетинге для создания интерактивных писем с формами, обратной связью и сбором данных прямо в почтовом клиенте.


small_amp-form.png

thumbnail_amp-form.png

amp-form.png

Как создавать и использовать формы в письме

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

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

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

## Какие есть виды шрифтов для письма

**Шрифты без засечек (гротески)** — это такие шрифты, как Arial, Helvetica, Verdana, Tahoma. Они выглядят современно, нейтрально и легко воспринимаются на экранах любых устройств. Их главное преимущество — хорошая читаемость и универсальность. Такие шрифты подходят для деловых писем, новостных рассылок и любых коммуникаций, где акцент сделан на простоту и доступность. Для основного текста особенно рекомендуется использовать Verdana или более нейтральный Arial.

<Img
img="/api/uploads/tipografika_emeily_populyarnye_shifty_06d6081d77.png"
alt="Пример емейла с популярными шрифтами"
src="Здесь в основном тексте используется стандартный шрифт без засечек — Arial" 
/>

**Шрифты с засечками (антиквы),** например Georgia и Times New Roman, создают более формальный и основательный образ. Засечки добавляют тексту серьёзности, что особенно полезно при официальных рассылках или в проектах, где важно подчеркнуть традиционность бренда. Однако стоит учитывать, что на небольших экранах шрифты с засечками могут ухудшать читаемость. 

<Img
img="/api/uploads/tipografika_yandex_krasivye_shrifty_305cbff403.png"
alt="Пример емейла с красивыми шрифтами"
src="В заголовке — контрастный шрифт с засечками. Это распространённый приём — сочетать заголовок с засечками и основной текст без засечек" 
/>

**Рукописные шрифты** вроде Pacifico, Dancing Script или Lobster добавляют письму неформальности и эмоциональности. Они создают эффект личного обращения, усиливают вовлечённость. При этом рукописные шрифты заметно ухудшают читаемость длинных текстов, поэтому их использование стоит ограничить небольшими акцентами — заголовками или краткими вставками. Для основного текста рукописные шрифты непригодны.

<Img
img="/api/uploads/tipografika_rukopisny_shrift_843fde02ea.png"
alt="Емейл с рукописным шрифтом"
src="В заголовке используется рукописный шрифт" 
/>

**Декоративные шрифты** (например, Impact, Comic Sans или брендированные стилизованные гарнитуры) рассчитаны на привлечение внимания за счёт нестандартного вида. Они могут быть оправданы в оформлении баннеров, праздничных заголовков, специальных акций. Но в деловой переписке и для длинных текстов такие шрифты использовать нельзя: они быстро утомляют глаз и мешают восприятию информации.

<Img
img="/api/uploads/tipografika_v_pismah_primer_2d8849c649.png"
alt="Декоративный шрифт"
src="В заголовке используется декоративный шрифт" 
/>

### Стандартные и кастомные шрифты

**Стандартные шрифты** (или веб-безопасные) — это шрифты, которые обычно предустановлены на всех основных операционных системах: Windows, macOS, Android, iOS. Они корректно отображаются в большинстве почтовых клиентов без дополнительных настроек. К таким шрифтам относятся Arial, Verdana, Tahoma, Times New Roman, Georgia. Они гарантируют предсказуемое поведение письма на любых устройствах: текст выглядит одинаково, загружается быстро, риск ошибок минимален.

**Нестандартные (или кастомные шрифты)**, напротив, требуют подключения через @font-face или внешние сервисы вроде Google Fonts. Поддержка таких шрифтов крайне ограничена: стабильно они работают только в Apple Mail (на iOS и macOS) и в некоторых версиях Outlook для Mac. В остальных случаях (например, в Gmail, Outlook на Windows, мобильных приложениях) такой шрифт будет автоматически заменён на стандартный. Это не только рушит задуманный стиль письма, но и создаёт непредсказуемые проблемы с вёрсткой.

Использование кастомных шрифтов в email-рассылках оправдано только в очень редких случаях, когда есть уверенность в специфике аудитории. 

**@font-face** сегодня фактически бесполезен в email-дизайне: поддержка на уровне [**менее 20% клиентов**](https://www.caniemail.com/features/css-at-font-face/) делает его применение нецелесообразным. Если подключить кастомный шрифт без запасного варианта, письмо может выглядеть некорректно.

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

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

<Img
img="/api/uploads/tipografika_shrifty_dlya_texta_ffd39f0d5a.png"
alt="Шрифты для текста в емейле"
src="Кастомный шрифт в баннере + стандартные шрифты без засечек в тексте" 
/>

### Как сочетать шрифты

Использовать в письме более двух шрифтов не рекомендуется. Оптимальное решение — один шрифт для основного текста и один для заголовков. Например:

- Georgia для заголовков и Verdana для основного текста — вариант для писем с лёгким акцентом на классику.
- Arial для заголовков и Times New Roman для основного текста — решение для строгих деловых рассылок.
- Trebuchet MS для заголовков и Arial для текста — современный, нейтральный вариант для массовых email-рассылок, особенно если важна читаемость и универсальность.

## Размер шрифта, межстрочный интервал и контраст: правила для писем, которые легко читать

**Размер заголовков** должен быть значительно больше основного текста. Для основных заголовков целесообразно использовать 28-36 px, а для подзаголовков —18-24 px. Такая градация строит чёткую визуальную иерархию, акцентирует внимание на ключевых элементах письма и упрощает навигацию по тексту.

<Img
img="/api/uploads/tipografika_zagolovok_samyi_chitabelnyy_shrift_beaa04bd04.png"
alt="Размер заголовка в письме"
src="Размер заголовка — примерно 26-30 пикселей" 
/>

**Оптимальный размер шрифта для основного текста — 16 px.** Это значение считается комфортным и для десктопов, и для мобильных устройств. Меньший размер ухудшает читаемость и повышает риск, что часть текста просто проигнорируют. 

**Межстрочный интервал (line-height)** играет не менее важную роль. При плотной вёрстке текст становится трудночитаемым даже при правильном размере шрифта. Оптимально выставлять межстрочный интервал в диапазоне 1,4-1,6 от размера шрифта. 

Например, при размере шрифта 16 px межстрочный интервал должен быть около 22-24 px. Таким образом текст «дышит», его легче воспринимать, и глаза меньше устают при чтении.

<Img
img="/api/uploads/tipografika_interval_shrifty_nazavaniya_957ec8f102.png"
alt="Шрифты: названия и межстрочный интервал"
src="Line-height примерно 1.4-1.5" 
/>

**Контраст между текстом и фоном** — обязательное условие для повышения читаемости. Слабый контраст мешает читать и повышает вероятность, что человек просто перестанет вникать в текст. Тёмный текст на светлом фоне (например, чёрный на белом или тёмно-серый на светло-сером) остаётся наиболее надёжным решением. Избегайте цветовых сочетаний с низким контрастом, а также тонких и светлых шрифтов на ярких фонах.

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

## На что ещё стоит обращать внимание 

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

- **Висячие предлоги и союзы в конце строки** — это ошибка, которую легко пропустить, но она делает текст визуально неопрятным. При вёрстке писем вручную все эти вещи нужно проверять самостоятельно. Но если вы используете продукты [**Pixcraft**](https://pixcraft.io/ru) (включая [**фреймворк TJML**](https://pixcraft.io/ru/framework)), эти тонкости уже учтены. Система автоматически подставляет неразрывные пробелы там, где нужно, чтобы не было висячих союзов и предлогов в конце строки. Это избавляет от рутинной правки и делает текст визуально чище.

<Img
img="/api/uploads/tipografika_soyuzy_visyachie_09eca289b9.png"
alt="Висячие предлоги"
src="Емейл с висячими предлогами и союзами" 
/>

- **Разрядность чисел**. Большие числа вроде 10 000 или 1 200 000 всегда нужно разделять пробелами. Читателю так проще воспринимать числа. 
- **Знаки препинания**. Дефис — это не то же самое, что длинное тире. Дефис — это «-» (например, в слове «по‑русски»), а длинное тире (—) ставится в тексте как логическая пауза. Также в русских емейлах для цитирования применяйте «ёлочки» («…»), а не кавычки такого формата: “”.
- **Выравнивание текста**. Текст, кнопки и изображения в письме должны быть выровнены одинаково — так письмо выглядит аккуратно и читается проще. Самый удобный вариант — по левому краю. Не растягивайте текст по ширине: из-за этого между словами появляются дополнительные расстояния, и читать становится неудобно.
- **Цвет текста**. Основной текст должен быть одного нейтрального оттенка — тёмно-серого или чёрного (для светлого фона). Для акцентов и заголовков можно добавить один-два дополнительных цвета, но не больше. Избыток цветовых элементов делает письмо визуально перегруженным. 
- **Выделение текста**. Жирный и курсив лучше использовать только для акцентов — отдельных слов или коротких фраз. Например, жирным можно выделить промокод или важную мысль. Если выделено слишком много, акценты теряют смысл и перестают привлекать внимание.

## Итоговые рекомендации

- **Не больше двух шрифтов**. Один для заголовков, другой для основного текста. Больше не нужно — письмо будет выглядеть перегруженным. 
- **Размер шрифта — 14-16 px**. Меньше — уже трудно читать, особенно на телефоне. 
- **Между строками должен быть воздух**. Межстрочный интервал — 1.4–1.6. С таким интервалом строки не слипаются, текст остаётся разборчивым.
- **Тёмный текст на светлом фоне**. Самый надёжный вариант — чёрный или тёмно-серый на белом. Сложные цветовые сочетания ухудшают читаемость.
- **Не вставляйте текст картинкой**. Такие письма не читаются скринридерами и могут не загрузиться.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

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


small_tipografika-v-emerilah.png

thumbnail_tipografika-v-emerilah.png

tipografika-v-emerilah.png

Типографика писем: как сделать текст читаемым

Разберём, какие email-цепочки стоит запускать в первую очередь, какую пользу они приносят бизнесу и как сделать письма не только полезными, но и увлекательными.

small_email-sequence.png

thumbnail_email-sequence.png

email-sequence.png

Какие email-цепочки — must-have для бизнеса

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

small_checklist-testing-email.png

thumbnail_checklist-testing-email.png

checklist-testing-email.png

Чеклист: что протестировать перед отправкой письма

Сегодня электронная коммерция должна не только предоставить клиенту качественный продукт, но и обеспечить удобство взаимодействия на всех этапах, включая коммуникацию через электронную почту. Использование микроразметки JSON-LD в email-рассылках позволяет выделиться среди конкурентов и упростить клиенту получение ключевой информации.

## Микроразметка JSON-LD

**JSON-LD** — это формат передачи связанных данных. В контексте email-рассылок JSON-LD позволяет преобразовывать данные в элементы интерфейса почтового клиента. Для этого необходимый код вставляется в раздел head HTML-кода email-письма, предоставляя почтовым сервисам структурированные данные для отображения.

Формат JSON-LD используется не только в коде электронных писем, но и при создании сайтов и страниц в интернете. Не следует путать их между собой, поскольку применение формата в этом случае направлено на SEO-оптимизацию.
JSON-LD в письмах использует словарь **schema.org**. Его базовая структура выглядит примерно так:

```JSON-LD
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "..."
…
}
</script>
```
## Особенности в разных почтовиках

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

### Gmail

Именно Google первым начал использовать JSON-LD в своих письмах и продолжает добавлять варианты его применения. Функционал формата можно разделить на:

**1.** **Действия** — это кнопки быстрых действий, которые появляются в списке входящих и позволяют совершить целевое действие вообще не открывая письмо. Они бывают 2 типов:

- **One Click Actions** — подходит для подтверждения чего-либо без перехода на сайт. Отлично подойдет для подтверждения подписки, например.

- **Go to action** — для перехода по ссылке в один клик

<Img
img="/api/uploads/JSON_LD_example_1_4e9c63d874.png"
alt="JSON-LD в письмах"
src="Пример использования Go to Action"
/>

- **Заказы** — информация о заказах и все, что с ними связано. Сюда входит: главная информация о заказе, информация о доставке, платежная информация.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_1_5b519c7709.png" 
thumbnail="/api/uploads/json_ld_1_5b519c7709.png"
description="JSON-LD в письмах. Заказы"
/>
<GalleryItem
original="/api/uploads/json_ld_2_82a8ff0022.png" 
thumbnail="/api/uploads/json_ld_2_82a8ff0022.png"
description="JSON-LD в письмах. Заказы"
/>
<GalleryItem
original="/api/uploads/json_ld_3_9ebbc61ae1.png"
thumbnail="/api/uploads/json_ld_3_9ebbc61ae1.png"
description="JSON-LD в письмах. Информация о заказах"
/>
</Gallery>

- **Бронирование**, включает в себя: билеты на автобус, билеты на поезд, авиаперелет, событие/мероприятие, бронирование гостиниц, бронирование ресторанов, аренда автомобиля.

<Gallery>
<GalleryItem
original="/api/uploads/json_ld_bus_tickets_a769591ef7.png" 
thumbnail="/api/uploads/json_ld_bus_tickets_a769591ef7.png"
description="JSON-LD в письмах. Бронирование билета" 
/>
<GalleryItem
original="/api/uploads/json_ld_train_tickets_55bf85ffea.png" 
thumbnail="/api/uploads/json_ld_train_tickets_55bf85ffea.png"
description="JSON-LD в письмах. Бронирование"
/>
<GalleryItem
original="/api/uploads/json_ld_arenda_255d394b69.png" 
thumbnail="/api/uploads/json_ld_arenda_255d394b69.png"
description="JSON-LD в емейлах"
/>
<GalleryItem
original="/api/uploads/json_ld_hotel_b92350279e.png"  
thumbnail="/api/uploads/json_ld_hotel_b92350279e.png"
description="Использование JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_perelet_ff36c7efba.png"  
thumbnail="/api/uploads/json_ld_perelet_ff36c7efba.png"
description="JSON-LD: примеры использования."
/>
<GalleryItem
original="/api/uploads/json_ld_restoran_f9a5022f12.png"  
thumbnail="/api/uploads/json_ld_restoran_f9a5022f12.png"
description="JSON-LD"
/>
<GalleryItem
original="/api/uploads/json_ld_sobytie_2c01399694.png" 
thumbnail="/api/uploads/json_ld_sobytie_2c01399694.png"
description="JSON-LD в рассылках"
/>
</Gallery>

- **Аннотации** — это информация, которая отображается до открытия письма, если оно попало в список «Промоакции». Она может включать в себя карточки товаров, информацию о скидке и промокод. Яркие карточки в списке «Промоакций» точно привлекут внимание подписчика, сократят путь до перехода на сайт, а также предотвратят автоматическое формирование карточек с неудачными изображениями.

<Img
img="/api/uploads/JSON_LD_annotation_11zon_71b196b29b.jpg"
alt="JSON-LD в письмах"
src="JSON-LD в письмах с аннотациями"
/>

Широкие возможности формата в Gmail позволяют создать удобные для клиента email-рассылки. Для использования всех возможностей JSON-LD в Gmail необходимо пройти процедуру регистрации, практически как для отправки AMP-писем. Во-первых,  ваш домен должен соответствовать [**требованиям Google**](https://developers.google.com/workspace/gmail/markup/registering-with-google?hl=ru#registration_guidelines). Во-вторых, нужно отправить пример письма с JSON-LD на специальный почтовый ящик (schema.whitelisting+sample@gmail.com). В-третьих, нужно заполнить специальную [**форму**](https://docs.google.com/forms/d/e/1FAIpQLSfT5F1VJXtBjGw2mLxY2aX557ctPTsCrJpURiKJjYeVrugHBQ/viewform?pli=1&hl=ru). Только после этих действий можно ожидать одобрения от почтовика. 

Подробнее об условиях одобрения ваших писем можно прочесть [**в официальной документации**](https://developers.google.com/workspace/gmail/markup/registering-with-google?hl=ru), а полная информация+ по использованию JSON-LD в Gmail доступна [**на этой странице**](https://developers.google.com/gmail/markup/reference?hl=ru).

Для тестирования работы вы можете отправить себе письмо с того же ящика Gmail. Самым удобным вариантом для этого будет воспользоваться сервисом [**Google Scripts**](https://script.google.com). Основной скрипт будет иметь примерно следующий вид:

```JavaScript
function testSchemas() {
  var htmlBody = HtmlService.createHtmlOutputFromFile('Email.html').getContent();

  MailApp.sendEmail({
	to: Session.getActiveUser().getEmail(),
	subject: 'JSON LD',
	htmlBody: htmlBody,
  });
}
```
А рядом необходимо добавить файл с тестовым шаблоном, в нашем случае Email.html.


### Mail.ru
Mail.ru поддерживает использование JSON-LD в виде карточек заказов и смарт-карточек для оплаты прямо в письме. 

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

<Img
img="/api/uploads/JSON_LD_zakaz_mailru_41402ae923.png"
alt="JSON-LD в емейле с карточкой заказа"
src="JSON-LD с карточкой заказа"
/>

**Смарт-карточки** — Mail.ru позволяет произвести оплату заказа или квитанции прямо из письма. 

<Img
img="/api/uploads/JSON_LD_smartkartochki_b848aa6dfc.png"
alt="JSON-LD в емейле со счетом"
src="JSON-LD со счетом"
/>

Смарт-карточки отображаются как в веб-версии почтового клиента, так и в мобильном приложении.

Имейте ввиду, что для использования смарт-карточек необходимо [**согласовать**](https://help.mail.ru/developers/jsonld/smartcards/id/) уникальный идентификатор отправителя. Полная документация Mail.ru по JSON-LD находится на [**этой странице**](https://help.mail.ru/developers/jsonld/about/).

### Яндекс.Почта

Яндекс.Почта выделяет письма, содержащие JSON-LD, специальным образом в общем списке входящих сообщений. Поддерживается:

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

- вывод информации об авиабилетах.

<Img
img="/api/uploads/JSON_LD_yandex_710073fad9.png"
alt="JSON-LD. Вывод информации"
src="Вывод информации о билете"
/>

Условие для использования JSON-LD только одно: соблюдения требований Яндекса к массовым рассылкам и домену отправителя.
Подробнее информацию об использовании JSON-LD в почтовике Яндекса можно найти [**здесь**](https://yandex.ru/support/webmaster/mail/mail.html).

## Тестирование шаблонов с JSON-LD

Мы рекомендуем всегда проверять ваши email-шаблоны с JSON-LD (как и с любыми другими интерактивными элементами). Существует несколько способов проверки:

- При помощи специальных валидаторов, например, [**Schema Validator**](https://validator.schema.org/). Некоторые почтовые провайдеры имеют собственные сервисы, например, [**Инструмент проверки разметки от Google**](https://www.google.com/webmasters/markup-tester/u/0/?hl=ru).

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

- Запуск тестовой рассылки. Самый надежный способ, который поможет быстро проверить отображение JSON-LD сразу в нескольких почтовиках.

<Note>О проверке отображения и тестировании рассылок мы уже говорили в одной из [**статей блога.**](https://pixcraft.io/ru/blog/proverka-sovmestimosti-email-shablonov-kak-izbezhat-oshibok-na-raznyh-ustrojstvah#podderzhka-jsonld) Там же отдельно упоминали и JSON-LD.</Note>

## Заключение

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

Клиентоориентированность, наряду с [**другими трендами email-маркетинга**](https://pixcraft.io/ru/blog/email-marketing-v-2025-kak-ne-otstat-ot-konkurentov), является одним из главных условий успешной коммуникации с клиентом. Внедряя JSON-LD в свои письма, вы не просто улучшаете, а создаете качественно новый пользовательский опыт, значительно повышая лояльность к вашей компании.

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

JSON-LD в email-рассылках выделяет письма среди конкурентов и упрощает получение важной информации. Разбираемся, как использовать микроразметку.

small_JSON-LD.png

thumbnail_JSON-LD.png

JSON-LD.png

Смарт-карточки и статус заказа: использование JSON-LD в email-рассылках

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

small_figma.png

thumbnail_figma.png

figma.png

Разработка гайдлайна в Figma: компоненты, варианты и переменные

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

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

В статье расскажем, какие [**CTA**](https://altcraft.com/ru/blog/chto-takoe-cta) привлекают больше подписчиков, зачем нужны bulletproof-кнопки и как проверить разные варианты, чтобы выбрать наиболее оптимальный.

## Сколько нужно кнопок и где их размещать 

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

<Img
img="/api/uploads/cta_pixcraft_9d4e132077.png"
alt="Письмо без кнопки"
src="Здесь кнопки нет, но картинка кликабельна. Пользователь может не понять, куда нажимать, чтобы перейти в карточку товара на сайте"
/>

Если в письме несколько кнопок, их стоит разделить по важности. Для главных действий — один стиль, для второстепенных — другой. Чаще всего достаточно двух вариантов. Это помогает сделать структуру письма понятной и не перегружать его лишними элементами.

<Img
img="/api/uploads/cta_pixcraft_buttons_styles_ad33d06cdd.png"
alt="Два вида кнопок"
src="Здесь используется два вида кнопок"
/>

Слишком много кнопок в одном письме могут запутать человека. Лучше оставить только самые важные CTA и расположить их так, чтобы путь к целевому действию был очевидным.

<Img
img="/api/uploads/cta_pixcraft_mnogo_knopok_f81c9dd139.png"
alt="Слишком много кнопок в письме"
src="Письмо перегружено кнопками"
/>

## Какие формулировки работают лучше

Текст кнопки напрямую влияет на кликабельность. Хороший CTA должен быть понятным, привлекать внимание и подталкивать к действию. Но как его формулировать: лаконично или развернуто, креативно или строго по делу?

**Короткие или длинные кнопки?** Короткие CTA («Купить», «Посмотреть», «Попробовать») привычны и быстро читаются. Они хорошо работают, когда действие очевидно, а контекст понятен без лишних слов. Например, если перед кнопкой уже есть объяснение, зачем на нее нажимать.

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

**Что важнее: понятность или креативность?** Яркий и нестандартный CTA может привлечь внимание, но если смысл кнопки неочевиден, кликов будет меньше. Например, «Открыть дверь в будущее» звучит интересно, но не всегда ясно, что произойдет при нажатии. «Записаться на курс» — прямолинейно, но зато понятно.
Креативные CTA работают, если они совпадают с тоном бренда и понятны без раздумий. Например, для интернет-магазина:

- «Добавить в корзину» — понятно и привычно.
- «Отложить, чтобы не забыть» — необычно, но смысл ясен.
- «Положить в заначку» — креативно, но может запутать.

<Img
img="/api/uploads/cta_knopka_pixcrft_16c7bbfb5d.png"
alt="Вариант CTA"
src="Кнопка креативная, но не всем будет понятно, что произойдет при нажатии"
/>

**Что попробовать?**

- Если стандартный CTA не дает хороших результатов, протестируйте разные формулировки: лаконичные, детализированные, эмоциональные.
 - Используйте глаголы, побуждающие к действию: «Получить», «Зарегистрироваться», «Скачать».
 - Добавьте элемент срочности или выгоды: «Забронировать со скидкой», «Скачать бесплатно».
 - Избегайте неопределенности: «Окей», «Дальше», «Готово» без контекста могут запутать.

## Как должны выглядеть кнопки 

### Размер 

Кнопки в мобильных интерфейсах должны быть достаточно крупными, чтобы на них было удобно нажимать пальцем. Обычно рекомендуется размер не меньше 44×44 px.

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

Средняя ширина указательного пальца взрослого человека — 1,6–2 см (45–57 px), а большого — около 2,5 см (72 px). Кнопки такого размера удобны: их видно при нажатии, они не требуют повышенной точности и позволяют быстрее взаимодействовать с интерфейсом.

<Img
img="/api/uploads/cta_pixcraft_bolshaya_knopka_845f72cbc4.jpg"
alt="CTA для мобильных устройств"
src="Здесь кнопка крупная — пользователь точно не промахнется"
/>

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

### Форма кнопки

Эксперименты с дизайном — это здорово, но если кнопка не выглядит как кнопка, пользователи могут ее не заметить. Лучше использовать привычные формы:

- Закругленные.
- Прямоугольные.
- Кнопки-капсулы.
- Прозрачные кнопки.
- Кнопки с тенями.

<Img
img="/api/uploads/pixcraft_standard_cta_shapes_62a3c9c862.png"
alt="Формы кнопок"
/>

### Пространство вокруг кнопки

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

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

### Визуальный отклик

Простая анимация делает кнопки заметнее и приятнее в использовании. [**Исследования показывают**](https://www.sixthcitymarketing.com/2023/03/24/statistics-to-know-about-ctas-in-2023/), что такие визуальные эффекты увеличивают количество кликов на 26%.

Самый простой вариант — добавить реакцию кнопки на наведение и нажатие. Например, можно изменить цвет, немного увеличить кнопку или добавить свечение. Эти мелочи привлекают внимание и делают взаимодействие более естественным.
Такие детали вовлекают пользователей и повышают кликабельность рассылки. Главное — не перегружать анимацией, чтобы кнопки оставались удобными.

## Как подобрать лучший вариант кнопок

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

**Что тестировать?**

При тестировании кнопок можно проверить:

- **Текст** — короткий или длинный CTA.
- **Цвет** — яркий контрастный или более нейтральный, гармонирующий с дизайном письма.
- **Форма** — классическая прямоугольная, закругленная или капсула.
- **Размер** — компактная кнопка или крупный элемент, привлекающий внимание.
- **Расположение** — в начале письма, в середине или в конце.

### Как тестировать?

Можно использовать платформы, которые автоматизируют процесс. Например, в [**Altcraft Platform**](https://altcraft.com/ru/features/mvt) доступны разные форматы тестирования:

- [**A/B-тесты**](https://altcraft.com/ru/blog/abn-i-mvt-testirovanie) — позволяют сравнивать два варианта кнопок и определять победителя по кликам или открытиям. Система может автоматически распределять аудиторию и выбирать лучший вариант.
- **Многовариантное тестирование** — подходит для более сложных проверок, например, если нужно протестировать сразу несколько элементов письма. В платформе можно создать до 8 версий шаблонов.
- **Аналитика** — если автоматического выбора недостаточно, можно проанализировать отчеты и вручную определить лучший вариант.

## Что такое bulletproof-кнопки

Bulletproof-кнопки — это кнопки, созданные с помощью HTML и CSS, а не в виде изображений (PNG, GIF, JPEG). Их главное преимущество — корректное отображение во всех почтовых клиентах, даже если у пользователя отключены изображения.

Если использовать кнопки в виде картинок, есть риск, что они просто не загрузятся. Это снижает кликабельность и делает CTA менее заметным. Кроме того, кнопки-изображения сложно редактировать: каждый раз приходится переделывать дизайн, загружать новую версию на сервер и обновлять код. С bulletproof-кнопками всё проще — стиль и текст можно менять прямо в HTML-шаблоне.

Pixcraft всегда формирует bulletproof-кнопки, которые корректно отображаются во всех почтовых клиентах, включая Outlook, и остаются видимыми даже при отключённых картинках. В блочном редакторе можно быстро собрать письмо без лишних сложностей и сразу подготовить его к отправке. [**Попробуйте конструктор писем бесплатно.**](https://pixcraft.io/ru) 

Если нет времени заниматься технической реализацией письма, поможет [**плагин Pixcraft для Figma**](https://pixcraft.io/ru/figma). Достаточно подготовить дизайн-макет — плагин сам превратит его в чистую HTML-верстку. Это экономит время и избавляет от ручной правки кода. 

## Заключение 

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

Кстати, если вы хотите прокачать навыки в email-маркетинге, загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там делимся полезными материалами, лайфхаками и идеями для работы.

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


Блог