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

Чтобы создание писем оставалось комфортным в современных реалиях, мы разработали специальный фреймворк — **TJML**. В статье рассмотрим его детально и расскажем, как он помогает верстать рассылки легко и управляемо.

## Стоит ли сегодня полагаться на ручную вёрстку

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

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

Фактически одно письмо теперь включает **три разных версии**:

- для современных десктопных и веб-клиентов;<br><br>
- для мобильных устройств;<br><br>
- для Outlook на Windows, где поддержка CSS всё ещё сильно ограничена.

Отдельно стоит упомянуть AMP-технологию. Она открыла путь к интерактивным письмам с «каруселями», формами и другими динамическими элементами. Но технически это значит, что нужно предусматривать как AMP-вариант для совместимых клиентов, так и обычную HTML-версию для всех остальных.

### Где помогают визуальные конструкторы

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

Например, [**визуальный редактор писем Pixcraft**](https://pixcraft.io/ru/builder) позволяет собирать рассылки по принципу drag-and-drop: просто перетаскивайте нужные элементы на холст и меняйте их. Управление компонентами, включая AMP, доступно прямо в интерфейсе, а готовые шаблоны совместимы со множеством email-клиентов и легко адаптируются под мобильные устройства. Ещё одной альтернативой является экспорт готового email-кода с помощью [**плагина Pixcraft для Figma**](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-export-html-email-code-from-your-figma-design-responsive-outlook-gmail-ios): он позволяет преобразовать готовый макет в адаптивное HTML-письмо.

Но так или иначе в основе каждого письма лежит код, и порой взаимодействия с ним не избежать. Можно ли сделать работу с кодом такой же комфортной и современной? Ответ — да. Именно здесь и пригодится TJML.

## Что такое TJML

Это email-фреймворк, созданный командой Pixcraft для разработки HTML- и AMP-писем. Он объединяет простоту блочного подхода с гибкостью ручной вёрстки, сохраняя при этом привычный синтаксис.

Базовый каркас письма в TJML может выглядеть так:

```xml
<tjml>
  <m-body>
    <m-wrap width="600">
      
    </m-wrap>
  </m-body>
</tjml>
```

Здесь роли компонентов распределяются следующим образом:

- `<tjml>` — корневой контейнер, обрамляющий весь код;<br><br>
- `<m-body>` — основное тело письма, которое содержит весь его контент;<br><br>
- `<m-wrap>` — обёртка, отвечающая за ширину, отступы, фон, выравнивание и другие параметры.

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

- **Неперестраиваемые (резиновые) блоки.** Здесь элементы остаются в одной строке. За это отвечает компонент `<m-row>`: он обрамляет блоки `<m-column>`, которые масштабируются в мобильных клиентах.<br><br>
- **Перестраиваемые блоки.** Это компоненты `<m-box>`, которые обрамляются с помощью `<m-boxes>`. В мобильной версии письма они автоматически выстраиваются друг под другом, если не помещаются в одну строку.

Внутрь структур добавляются контентные блоки, в том числе текст (`<m-text>`), изображения (`<m-img>`), кнопки (`<m-button>`) и другие. Больше деталей о компонентах TJML можно узнать в [**документации**](https://docs.pixcraft.io/ru/tjml/).

Ниже — упрощённый пример того, как может выглядеть письмо, свёрстанное в TJML:

```xml
<m-body bgcolor="#ffffff" font-family="Arial, sans-serif">
  <m-wrap width="600" padding="20px" bgcolor="#f9f9f9">
    <m-text font-size="20px" color="#333333" align="center">
      Привет! Это письмо собрано на TJML.
    </m-text>
    <m-button href="https://docs.pixcraft.io" bgcolor="#6a66d3" color="#ffffff" border-radius="6px" width="200">
      Узнать больше
    </m-button>
  </m-wrap>
</m-body>
```

## Что делает TJML особенным

### Работа с кодом в браузере

Чтобы начать работу с TJML, достаточно открыть онлайн-редактор [**Playground**](https://app.pixcraft.io/playground/). Прямо здесь можно верстать и визуально проверять письмо, переключаться между десктопным и мобильным отображением, тестировать тёмную тему и просматривать готовый HTML-код.

<Img
img="/api/uploads/01_kodplaygr_69012019da.png"
alt="Вёрстка письма с помощью TJML в Playground"
/>

При этом с TJML можно работать в любом IDE. Для ещё большего комфорта мы: 

- разработали [**плагин для VS Code**](https://marketplace.visualstudio.com/items?itemName=Pixcraft.vscode-tjml), добавляющий автокомплит и подсказки по доступным компонентам и атрибутам;<br><br>
- подготовили [**web-types**](https://app.pixcraft.io/tjml/web-types.json) для продуктов JetBrains (WebStorm/PhpStorm).

### HTML и AMP в одном коде

В классическом подходе AMP- и HTML-версии письма — это две независимые разметки, которые верстаются по отдельности. Однако TJML значительно упрощает этот процесс: в рамках разметки фреймворк формирует сразу две версии кода.

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

`<m-wrap m-if="isAmp">  </m-wrap>`

`<m-wrap m-if="!isAmp">  </m-wrap>`

При этом TJML сам подключает необходимые AMP-компоненты, если они задействованы в коде (например, `amp-carousel`, `amp-form` или `amp-list`).

### Отображение в почтовых клиентах

Одним из основных преимуществ TJML является продуманный подход к совместимости с различными почтовыми клиентами, включая Outlook и Яндекс Почту:

- Десктопная версия **Outlook** использует движок рендеринга, где современные CSS-свойства не работают. TJML автоматически добавляет VML-блоки и условные комментарии, чтобы фоны, выравнивание и отступы корректно отображались даже в старых версиях клиента.<br><br>
- **Яндекс Почта**, в свою очередь, не поддерживает медиа-запросы. TJML формирует структуру так, чтобы сохранить адаптивность даже без них.

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

### Контроль веса и оптимизация кода

В email-маркетинге вес писем не менее значим, чем их наполнение. К примеру, Gmail автоматически обрезает письма, если их размер превышает **102 КБ**, что может повлиять на вёрстку и работоспособность трекинговых пикселей.

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

### Проверка ошибок и типографика

В процессе работы TJML проверяет структуру письма и корректность вложенности `m`-элементов. Если обнаружатся нарушения, фреймворк предупредит пользователя о них.

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

## Вёрстка пиксель в пиксель

Чтобы между дизайн-макетом и вёрсткой не было визуальных расхождений, в TJML предусмотрен инструмент **Pixel Perfect**. Работает он так: для проверки письма необходимо загрузить макет в графическом формате (например, PNG или JPG). Затем нужно прописать тег и атрибут с указанием адреса:

`<tjml pixel-perfect="img/maket.png">`

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

## Как автоматизировать вёрстку с ChatGPT

Чтобы верстать письма на TJML было ещё проще, мы обучили [**специальную версию ChatGPT**](https://chatgpt.com/g/g-6823ad1f3c208191b9ce2d58bf3bb724-tjml) работе с фреймворком. Она помогает создавать письма буквально по запросу. Достаточно сформулировать описание, и уже через несколько секунд вы получите TJML-код, который сразу можно добавлять в редактор и адаптировать под задачу.

<Img
img="/api/uploads/02_generirovkod_cc4f8e261f.png"
alt="Генерация TJML-письма"
/>

Но функционал специальной версии ChatGPT не ограничивается только этим. Помимо генерации она:

- **умеет вносить правки** в существующий код на основе текстового описания;<br><br>
- **помогает учиться работе с TJML**: объяснять назначение тегов и подсказывать, какие атрибуты стоит использовать в разных сценариях.

## Результаты и эффективность

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

В частности, мы помогали внедрять TJML в ежедневную работу одного из крупных российских маркетинговых агентств. Здесь на начальных этапах фреймворк дал заметный рост производительности. Даже при создании сложных писем средняя скорость вёрстки увеличилась **более чем на 50%**, а при создании AMP-писем — в среднем **в 1,5 раза** без потери качества.

Следующий показатель — **чистота и компактность разметки**. В сравнительных тестах при использовании TJML код весил **13,5 КБ**, тогда как аналог на [**MJML**](https://pixcraft.io/ru/blog/mjml-ili-tjml) — более **22 КБ**. Меньший вес обеспечивает более быструю загрузку и снижает риск обрезки письма в Gmail.

Ещё одно преимущество TJML — **низкий порог входа**. Фреймворк позволяет сосредоточиться на структуре и дизайне письма, не углубляясь в тонкости адаптации под множество почтовых клиентов. Наконец, одним из главных аргументов в пользу TJML остаётся уже упомянутая **стабильность отображения**, в том числе в наиболее требовательных к вёрстке email-клиентах.

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

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

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

В статье рассказываем, как фреймворк TJML от Pixcraft упрощает вёрстку писем, какие функции делают работу с ним ещё более удобной и как ускорить процесс с помощью специальной версии ChatGPT.

small_изображение1 (1).png

thumbnail_изображение1 (1).png

cov_pic_1.png

Фреймворк TJML: как в 2025 году верстать письма быстро и просто

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

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

## Зачем добавлять таймер в письмо
Таймеры усиливают сценарии коммуникации, переводя дедлайн из расплывчатого обещания в измеримую величину. Время воспринимается как ограниченный ресурс, а подписчики получают повод действовать незамедлительно: возникает так называемый **Fear of Missing Out** (страх упустить выгоду), за счёт которого становится труднее откладывать решение «на потом».

Ниже — маркетинговые сценарии, где таймеры наиболее эффективны.

<Table>
| Сценарий | Польза таймеров |
| --------- | ---------------------------------- |
| **Срочные акции и распродажи** | Формулировки вида «Акция закончится через 5 часов 27 минут» стимулируют к покупке и усиливают ощущение эксклюзивности. В комбинации с дополнительной выгодой (например, скидкой или бонусом) растёт вероятность конверсии. |
| **Лимитированные предложения** | Такие сценарии, как промокод с датой истечения, бесплатная доставка «при заказе до 22:00» или ранний доступ к продукту требуют точных рамок. Таймер фиксирует границы времени, подталкивая подписчика к действию. |
| **Мероприятия (вебинары, онлайн-курсы и другие события)** | Надпись «До начала осталось 04:30:12» побуждает скорее завершить регистрацию, чтобы забронировать место (особенно когда их количество ограничено). |
| **Оформление заказа или подписки** | Таймер помогает в ситуациях, когда клиент сомневается перед решением. Сообщение «Оформите заказ в течение 2 часов и получите подарок» сочетает дедлайн с выгодой и действует эффективнее, чем абстрактное «Поторопитесь». |
</Table>

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

Подход считается классическим, но имеет значительные ограничения:

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

**2. Кэширование изображений в почтовых клиентах.** Почтовые сервисы ускоряют загрузку писем за счёт кэша. Но в случае с GIF-таймерами при повторном просмотре читатель увидит не отсчёт в реальном времени, а кэшированное значение. 

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

**3. Длительность и вес анимации.** Размер GIF-файлов растёт вместе с числом кадров и плавностью анимации. Чтобы уложиться в допустимые рамки, длину цикла обычно ограничивают 10–20 секундами. Спустя некоторое время анимация перестаёт воспроизводиться или начинается заново.

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

### amp-timeago
`amp-timeago` — это стандартный amp-компонент для отображения относительного времени в текстовом виде. Он выводит простые значения в зависимости от указанной даты, например, «через 16 часов», «через 3 месяца» или «через год».

<Img
img="/api/uploads/01_timeagoexmp_693c36a831.png"
alt="Компонент amp-timeago"
src="Пример отображения времени с помощью amp-timeago. Источник: amp.dev"
/>

Ключевые особенности `amp-timeago`:

- Корректно пересчитывает оставшееся время вне зависимости от момента открытия письма.<br><br>
- Прост в подключении, не содержит сложных элементов.<br><br>
- Поддерживает множество языков (по умолчанию установлена локаль `en`).

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

Несмотря на это, `amp-timeago` подходит, когда необходимо просто проинформировать аудиторию. К примеру, его можно использовать в технических уведомлениях, таких как «Подтвердите заказ в течение 2 часов» или «Подписка автоматически продлится через 3 дня». Однако в маркетинговых письмах он не заменит полноценный таймер, ориентированный на вовлечение и конверсии.

## Как работает AMP-таймер от Pixcraft

Pixcraft предлагает альтернативу привычным GIF-таймерам и `amp-timeago`. Вместо потоковой генерации картинок задействуется лёгкая AMP-механика, а сам таймер формируется прямо в письме. Это обеспечивает полноценное отображение счётчика времени и стабильную работу без тяжёлых файлов и проблем с кэшированием.

<Img
img="/api/uploads/02_timeranim_ac2a926f74.gif"
alt="AMP-таймер Pixcraft"
/>

### Общая логика работы AMP-таймера

Каждый фрагмент таймера представляет собой отдельную AMP-карусель. Отсчёт оставшегося времени привязан к установленному дедлайну. Например, если финальной точкой станет 31 декабря 2025 года в 23:59, то значение будет выглядеть так: 

```xml
src="https://app.pixcraft.io/api/timer?date=2025-12-31&time=23-59"
```

Сервер Pixcraft возвращает текущее состояние обратного отсчёта, а письмо рендерит его через AMP-компоненты. Числа визуализируются в рассылке и создают эффект тикающего таймера.

В основе компонента лежат: 

- **amp-list** — делает запрос к серверу и получает данные о том, сколько времени осталось до дедлайна.<br><br>
- **amp-mustache** — подставляет полученные данные в шаблон письма.<br><br>
- **amp-carousel** — визуально перелистывает часы, минуты или секунды.

### Как отображаются часы

Сервер возвращает два значения:

- `hours.i0` — текущее количество часов до дедлайна.<br><br>
- `hours.i1` — следующее значение (уменьшенное на 1).

То есть, если до конца акции осталось 2 часа 30 минут, то `hours.i0` будет иметь значение «2», а `hours.i1` — «1». Эти значения перелистываются в карусели: сначала показывается «2», а когда текущий час заканчивается, происходит автопереключение `hours.i0` на «1» и `hours.i1` — на «0» . Тайминг перелистывания задаётся параметром `delay="{{ hour_left }}"`: он определяет время, оставшееся до конца текущего часа.

### Как отображаются минуты

Здесь формируется массив из 60 элементов (от `minutes.i0` до `minutes.i59`), а карусель перелистывает каждую минуту с задержкой **60 000 мс**. При этом, чтобы время было корректным, первой позицией в массиве автоматически становится не «нулевая», а текущая минута относительно дедлайна. 

К примеру, если до финальной точки остаётся 1 час 30 минут, логика будет работать следующим образом:

- В массиве первым идёт значение `30`.<br><br>
- Далее значение меняется каждую минуту: `29`, `28` и далее до `0`. Затем оно переключается на `59`, после на `58` и так до `31`.<br><br>
- После этого отсчёт начинается заново с `30`. Таким образом возможно зациклить корректный ход времени в минутах.

### Как отображаются секунды

Для простоты и надёжности секунды реализованы как **циклическая имитация**, где ежесекундно происходит переключение числовых значений. Карусель секунд всегда начинается с `59`, после чего значение меняется на `58`, `57` и вплоть до `00`, а затем снова возвращается к `59`. 

### Что происходит после дедлайна

Общую задержку до дедлайна контролирует элемент `time_left`. Он управляет моментом, когда таймер по истечении времени должен сменить состояние. В отличие от GIF-анимации, здесь отсчёт **меняется на другой блок**, в рамках которого можно задействовать новый сценарий. Например:

- Показать лаконичное сообщение: «Акция завершилась».<br><br>
- Предложить альтернативу: «Глобальная распродажа закончилась, но доступна подборка со скидками до −30%» и кнопка на актуальный раздел.

<Img
img="/api/uploads/03_timerfin_992c22276f.png"
alt="Финальный слайд AMP-таймера Pixcraft"
/>

## Сильные и слабые стороны AMP-таймера

Таймер от Pixcraft предлагает заметные преимущества, которые делают его полезным инструментом для email-маркетинга:

- **Точность и устойчивость отображения.** AMP-таймер не зависит от кэширования изображений. Счётчик показывает актуальные данные даже после закрытия письма и возвращения к нему спустя время.<br><br>
- **Лёгкий вес.** Формирование таймера не требует рендеринга десятков кадров GIF-анимации. Это позволяет значительно ускорить процесс загрузки письма.<br><br>
- **Контроль над состоянием после дедлайна.** AMP-решение позволяет заранее прописать сценарий окончания акции: от простого сообщения до более сложных подходов.

Однако вместе с плюсами у AMP-таймера есть и ограничения, о которых следует помнить:

- **Условные секунды.** Секундная карусель стартует с `59` независимо от системного времени: настроить кастомное отображение первой секунды на текущий момент нельзя. Но хотя в инженерном смысле это компромисс, визуально эффект выглядит естественно и отлично подходит для маркетинговых задач.<br><br>
- **Необходимость поддержки AMP.** Таймер работает только в тех почтовых клиентах, которые совместимы с технологией AMP (например, Mail.ru, Gmail, Yahoo и AOL). Для остальных клиентов следует предусмотреть fallback: статичный блок или классическую GIF-анимацию.

## Как включить AMP-таймер в письмо

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

▶️ [**Забрать код AMP-таймера от Pixcraft**](https://codepen.io/Todd-the-flexboxer/pen/pvgRXjP)

<Img
img="/api/uploads/04_codeexampl_e449534934.png"
alt="Код AMP-таймера Pixcraft"
/>

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

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

В скором времени таймер будет доступен прямо в интерфейсе Pixcraft. Однако вы можете подключить его через код и сделать письма конверсионно сильнее уже сегодня.

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

В статье расскажем о том, как работает AMP-таймер от Pixcraft, в чём его преимущества по сравнению с другими типами таймеров и как включить его в ваши email-рассылки.

small_timer_covr.png

thumbnail_timer_covr.png

timer_covr.png

AMP-таймер от Pixcraft: чем он полезен и как добавить его в рассылку 

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

Для этой цели в Pixcraft предусмотрен особый компонент — **AMP-forward-link**. В статье рассмотрим его подробнее: что он собой представляет, как работает в письмах и как вы сможете включить его в свои рассылки.

## Что такое AMP-forward-link
С этим AMP-компонентом весь процесс подтверждения действия переносится внутрь письма. Кнопка работает без перенаправлений и открытия новых вкладок: фактически пользователь отправляет форму, а переход происходит уже на стороне сервера в фоновом режиме.

Таким образом, подтверждение действий в письме становится:

- **более удобным** — обеспечивается быстрый отклик, исключаются лишние клики и необходимость переходить на сайт;<br><br>
- **более надёжным** — риск потерять внимание читателя на промежуточных шагах сводится к минимуму.

## Для чего AMP-forward-link используется на практике
Ниже рассмотрим три базовых возможности применения **AMP-forward-link**, которые позволят извлечь максимум пользы из этого компонента.

### Подтверждение подписки (Double Opt-In)
Типовой сценарий, где **AMP-forward-link** особенно уместен. Получатель открывает письмо и нажимает «Подтвердить». Компонент определяет действие и тут же показывает сообщение об успешном завершении процесса (например: «Готово! Подписка активирована»). С позиции пользователя всё выглядит максимально просто: одно нажатие, быстрая реакция и обновление статуса.

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

- **Интересы для сегментации**. Получатель сам выбирает наиболее интересные для себя рубрики будущих рассылок из нескольких категорий. За счёт этого база сегментируется по интересам, а подписчик получает релевантный контент с первого дня, что способно повлиять на открываемость и снизить риск отписки.<br><br>
- **Расширение профиля**. Письма с подтверждением подписки традиционно показывают очень высокие OR и CTR. Когда пользователь нажал кнопку и подтвердил подписку, его внимание уже сосредоточено на бренде. В этот момент можно аккуратно предложить заполнить дополнительные данные о себе — имя, номер телефона или другую информацию.<br><br>
Эффективность такого подхода демонстрируется на практике. Например, после подтверждения подписки Everyday Horoscopes предложил пользователям указать номер телефона. В результате конверсия **превысила 40%**, то есть поделиться номером согласился почти каждый второй подписчик.

<Img
img="/api/uploads/01_horocexamp_f23f7b8b78.png"
alt="Ввод номера после подтверждения адреса"
/>

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

Это полезно тем, что: 

- вы сразу получаете структурированную причину отказа, которая может пригодиться для дальнейшей аналитики;<br><br>
- прямо в письме можно предложить мягкую альтернативу: сократить частоту рассылок, поменять тематику или оставить только критически важные уведомления. Так вы сможете сохранить часть аудитории.

## Как создать AMP-forward-link в Pixcraft
Аналогично другим AMP-компонентам, процесс создания **AMP-forward-link** начинается с меню **«Компоненты»** в рабочем пространстве вашего профиля.

<Img
img="/api/uploads/02_moyoprostr_ab881c470b.png"
alt="Рабочее пространство профиля в Pixcraft"
/>

Нажмите **«Новый компонент»** и в списке доступных типов выберите **Link**. После этого система предложит заполнить:

- **Название.** Укажите любое подходящее имя компонента, например, «Подтверждение подписки» или «Отписка с обратной связью». Это упростит навигацию в будущем.<br><br>
- **Описание.** Опционально добавьте пояснение, к примеру, для чего или в какой именно кампании задействуется этот компонент. Поле можно оставить пустым, но оно будет полезно для более точного понимания сценариев использования, особенно если над проектами работают сразу несколько пользователей.

<Img
img="/api/uploads/03_sozdssylk_0a0d68a659.png"
alt="Создание компонента в Pixcraft"
/>

Далее нажмите **«Создать компонент»**, после чего откроется новая страница с настройками. В отличие от других компонентов со множеством опций, таких как [**формы**](https://pixcraft.io/ru/blog/kak-sozdavat-i-ispolzovat-formy-v-pisme) или [**«Живая лента»**](https://pixcraft.io/ru/blog/zhivaya-lenta-v-amp-rassylkah-novyj-uroven-vovlecheniya), у **AMP-forward-link** необходимо указать только два обязательных значения:

**1. Сообщение об успешной отправке.** Это текст, который увидит пользователь сразу после подтверждения действия. Он может быть лаконичным («Спасибо, ваша подписка подтверждена!») или более развернутым, с дополнительными инструкциями или приглашением к следующему шагу.<br><br>
**2. Домен для ссылок.** Здесь указывается домен confirm-ссылки. Обратите внимание: если ваш ESP использует систему трекинга кликов, домен может подменяться при отправке письма.

<Img
img="/api/uploads/04_ukazdomen_bc19221963.png"
alt="Настройка компонента в Pixcraft"
/>

Механика работы **AMP-forward-link** построена на отправке формы и фиксирует действие напрямую через ссылку подтверждения. Это значит, что нет необходимости связывать письмо с внешними системами через вебхуки или настраивать дополнительные серверные события.

Как только параметры заполнены, нажмите **«Сохранить»**. Система перенаправит вас на следующий экран, где будут доступны **Action-xhr** (URL, на который уходит запрос при нажатии кнопки подтверждения), готовый к работе **HTML-код**, а также более компактная **TJML-версия кода**.

## Структура сгенерированного кода
HTML-код состоит из двух частей: блок для шапки письма `<head>` и блок для тела письма `<body>`. В блоке `<head>` подключаются обязательные AMP-скрипты, которые обеспечивают корректную работу формы, обработку действий пользователя и отображение сообщений.

Однако вся основная логика работы компонента формируется в `<body>`. Именно здесь размещается форма с атрибутом `action-xhr`:

```xml
<form method="POST" action-xhr="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
```

Запрос обрабатывается на стороне Pixcraft. В свою очередь, параметр `on="submit-success: AMP.setState(...)"` определяет, что произойдёт после успешного выполнения действия.

**Ключевым элементом AMP-forward-link является передача самой ссылки подтверждения.** Это делается через скрытое поле `input` с `name=”link”`:

```xml
<input type="hidden" name="link" value="${confirm}">
```

Здесь `${confirm}` необходимо заменить на подстановку ссылки подтверждения в синтаксисе вашей платформы.

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

```xml
 <div class="loading" submitting>
        Loading...
  </div>
```

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

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

В сравнении с HTML он предлагает такие преимущества:

- **Компактность.** Код TJML выглядит короче и легче, чем AMP-HTML-реализация.<br><br>
- **Автоматизация.** В отличие от HTML-версии, здесь не требуется вручную подключать `amp-bind`, `amp-form` и `amp-mustache`.

TJML-код для **AMP-forward-link** выглядит следующим образом:

```xml
<m-form action="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
  <div data-amp-hidden="confFormXXXX">
    <m-button bgcolor="#7D4DA3">Confirm Subscription</m-button>
    <input type="hidden" name="link" value="${confirm}">
  </div>
  <m-form-success>[[success]]</m-form-success>
  <div class="loading" submitting>
        Loading...
  </div>
</m-form>
```

Включить **AMP-forward-link** в рассылки легко: просто встройте готовый код в письмо. После того, как рассылка будет запущена в работу, вы сможете:

- **отслеживать,** сколько пользователей подтвердили действие через письмо;<br><br>
- **собирать и анализировать дополнительные данные,** если в письме предусмотрен второй экран с формой.

## Заключение
**AMP-forward-link** добавляет в письма расширенную возможность подтверждения действий. Благодаря Pixcraft создать компонент и использовать его как часть email-кампаний возможно без сложной разработки: достаточно вставить готовый код в существующий шаблон письма.

[**Попробуйте Pixcraft**](https://app.pixcraft.io/user/register) бесплатно в течение 14 дней и оцените все возможности нашего визуального конструктора писем. А если вы хотите прокачать навыки в email-маркетинге — загляните в наш [**Telegram-канал**](https://t.me/pixcraft_io). Там мы делимся полезными материалами, лайфхаками и идеями для работы.

В статье расскажем о том, как подтверждать действия в письмах без перехода на сайт с помощью компонента AMP-forward-link и как создать этот компонент в конструкторе писем Pixcraft.

small_image (1).png

thumbnail_image (1).png

image (1).png

AMP-forward-link: как подтверждать действия в письме, не покидая почтового клиента

Рассказываем, как с помощью компонента «Живая лента» добавить возможность оставлять комментарии прямо в письме и превратить рассылку в пространство для общения. 

small_cov_pic (1).png

thumbnail_cov_pic (1).png

cov_pic (1).png

«Живая лента» в AMP-рассылках: новый уровень вовлечения

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

small_image (2) (1).png

thumbnail_image (2) (1).png

image (2) (1).png

Beefree vs Pixcraft: что выбрать для ваших email-рассылок

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

small_image (1) (1) (1).png

thumbnail_image (1) (1) (1).png

image (1) (1) (1).png

Как использовать динамический контент в email-рассылках

Хотите узнать, насколько аудитория довольна вашим продуктом и готова его рекомендовать? В этом поможет **NPS‑опрос** — быстрый способ понять реальную картину клиентского восприятия.

В этой статье расскажем, как работают NPS-опросы, а также как быстро и наглядно настроить их в email-рассылке с помощью **Pixcraft**.
## Что такое NPS
**Net Promoter Score** — это индекс лояльности клиентов, который показывает, насколько они готовы рекомендовать ваш продукт или компанию своему окружению. Он позволяет измерить уровень доверия и удовлетворённости без использования длинных анкет.

Методика проста: вы задаёте ключевой вопрос, например, «Насколько вероятно, что вы порекомендуете наш продукт другу или коллеге?». Клиент выбирает оценку и в зависимости от ответа попадает в одну из трёх категорий.
<br><br>
<Table>
| Категория  | Описание               |
| --------- | ------------------------ |
| **Промоутеры (оценка 9–10)** | В полной мере довольны продуктом и готовы активно рекомендовать его другим. Часто именно они становятся «неофициальными амбассадорами» бренда: делятся положительными отзывами и приводят новых пользователей. |
| **Нейтралы (оценка 7–8)** | Не испытывают явного недовольства, но и не проявляют яркого энтузиазма. Они продолжают пользоваться продуктом, но не видят весомой причины делиться опытом. Если почувствуют, что качество продукта стало хуже, могут легко перейти к конкурентам. |
| **Критики (оценка 0–6)** | Недовольные клиенты, у которых возникают проблемы с продуктом, сервисом или коммуникацией. Их мнения особенно важны: именно они чаще других делятся отзывами, а негативные отклики напрямую влияют на репутацию и могут показать слабые места продукта или сервиса. |
</Table>
<br><br>
Значение рассчитывается путём вычитания числа Критиков из числа Промоутеров. Например, если 50% опрошенных поставили оценку 10 или 9, а 20% — от 0 до 6, то NPS будет равен **50 – 20 = 30**. Чем выше показатель, тем лояльнее ваша клиентская база и больше шансов на органический рост бизнеса за счёт рекомендаций.

NPS может быть отрицательным. В таком случае это повод немедленно выяснить, чем именно недовольны клиенты и как это можно исправить.
## Зачем бизнесу знать NPS
NPS-опросы не просто дают общее представление о клиентской лояльности, а позволяют компаниям заранее видеть риски, находить зоны роста и действовать на опережение.

Вот что делает NPS полезным для бизнеса:

- **Понимание реального клиентского восприятия**. Цифры продаж или посещаемость сайта не всегда отражают настроение клиентов. NPS показывает, насколько аудитория в действительности довольна вашим продуктом.

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

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

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

Встраивать NPS-опросы можно непосредственно в email-кампании. Это даёт бизнесу уникальные преимущества:

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

- **Анализ динамики на разных этапах пути клиента**. Вы можете увидеть, как меняется отношение пользователя к продукту в разных кампаниях и на каких точках соприкосновения возникают риски оттока.

- **Сегментация и автоматизация действий**. Оценки позволяют автоматически сегментировать аудиторию на Промоутеров, Нейтралов и Критиков. Впоследствии вы сможете запускать для каждой группы персонализированные сценарии, такие как бонусы или удерживающие кампании.

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

Особое внимание стоит уделять сопровождающим комментариям. За числовой оценкой может скрываться конкретная проблема или инсайт, который поможет вам улучшить продукт и удержать клиентов.
## Как реализовать NPS-опрос в Pixcraft
В Pixcraft есть два подхода к созданию NPS-опросов: быстрое добавление AMP-формы прямо в шаблон письма через визуальный редактор и создание отдельного AMP-компонента. Рассмотрим подробнее каждый из них.
### AMP-форма в письме
Если требуется оперативно собрать NPS-опрос, добавьте интерактивную AMP-форму в шаблон. Этот способ отлично подходит для срочных рассылок и позволяет создать форму опроса без сложной подготовки. 

Пошагово процесс выглядит так:

- На панели слева нажмите «Плюс» и перенесите примитив «Форма» в необходимое место на шаблоне.

- Выберите тип вашей формы. Для NPS-опросов подходит Radio — выбор единственного варианта из нескольких предложенных.

<Img
img="/api/uploads/01_label_3257ee1f5e.png"
alt="Выбор типа и опций формы"
/>

- Настройте ваш NPS-опрос. Добавьте числовую шкалу или другие варианты выбора, короткий вопрос (например, «Насколько вероятно, что вы порекомендуете нас?») и добавьте призыв к действию (call-to-action) на кнопку.

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

<Img
img="/api/uploads/02_opros_fbaf8c1f06.png"
alt="Готовый NPS-опрос"
/>

### Отдельный AMP-компонент
Вы также можете собрать компонент вручную и встроить его в готовый шаблон. Это удобно, если у вас уже есть HTML‑письмо, которое вы хотите дополнить интерактивным опросом. Достаточно пропустить письмо через [**конвертер Pixcraft**](https://pixcraft.io/ru/converter), чтобы получить готовую AMP‑версию, в которую можно легко добавить NPS‑форму или другой интерактивный элемент.

Вот как создать отдельный AMP-компонент в Pixcraft:

- Перейдите в раздел «Компоненты» и нажмите «Новый компонент». Откроется окно, где можно указать название и описание, а также выбрать тип компонента.

<Img
img="/api/uploads/03_komponent_77585b8ac6.png"
alt="Экран создания компонента"
/>

- Выберите заготовку формы. Для NPS-опроса подойдёт **Rating** или **Custom**. Rating сразу создаст простую числовую шкалу, а Custom предоставит пустую форму, которую можно заполнить необходимыми полями: особенно полезно, если вы хотите включить не только опрос, но также поле для комментария.

- Настройте содержимое формы. Добавьте текст, шкалу оценок, сообщение об успешной отправке и, если потребуется, дополнительные элементы.

<Img
img="/api/uploads/04_nastroika_27d363089c.png"
alt="Настройка форма опроса"
/>

- Нажмите «Сохранить». Вы получите готовый код HTML (AMP), а также [**TJML**](https://pixcraft.io/ru/framework), которые можно кастомизировать по своему усмотрению.

<Img
img="/api/uploads/05_kod_457def3720.png"
alt="HTML-код формы опроса"
/>

Чтобы подключить опрос к вашему письму, добавьте в него сгенерированный код формы. Для корректной работы также необходимо подключить скрипты ```amp-bind```, ```amp-form``` и ```amp-mustache```.

В Pixcraft будут сохраняться только значения полей, имена которых соответствуют указанным в коде. Все остальные атрибуты, параметры и расположения можно менять в соответствии с вашим макетом.
## Отправка и обработка полученных данных
Когда пользователь заполняет и отправляет NPS-опрос, все значения автоматически фиксируются в Pixcraft. Собранные ответы можно:

- экспортировать в **CSV-файл** или отправлять в **Google Таблицы** для ручного анализа или загрузки в аналитику;

- передавать во внешние системы через **вебхуки** (автоматические оповещения о событиях в системе).

Вебхуки позволяют передавать результаты опроса на указанный вами URL-адрес сразу после отправки формы пользователем. Для этого необходимо их настроить:

- Откройте ваш компонент формы.

- Перейдите в раздел «Подключение» и в поле Webhook укажите URL, на который должны отправляться данные.

<Img
img="/api/uploads/06_webhooks_9c75a13948.png"
alt="Поле Webhook "
/>

- После того, как пользователь заполнит и отправит форму, Pixcraft сформирует и передаст POST-запрос с данными формы на указанный адрес.

Важно учитывать, что **Pixcraft не рассчитывает сам индекс NPS**. Для этого вам нужно будет настроить свою логику обработки данных в Excel, Google Таблицах или BI-инструментах.
## Альтернатива: HTML-версия
Некоторые почтовые клиенты, такие как Microsoft Outlook и Apple Mail, не поддерживают [**AMP‑письма**](https://pixcraft.io/ru/blog/kak-vnedrit-amp-pisma-v-vashu-email-strategiyu). Чтобы не потерять обратную связь, стоит дополнительно подготовить HTML‑версию. В ней вместо AMP‑формы отображается отдельная ссылка, кнопка или изображение, которые при клике ведут на веб‑форму опроса.

В качестве решения можно создать веб-версию AMP‑письма или воспользоваться сервисом [**Altcraft**](https://altcraft.com/ru), который позволяет легко развернуть веб‑форму NPS и автоматически собирать аналитику. Вот как это работает:

- **Создание формы**. В разделе «Веб‑слой» выберите «Формы» и нажмите «Создать». Укажите имя, описание и идентификатор формы. Активируйте переключатель «Опубликована», чтобы форма получила URL или стала доступна как iframe. Настройте дополнительные параметры, такие как финальная страница и ограничение на повторное заполнение.

- **Добавление NPS‑элемента**. Во вкладке «Конструктор» добавьте элемент «NPS‑опрос». Настройте заголовок, оценки и символы для шкалы. При необходимости добавьте поле комментария и сделайте опрос обязательным. Сохраните и опубликуйте форму.

- **Размещение ссылки в письме**. В Pixcraft HTML‑версия письма создаётся автоматически. Сюда рядом с AMP‑формой можно добавить визуальный элемент со ссылкой на веб‑форму Altcraft. Для элемента задайте параметр «Отображать → HTML». Это позволит отображать альтернативный вариант для email-клиентов, не поддерживающих AMP-компоненты.

<Img
img="/api/uploads/07_otobrajenie_33aac75a1e.png"
alt="Переключатель отображения элемента в Pixcraft"
/>

- **Сбор и аналитика данных**. Altcraft автоматически собирает ответы и рассчитывает индекс NPS. В разделе «Аналитика» формы можно увидеть общий NPS, распределение по группам (Промоутеры, Нейтралы, Критики) и динамику показателя.

## Заключение
Чем скорее вы внедрите NPS в ваши коммуникации, тем больше возможностей откроется как для понимания аудитории, так и для улучшения продукта. С помощью Pixcraft настроить NPS-опрос можно всего за несколько минут. Задайте клиентам простой вопрос — и получите ценные ответы, которые помогут вам расти.

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

В статье рассказываем, что такое NPS-опросы, чем они полезны и как их реализовать в email-рассылках с помощью Pixcraft.

small_Обложка (2).png

thumbnail_Обложка (2).png

Обложка (2).png

NPS-опросы: зачем они нужны и как их реализовать в Pixcraft

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

small_Обложка (1).png

thumbnail_Обложка (1).png

Обложка (1).png

Новые возможности Pixcraft: как мы улучшили редактор писем

Как запустить ИИ-генератор изображений Stable Diffusion на своём компьютере: инструкция, основные функции и советы по генерации.