An email campaign is much more than just text and visuals. Under the hood, there’s always the template’s code that determines how the message is built, delivered, and rendered in the inbox. Among the most important technical parameters is email size, also called its weight.

But what does the term “email weight” actually mean, and what should you pay attention to so that the technical implementation remains aligned with the creative concept? Let’s break it down.

## What Counts Toward Email Size

To put it simply, email weight is the size of its HTML part. If an AMPHTML part is used, it’s also taken into account. This is strictly the number of bytes in the code, not how many “screens” the email takes up visually. A short-looking message can be heavy in code, and vice versa, a long one can be surprisingly light.

Two emails that look almost identical at a glance may differ in weight depending on how they were built. Size is mainly influenced by:

- HTML markup (tables, wrappers, nested blocks, comments);<br><br>
- CSS (rules inside `<style>` plus inline styles in element attributes);<br><br>
- text content (headings, paragraphs, buttons, footnotes);<br><br>
- links, tracking pixels, and hidden technical blocks.

Images and [**animations**](https://pixcraft.io/blog/animation-in-email-newsletters-guidelines-for-reliable-display) are not included in this weight calculation. Email clients fetch media separately after they process the markup. Still, media optimization matters, because file size affects what the recipient sees in the first seconds after opening:

- Large images take longer to load, especially on slow connections and in image-heavy emails.<br><br>
- Until images load, recipients see blank areas or placeholders.<br><br>
- If the main visual component appears too late, the first impression suffers.

So even though graphics don’t add to the HTML weight, optimizing them remains an important part of solid email production.

## What Limits the Maximum Email Size

### Gmail’s HTML Size Limit

[**Many email clients**](https://www.dailystory.com/blog/html-email-clipping-limits-across-different-mailbox-providers/) don’t have a strict maximum email size. Gmail is one of the notable exceptions: it caps the HTML part at **102 KB**.

If this threshold is exceeded, Gmail automatically clips the email and hides the lower portion behind a “View entire message” link. The full content becomes visible only after the recipient takes an extra action.

<Img
img="/api/uploads/01_msgclpd_ac0564ca2b.png"
alt="Clipped message in Gmail"
/>

As a result, this may affect both user experience and email performance:

- Even if only the footer gets clipped, that’s where contact info, legal text, and the “Unsubscribe” link are often located. If recipients can’t quickly find a clear way to opt out, the “Report spam” button becomes one of the few remaining options.<br><br>
- Tracking pixels that detect email opens are typically placed near the bottom of an email as well. If that section is clipped and not displayed, opens won’t register and analytics will become distorted. On top of that, if an automated [**communication sequence**](https://pixcraft.io/blog/must-have-email-sequences-every-business-should-be-using) depends on whether the email was opened or not, errors will ripple through subsequent steps.

### AMP Size Limits

AMP content has its own constraints, defined in the [**AMP for Email specification**](https://amp.dev/documentation/guides-and-tutorials/email/learn/email-spec/amp-email-format):

- AMPHTML part: up to **200,000 bytes** (about 195 KB).<br><br>
- CSS inside `<style amp-custom>`: up to **50,000 bytes** (about 48 KB).

If either limit is exceeded, the AMP content will fail validation, and the recipient will see the HTML version of the email instead. It’s important to note that these limits are set by the format itself and are checked at the AMP code validation stage.

### Spam Filtering

Email clients and anti-spam systems evaluate email campaigns using a number of signals, including code-related ones. Common factors include:

- HTML markup structure and complexity;<br><br>
- ratio of meaningful content to technical elements;<br><br>
- number of trackers and links;<br><br>
- attachments and the way they’re embedded.

Suspicion is triggered not by the email size itself but rather by the reasons it becomes heavy: bloated markup, excessive tracking, and overly complex, tangled nesting. In those cases, sending large volumes of the same email amplifies the overall negative signals during scoring.

This matters even more for bulk email campaigns. When the same “heavy” email is delivered to a large number of recipients, signals accumulate faster, which in turn affects deliverability and sender reputation.

## What Are Practical Ways to Reduce Email Weight

### Remove Unnecessary HTML Elements

Small details in the code can add up to a noticeable share of the email’s weight:

- extra spaces and tabs used to visually align the code;<br><br>
- line breaks that don’t affect rendering but increase the email size;<br><br>
- blank lines between content blocks that remain after edits or copying.

These elements don’t change the final look of an email. Therefore, at the final stage it’s worth minifying the markup: carefully removing the unnecessary fragments without changing structure or design, which can reduce the email by several kilobytes.

### Simplify the Table Structure

Tables (`<table>`, `<tr>`, `<td>`) are one of the core tools in email development and the backbone of email layout. They ensure stable and consistent rendering across various email clients. 

Still, table misuse can significantly increase code size. For example, extra weight may appear due to:

- **Excessive nesting**: tables are nested without any actual need or reason.<br><br>
- **Duplicate wrappers**: the same content is repeated across multiple tables or cells.

Practical optimization approaches include:

- **Reduce nesting depth**: if multiple table layers perform the same role, consider merging them. This reduces code size while keeping rendering stable.<br><br>
- **Use `padding` on table cells**: creating separate tables and rows just for additional spacing eventually bloats markup. In those cases, it’s preferable to set spacing via `padding` on `<td>`.

Even small but careful structural cleanups can noticeably reduce code weight, especially in long email layouts.

### Remove “Dead Code”

Templates that went through several stages of development and testing often accumulate leftover code fragments that are no longer used but remain in the email, increasing its size. Examples include:

- commented-out blocks from earlier versions of an email;<br><br>
- fragments related to already completed A/B tests;<br><br>
- hidden elements that don’t affect rendering or logic.

Removing unused code reduces size and makes the template easier to maintain. But it’s better to act with caution: some hidden elements may be required for preheaders, fallback logic, or personalization. Remove only what you’re certain is unused.

### Clean Up CSS

CSS has a noticeable impact on email size, especially after multiple rounds of edits. In this case, typical causes for extra volume include:

- repeated sets of CSS properties assigned to a number of elements without actual need;<br><br>
- rules and classes left behind from older versions;<br><br>
- auto-generated inline styles where every block gets the same set of properties.

Optimization comes down to regular style reviews: remove unused rules and reduce repetition. For [**AMP emails**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy), CSS control is particularly important because of strict size limits.

### Use TJML for Email Development

[**TJML**](https://pixcraft.io/framework) is a framework created by the Pixcraft team to make email development faster and more comfortable. It allows for creating both HTML and AMP emails using a single code base, while the resulting templates remain stable across most email clients, including Microsoft Outlook 2003–2024.

For email weight control, TJML offers the following mechanics:

- **Size checks**: the framework can calculate code size and warn the user when recommended thresholds are exceeded, providing the opportunity to fix issues before test sends and final builds.

<Img
img="/api/uploads/02_tjmlwarn_e794848c22.png"
alt="A warning about email size when using TJML"
/>

- **Code optimization**: TJML comes with a function to remove extra spaces and redundant elements that don’t affect rendering. As a result, you get a smaller email template that still renders correctly.

Read [**this article**](https://pixcraft.io/blog/tjml-framework-how-to-create-emails-quickly-and-easily) to learn more about the TJML framework, its features, and how it speeds up email development.

### Check Email Size After the Final Build

During the sending stage, ESPs and CDPs typically wrap links in tracking redirects. Each link gains extra parameters, making it longer and increasing the overall markup size. Therefore, an email that fits the limits during development may exceed them after processing.

A reliable approach here is to send a test email and inspect the message in its “finalized” form. This helps reduce the risk of Gmail clipping and AMP validation errors.

## Conclusion

Email weight isn’t a theoretical metric. It impacts analytics, deliverability, and how a campaign is perceived after it’s opened. Treat size control as part of template production: organize markup and CSS, and verify the final HTML after your ESP or CDP processes it.

Let's take a look at what email size is, what it includes, which factors can limit the maximum email weight, and how to optimize the size of email campaigns.

small_emailwght_cov.png

thumbnail_emailwght_cov.png

emailwght_cov.png

Email Size: What Affects the Weight of Email Campaigns and How to Optimize It

People skim through emails within seconds, and any movement instantly draws attention. Even a simple yet well-placed animation can make a message feel more vivid.

At the same time, adding animation raises a lot of questions, including:

- What types of emails can be enhanced with animation?<br><br>
- How to make an email bright and dynamic without overloading it?<br><br>
- Will the element behave consistently across different email clients?

In this article, we’ll take a look at the possibilities and limitations of animation in newsletters, and how to work with it to achieve the best possible display quality in email campaigns.

## How Animation Benefits Email

The main purpose of animated elements is to make a newsletter more expressive and engaging. Motion attracts attention more effectively than a static image and, when used wisely, strengthens the overall impression.

Animation fits a wide range of scenarios and email formats:

- **Promotional emails.** An animated banner can highlight the benefit and make an offer stand out visually. A [**countdown timer**](https://pixcraft.io/blog/amp-countdown-timer-by-pixcraft-how-to-use), in turn, pushes the reader to act fast while the promotion is still active.<br><br>
- **Onboarding.** A short interface demo in a welcome email shows how the service works: which features are available, how they behave, and what to do next. A new user immediately sees the product in action and grasps its structure faster.<br><br>
- **Digests.** If the message doesn't require a full-fledged [**dynamic product card**](https://pixcraft.io/blog/dynamic-product-cards-how-they-work-in-the-pixcraft-editor), a compact animation can be used to highlight individual items. For instance, it might show a new product from several angles or draw attention to a discounted item.<br><br>
- **Service emails.** Animated elements also work well in transactional messages. They can be used to illustrate order progress, for example, handover to a courier or delivery to a pickup point.

<Img
img="/api/uploads/01_trnsctnlanimexm_0db7bae6fb.gif"
alt="Animation in a transactional email"
src="Source: Really Good Emails"
/>

## How to Add Animation to Email Newsletters

Two most common ways to add motion to emails are GIF and AMP. Understanding their specifics helps to choose the right option for a particular scenario.

### GIF

GIF is the classic format for animated elements. It’s supported by most email clients and usually behaves predictably. Still, if you want GIFs in emails to work as intended, several important points must be taken into account.

- **File size.** For newsletters, short and lightweight GIFs are the most practical option. It’s generally recommended to keep the file size **under 1 MB** so that the message loads faster.<br><br>
- **Colors and detail.** The format supports **only 256 colors**. Therefore, complex gradients and smooth transitions between frames lose quality during compression. For a clean result, it’s better to use simple shapes, backgrounds, and outlines.<br><br>
- **Alt text.** This short text acts as a safety net when an element doesn't load because of a slow connection or filters in the email client. A concise description preserves the logic of the message and tells the reader what the contents of the animation are.

### AMP

AMP expands the possibilities for building email templates by adding interactive elements. It can be used to create swipeable galleries, [**interactive surveys**](https://pixcraft.io/blog/nps-surveys-whats-their-purpose-and-how-to-implement-them-in-pixcraft), and rich visual scenarios not available in classic HTML.

AMP also works with traditional GIF animation. Two components are used for this:

- `amp-img`;<br><br>
- `amp-anim`. 

Both can handle GIF files, but `amp-anim` is a specialized component with one important advantage: the animation runs only while the element is visible on the screen. As soon as the user scrolls past it, `amp-anim` stops playback and reduces the load on resources, which is especially useful in long newsletters and on mobile devices.

You can also use a static placeholder image inside the component. It appears before the GIF loads and prevents an empty area in case of a slow connection or a heavy file.

The element supports CSS styling and fits into the layout like any other AMP component. Here is an example of `amp-anim` markup:

```xml
<amp-anim width="500" height="400" src="animation.gif">
  <amp-img placeholder width="500" height="400" src="placeholder.jpg">
  </amp-img>
</amp-anim>
```

## How Animation Works in the Pixcraft Visual Editor

Adding an animated element to an email template in Pixcraft is as simple as inserting a regular illustration. Simply drag the “Image” primitive onto the canvas and upload a file from your device or specify a URL. The GIF becomes part of the email without extra actions and immediately appears in the layout.

<Img
img="/api/uploads/02_animhrtexmp_d6d2d591a9.gif"
alt="Animation in Pixcraft"
/>

After that, it can be configured in the same way as any other image. The panel on the right contains parameters that define its appearance and behavior:

- width and height;<br><br>
- alignment, corner radius, and margins;<br><br>
- border thickness, texture, and color;<br><br>
- external link;<br><br>
- alt text.

<Img
img="/api/uploads/03_animsttngs_56a663c219.png"
alt="Setting up image properties in Pixcraft"
/>

You can check how the element behaves under different conditions using the preview function. It shows how the email looks on desktop and mobile, as well as in light and dark mode.

Preview is especially important for animations with fine details that may blend into the background or disappear when scaled down. At this stage, you can spot such issues and adjust the image before sending the campaign.

<Img
img="/api/uploads/04_prvwanim_67a6644897.gif"
alt="Email preview in Pixcraft"
/>

It’s also possible to include AMP animations in email templates. For example, you can use the built-in “Carousel” component: a scrolling image gallery that supports various image formats, including GIF.

In addition, you can insert the required elements straight into the email code after building the main structure in the visual editor. To do this:

- export the AMP version of the template;<br><br>
- open the file in a code editor;<br><br>
- add the required AMP components to the email.

## What to Keep in Mind for Animations in Emails

### Compatibility with Outlook

Although GIFs usually work smoothly in most email services, some versions of Outlook for Windows may cause issues. Because rendering is handled by the Word engine, the animation freezes on the first frame and doesn’t play further.

In this case, fallback options are required:

- use conditional comments to replace the GIF with a static image;<br><br>
- design the first frame as a complete illustration that conveys the necessary information such as the offer, promotion dates, or discounts.

### Expressiveness and Balance

Animation can be functional or decorative. In the first case, it draws attention or makes the element more informative; in the second, it sets the tone and mood. And in both roles, it needs to remain appropriate.

This means the animation should:

- support the structure of the email instead of pulling attention to areas that aren't central to the message;<br><br>
- preserve readability and clarity;<br><br>
- avoid cluttering the layout or creating visual noise.

### Limited Attention Span

People move through emails quickly and spend only a few seconds scanning the content. Under these conditions, complex, drawn-out animation often doesn't have time to unfold, and individual details go unnoticed.

Short and simple scenarios usually work better: a state change, a subtle appearance, a neat switch. The fewer objects move on the screen at once, the easier and more accurately the element is perceived.

### Performance on Small Screens

Today smartphones are the primary way to read emails, and many mobile clients support animation playback. At the same time, limited screen space becomes a separate constraint.

Before sending the email, it’s worth checking whether:

- the animation keeps its aspect ratio;<br><br>
- any text inside it remains legible;<br><br>
- the overall meaning stays clear when the animation is scaled down.

In case of issues, animated elements need to be adapted specifically for the mobile version. For example, you may enlarge important details, simplify the graphics, or, in some cases, completely replace the animation with a static frame.

## Is Video Supported in Emails (And Is It Worth Using)

Embedding video directly in an email may sound like an appealing idea, but [**only a few email clients**](https://www.caniemail.com/features/html-video/), such as Apple Mail, support this technology. In most cases, a video inside the message simply won’t play: either nothing is shown in its place, or fallback content appears instead.

Because of this, a more reliable pattern is often used. A static frame with a play icon is inserted into the message. The user clicks on it and is redirected to a page with the video, for example, the brand’s website or a video hosting platform. This scenario is stable, but it involves switching to an external resource rather than inline playback.

<Img
img="/api/uploads/05_playbttnexm_9f29c65836.png"
alt="Play button in an email"
src="Source: Really Good Emails"
/>

If the goal is to simply add motion, emphasize a detail, or make the email more visually dynamic, regular animation is usually a more effective option.

## Conclusion

Animation in emails shapes the impression that remains after reading. It’s important that the format, graphics, and small details work together as a coherent whole. Good animation doesn’t overshadow the email content; instead, it serves to support the main idea of the message. And that’s exactly where its true value lies.

This article explores how to use animation in newsletters: formats, display in email clients, and tips for working with GIF and AMP.

small_anim_eml_cover.png

thumbnail_anim_eml_cover.png

anim_eml_cover.png

Animation in Email Newsletters: Guidelines for Reliable Display

Deadlines in emails are a powerful trigger that drives readers to take action. And when the remaining time is shown visually using a countdown timer, the deadline feels more tangible, and the decision-making process accelerates dramatically.

In this article, we’ll take a look at the AMP countdown timer by Pixcraft — how it differs from other timer implementations, and how its architecture and logic work in email templates.

## Why Add a Countdown Timer to an Email
Countdown timers enhance communication scenarios by turning a vague promise into a measurable deadline. They make time feel like a limited resource, giving subscribers an immediate reason to act. Timers trigger the **Fear of Missing Out (FOMO)**, making it harder to delay a decision.

Below are some marketing scenarios where countdown timers work best.

<Table>
| Scenario | Benefits |
| --------- | ---------------------------------- |
| **Flash Sales and Limited-Time Offers** | Phrases like “The sale ends in 5 hours 27 minutes” create urgency and a sense of exclusivity. Conversion rates may increase noticeably when paired with an additional incentive such as a discount or bonus. |
| **Limited-Availability Offers** | Promos with an expiration date, free delivery “for orders placed before 10:00 PM”, or early access to a product all require clear time frames. The timer defines those boundaries visually, prompting subscribers to act. |
| **Events (Webinars, Online Courses, and More)** | A message like “Event starts in 04:30:12” encourages users to complete registration faster to secure a spot (especially when the number of seats is limited). |
| **Order or Subscription Confirmation** | Timers work well when a customer hesitates before purchasing. A phrase like “Complete your order within 2 hours and get a gift” combines urgency with value and sounds way better than a vague “Hurry up!”. |
</Table>

## Technical Limitations of Traditional Timers
### GIF Countdown Timers
For a long time, animated GIFs were the only way to show a countdown timer in emails. These timers work like this: a server generates an image showing the remaining time, and the email client loads that image when the message is opened.

While this approach is considered classic, it has some serious limitations:

**1. Resource-Intensive and Costly.** To display the correct time at the moment of opening an email, the system must generate an animation that reflects the actual remaining time. Depending on the number of opens, this may lead to generating new animations every second, which requires significant computing power and increases costs.

**2. Image Caching in Email Clients.** Email providers use caching to speed up message loading. But with GIF timers, this means that upon reopening an email, the reader sees the cached frame and not the current countdown. 

Some developers try to bypass this by adding unique query parameters or request headers, but these methods offer no guarantees. As a result, the timer often loses its main function: showing real-time countdowns.

**3. Animation Length and File Size.** The size of a GIF grows with the number of frames and animation smoothness. To stay within acceptable limits, loops are usually capped at 10–20 seconds. After that, the animation either stops or restarts.

Even short timers can weigh hundreds of kilobytes or several megabytes. When combined with banners, images, and buttons, this may significantly slow down the email’s total loading speed.

### amp-timeago
`amp-timeago` is a standard AMP component used to display relative time in text form. It shows simple time values based on a given date, such as “in 16 hours”, “in 3 months”, or “2 years ago”.

<Img
img="/api/uploads/01_timeagoexmp_693c36a831.png"
alt="amp-timeago component"
src="An example of displaying time using amp-timeago. Source: amp.dev"
/>

Key features of `amp-timeago`:

- Correctly recalculates the remaining time regardless of when the email is opened.<br><br>
- Easy to implement and doesn't require complex setup.<br><br>
- Supports multiple languages (default locale is `en`).

However, this component isn’t ideal for marketing emails where visual and emotional effects matter. It lacks animation, the sense of a “ticking clock”, and visual flexibility. In general, it looks like static text rather than a live countdown.

That said, `amp-timeago` works fine for informational or technical notifications such as “Confirm your order within 2 hours” or “Your subscription will renew in 3 days”. But when it comes to promotional campaigns focused on engagement and conversions, it cannot replace a full-featured timer.

## How the Pixcraft AMP Countdown Timer Works

Pixcraft offers an alternative to both GIF timers and `amp-timeago`. Instead of generating image streams, it uses lightweight AMP mechanics to render the countdown directly inside the email. This provides a full visual timer experience with stable performance, no heavy files, and no caching issues.

<Img
img="/api/uploads/timeanimat_c82acbde96.gif"
alt="AMP countdown timer by Pixcraft"
/>

### General Logic of the AMP Countdown Timer

Each part of the timer is built as a separate AMP carousel, with the countdown tied to a specific deadline. For instance, if the deadline is December 31, 2025, at 11:59 PM, the source link will look like this: 

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

The Pixcraft server returns the current countdown data, and the email renders it through AMP components. The numbers appear dynamically, creating the effect of a ticking clock.

Core components of the AMP timer: 

- **amp-list** — requests data from the server showing how much time is left.<br><br>
- **amp-mustache** — inserts those data into the email template.<br><br>
- **amp-carousel** — visually flips the values of hours, minutes, and seconds.

### How Hours Are Displayed

The server returns two values:

- `hours.i0` — current number of hours left.<br><br>
- `hours.i1` — next value (current hour minus one).

This means that if, for example, 2 hours and 30 minutes remain, then `hours.i0` equals “2” and `hours.i1` equals “1”. These values switch automatically inside the carousel: first “2” is shown, and when the hour ends, `hours.i0` switches to “1”, and `hours.i1` switches to “0”. The switch timing is controlled by the parameter `delay="{{ hour_left }}"`, which defines time until the end of the current hour.

### How Minutes Are Displayed

Here, a 60-element array is generated (from `minutes.i0` to `minutes.i59`), and the carousel flips every **60,000 milliseconds**. To ensure accurate display, the array starts from the current minute relative to the deadline. 

For example, if 1 hour and 30 minutes remain:

- The first value in the array is `30`.<br><br>
- It then changes every minute: `29`, `28` and so on until `0`. After that, it loops back to `59`, then switches to `58` and down to `31`, after which the cycle repeats.

This logic allows a continuous and correct minute-by-minute countdown.

### How Seconds Are Displayed

For simplicity and reliability, seconds are implemented as a **cyclic simulation**. The carousel always starts at `59`, counts down to `00`, and then loops back to `59` again.  While it doesn’t sync with the system time, visually it produces a natural ticking effect, which is perfect for marketing purposes.

### What Happens After the Deadline

The overall delay until the deadline is controlled by the `time_left` element, which determines when the timer switches states after the countdown ends. Unlike GIF animations, here the timer can seamlessly **transition to a new block**, enabling post-deadline scenarios such as:

- Showing a short message like “The offer has ended”.<br><br>
- Offering an alternative, like a message “The sitewide sale is over, but check out our special deals up to 30% off” with a button leading to the relevant section.

<Img
img="/api/uploads/finmsg_bbf9fd6258.png"
alt="Message after a deadline was reached"
/>

## Advantages and Limitations of the AMP Countdown Timer

AMP timer by Pixcraft offers practical advantages that make it useful for email campaigns:

- **Accurate and reliable time display.** The AMP timer isn’t affected by image caching. It always shows up-to-date data, even if the reader closes and reopens the email later.<br><br>
- **Lightweight.** Countdown timer by Pixcraft doesn’t require rendering dozens of animation frames, which significantly reduces email loading time.<br><br>
- **Full control after the deadline.** AMP technology allows you to define what happens when the countdown ends, from showing a simple message to adding complex scenarios.

At the same time, AMP countdown timer comes with some limitations to keep in mind:

- **Simulated seconds.** The seconds carousel starts from `59` regardless of the system time: as of now, it can’t be customized to show the exact current second. Yet while technically this is a compromise, visually it looks natural and works perfectly for marketing use.<br><br>
- **AMP support required.** The countdown timer only works in email clients that support AMP (e.g., Gmail, Yahoo, AOL, Mail.ru). For others, a fallback is required — such as a static image or traditional GIF timer.

## How to Add the AMP Countdown Timer to Your Email

The Pixcraft email builder will soon include built-in AMP countdown timer functionality, but if you want to use it right away, there’s no need to wait. We've prepared the ready-to-use code for you: just insert your desired date and time, specify the post-deadline message, customize the visual style, and add the timer to your template.

▶️ [**Get the Pixcraft AMP countdown timer code here**](https://codepen.io/Todd-the-flexboxer/pen/pvgRXjP)

<Img
img="/api/uploads/timcod_2f5058512a.png"
alt="Pixcraft AMP timer code"
/>

## Conclusion
With the AMP timer by Pixcraft, you gain a clean, dynamic countdown that transitions smoothly once the deadline arrives. The timer component will soon be available directly in the Pixcraft interface, but you can already connect it via code and start making your campaigns more engaging today.

In this article, we'll take a look at how AMP countdown timer by Pixcraft works, what are its advantages over other types of timers, and how to incorporate it into your email campaigns.

small_timer_covr.png

thumbnail_timer_covr.png

timer_covr.png

AMP Countdown Timer by Pixcraft: How to Use & What Makes It Helpful

The classic email confirmation scenario works like this: the user clicks a button and lands on a website, where the action result is recorded. But what if extra steps such as redirects and page loading were removed, and instead the recipient could complete actions directly inside the email?

For this purpose, Pixcraft provides a special component: **AMP-forward-link**. In this article, we will take a closer look at what this component is, how it works, and how you can add it to your campaigns.

## What Is AMP-forward-link
This AMP component brings the entire confirmation process inside the email itself. The button acts without redirecting the user or opening new tabs: basically, the email recipient submits a form, after which the server handles the processing in the background.

Thus, action confirmation in an email becomes:

- **More convenient** — quick response is ensured, unnecessary clicks are eliminated, and there is no need to visit an external website.<br><br>
- **More reliable** — the risk of losing the reader’s attention on intermediate steps is reduced to a minimum.

## Practical Use Cases
Let’s take a look at three basic ways to use **AMP-forward-link** that will help you get the most out of this component.

### Subscription Confirmation (Double Opt-In)
A typical scenario where **AMP-forward-link** becomes especially useful. The recipient opens the email and clicks the confirmation button. The component registers the action and immediately displays a successful completion message (for example: “Done! Subscription activated”). From the user’s perspective, everything looks as straightforward as it gets: one click, quick response, and status update.

### Collecting Additional Information
Immediately after a successful click, the email can display an extra form alongside the message. For example, it may include:

- **Categories for segmentation**. Here, the recipient chooses the most interesting categories of future newsletters. This way, the database is segmented by interests, and the subscriber receives relevant content from day one, which can increase open rates and reduce the risk of unsubscribing.<br><br>
- **Profile expansion**. Subscription confirmation emails typically achieve very high OR and CTR. When the user clicks the button and confirms the subscription, their attention is already focused on the brand. At this point, the email may gently offer to share some additional information such as name, phone number, or other details.<br><br>
This approach has already proven itself in practice. For example, after the email confirmation, Everyday Horoscopes asked users to provide their phone numbers. As a result, the conversion rate **exceeded 40%**, meaning that nearly half of subscribers agreed to share their additional contact data.

<Img
img="/api/uploads/01_horocexamp_f23f7b8b78.png"
alt="Phone number form in an email"
/>

## Unsubscription with Feedback Form
The mechanism works for both subscriptions and unsubscriptions. Here, the user clicks a button, after which the email displays not only a simple message (like “You have successfully unsubscribed”) but also a feedback form, for example, “Please share the reason why you decided to unsubscribe”.

This is useful because: 

- You immediately receive an explanation about the decision, which becomes valuable for further analysis.<br><br>
- You may offer a soft alternative right in the email. For instance, reduce the frequency of newsletters, change the topics, or keep only critical notifications. This helps to retain part of your audience.

## How to Create an AMP-forward-link Component in Pixcraft
As with other AMP components, the process of creating **AMP-forward-link** starts with the **Components** menu in your profile workspace.

<Img
img="/api/uploads/02_wrkspc_a0f9b92229.png"
alt="User workspace in Pixcraft"
/>

Click **New Component** and select **Link** from the list of available component types. After that, the system will ask you to fill in:

- **Component name.** Specify any appropriate name, for example, “Subscription Confirmation” or “Unsubscription with Feedback”. This will make the navigation easier.<br><br>
- **Component description.** You may optionally add a brief explanation, for instance, what this component is for or the campaigns where it is used. The field can be left blank, but it may prove helpful for better understanding of usage scenarios, especially when several users are working on the projects simultaneously.

<Img
img="/api/uploads/03_compcreat_3386d12497.png"
alt="Creating the component in Pixcraft"
/>

Next, click **Create Component** to open a new page that contains settings. Unlike other components such as [**Forms**](https://pixcraft.io/blog/how-to-create-and-use-forms-in-email) or [**Interactive Stream**](https://pixcraft.io/blog/interactive-stream-in-amp-emails-next-level-of-engagement) that include many different options, here you only need to specify two values for **AMP-forward-link**:

**1. Successful form submission message.** This is the text that the user will see immediately after confirming the action. It can be short (“Thank you, your subscription is confirmed!”) or more detailed, with additional instructions or an invitation to the next step.<br><br>
**2. Domain that will be used in links.** Here, you need to specify the domain of the confirmation link. Note: if your ESP uses a click-tracking system, the domain may be changed when sending the email.

<Img
img="/api/uploads/04_compset_c7e8f8a812.png"
alt="Link component settings"
/>

The **AMP-forward-link** operating principle is based on form submission and directly registers the action via the confirmation link. This means that there is no need to connect the email to external systems via webhooks or configure additional server-side events.

Once the parameters are set, click **Save**. The system will redirect you to the next screen that contains **Action-xhr** (the URL that processes the confirmation button request), ready-to-use **HTML code**, and a more compact **TJML** version of the code.

## Structure of the Generated Code
The HTML code consists of two parts: a block for the email header (`<head>`) and a block for the email body (`<body>`). The `<head>` block includes the AMP scripts required to ensure proper functioning of the form, processing user actions, and displaying messages.

However, the main logic of the component resides in the `<body>` block. This is where the form with the `action-xhr` attribute is located:

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

The request is processed by the Pixcraft server. In turn, the `on="submit-success: AMP.setState(...)"` parameter defines what will happen after the action is successfully completed.

**The key element of AMP-forward-link is the confirmation link handling process.** This is done through a hidden `input` field with `name=”link”`:

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

Here, `${confirm}` must be replaced with the confirmation link in your platform’s syntax.

When there are no changes on the screen for some time, this may leave the impression that nothing is actually happening. To prevent this, a loading block is displayed while the request is being processed:

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

This can be a simple message with any text (such as “Please wait” or “In progress…”). Additionally, an image or animation can be used instead of plain text. In this case, it is appropriate to apply an overlay with absolute positioning so that the visual element appears above the form, giving it a neat, modern look.

In addition to the standard HTML code, you receive automatically generated [**TJML**](https://pixcraft.io/framework) code. This is a special template markup syntax designed to simplify and speed up the coding of both AMP and regular HTML emails.

Compared to HTML, it offers the following advantages:

- **Compactness.** TJML code is shorter and lighter than the AMP-HTML implementation.<br><br>
- **Automation.** Unlike the HTML version, you do not need to manually connect `amp-bind`, `amp-form`, and `amp-mustache` for the TJML code to work properly.

The TJML code for **AMP-forward-link** looks like this:

```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>
```

Connecting the **AMP-forward-link** component to your campaigns is easy: simply embed the ready-made code into your email, and it’s done. Once the campaign is launched, you will be able to:

- **Track** how many users confirmed the action via email.<br><br>
- **Collect and analyze additional data** if a second screen with a form is provided in the email.

## Conclusion
**AMP-forward-link** adds extended action confirmation capabilities to emails. Thanks to Pixcraft, creating the component and using it as part of email campaigns is possible without complex development. All that’s required is inserting the ready-made code into an existing email template.

Give Pixcraft a try for free! [**Sign up now**](https://app.pixcraft.io/user/register) for a 14-day trial and explore all the capabilities of our visual email builder firsthand.

This article describes how the AMP-forward-link component helps to confirm actions in an email without redirecting to a website and how to create this component using Pixcraft email builder.

small_image (1).png

thumbnail_image (1).png

image (1).png

AMP-forward-link: How to Confirm Actions Directly in the Email Client

AMP technology has introduced a unique experience into email marketing by adding special capabilities for interactivity and personalization. Now, newsletters can not only stand out visually but also dynamically adapt to the reader’s interests and collect feedback directly within the email.

Yet Pixcraft’s **Interactive stream** goes even further, transforming an email into a communication space where subscribers can leave comments and see replies from others. In this article, we will discuss the benefits of this feature and how to implement it in email campaigns.

## What Is Interactive Stream
Pixcraft offers a set of AMP components that make an email interactive and noticeably more engaging. These include:
- [**AMP-form**](https://pixcraft.io/blog/how-to-create-and-use-forms-in-email), which allows users to embed a fully functional form inside the email. This can be a quick survey with single or multiple-choice options, or an invitation to leave the subscriber feedback. The collected data can be used for segmentation and analytics, such as [**RFM analysis**](https://pixcraft.io/blog/rfm-analysis-for-email-marketing-how-to-cut-costs).<br><br>
- [**AMP-list**](https://pixcraft.io/blog/using-the-amp-list-component-in-email-campaigns), which makes it possible to load data from external sources and display dynamic content inside the email. This includes promotions and special offers, product selections, and layouts that change depending on the time of day.<br><br>
- [**AMP-forward-link**](https://docs.pixcraft.io/en/amp/components/forward-link.html), which enables confirmation of subscription or registration directly within the email, without redirecting the user to a website.<br><br>
- **Interactive stream**, which allows a subscriber to leave a comment directly in the email.

Thanks to the Interactive stream, the email is no longer a one-way channel where only the brand has a voice. Instead, it becomes a **space for discussion and exchange of opinions**:
- Recipients share their impressions and ask questions that become part of the overall conversation. This creates an atmosphere similar to a chat or comments on social networks.<br><br>
- When real customer feedback appears in an email, it is perceived as a place for actual dialogue rather than a simple advertising campaign.

<Img
img="/api/uploads/01_formexample_11b8ab2c2d.png"
alt="Comment feed in an email"
/>

## How to Create an Interactive Stream in Pixcraft
The process of creating and configuring an Interactive stream is largely similar to working with other AMP components.
### Creating a Comment Field
On the main screen of your profile, go to the **Components** menu and click the **New Component** button. 

<Img
img="/api/uploads/02_componscreen_633d6c66cb.png"
alt="Components screen in Pixcraft"
/>

Select **Interactive stream**, specify a name (for example, “Feedback on the new collection” or “Newsletter comments”), and optionally add a short description. After that click **Create Component**.

<Img
img="/api/uploads/03_newinteractstream_5d954139d1.png"
alt="Creating an Interactive stream"
/>

Next, a configuration screen will open for the form through which subscribers will leave their messages. The logic is similar to creating a standard AMP form: use ready-made elements, drag them into the workspace, and combine them as needed. 

<Img
img="/api/uploads/04_streamset_43baf97107.png"
alt="Setting up an Interactive stream"
/>

For a comment form, the best choice is **Textarea** — a multi-line field where the email recipient can enter feedback, a detailed comment, or a short message. Here, the following parameters can be configured:
- **Field name** — the displayed text that explains to the user what exactly needs to be entered.<br><br>
- **Validation** — makes the field mandatory to fill in.<br><br>
- **Successful form submission message** — an optional short text that confirms to the user that their comment has been received.

### Moderation and Content Safety
Pixcraft allows users to choose whether comments are published automatically or only after a manual review. Two scenarios are available here:
- **Post-moderation** (“Publish by default” enabled). All new comments appear in the shared stream without prior review. This option provides immediate feedback and a strong “wow effect”: the subscriber sees that their message has instantly become part of the email.<br><br>
- **Pre-moderation** (“Publish by default” disabled). In this case, each comment must pass moderator review in order to be published. After the approval, the comment becomes visible to other subscribers. This is convenient for sensitive topics where it is important to control the tone and content of the dialogue.

Additionally, the settings include **Obscene filter**, an automated system for detecting profanities in English and Russian. If a user enters inappropriate words, the filter recognizes those and replaces them with asterisks. This safeguard measure reduces the workload for moderators: even without manual review, offensive language will not appear in the email.

Once the form has been created and all parameters specified, click **Save** to open the **Connection** screen.

### Connecting the Interactive Stream and Collecting Data
The next step is to configure how exactly the Interactive stream will behave in the email. For this, both basic connection parameters and ready-to-use HTML and TJML code are available.

<Img
img="/api/uploads/05_connectionscreen_dc8e90a6e1.png"
alt="Setting up connections"
/>

**Webhooks.** Here, the user can specify the URL of an external database or service to which Pixcraft will send a POST request every time a new comment is submitted via the form. This mechanism makes it possible, for example, to instantly receive notifications about new comments in a Telegram bot or any other system.

Immediately after a comment is submitted, a “data package” is generated and sent to the specified address. It includes:
- `componentId` — Pixcraft component ID;<br><br>
- `campaignId` — campaign ID (if the component is linked to the campaign);<br><br>
- `email` — subscriber’s email address;<br><br>
- `date` — event timestamp in UNIX format;<br><br>
- `owner` — form’s owner ID;<br><br>
- `data` — content in `application/x-www-form-urlencoded` format.

More details on how webhooks work can be found in the [**documentation**](https://docs.pixcraft.io/en/amp/webhooks.html).

**Action-xhr.** The form handler address used during manual configuration. This is where the data is sent when the subscriber submits the comment.

**List src.** Also used during manual configuration. This is the data source from which all comments are loaded into the Interactive stream. Here, users can configure the number of messages displayed in the email at one time, as well as the order in which they appear:
- `Asc` (ascending, from oldest to newest);<br><br>
- `Desc` (descending, from newest to oldest);<br><br>
- `Rand` (random comments from the source);<br><br> 
- `Default` (default value).

**Ready-to-use code snippets** for integrating into the email include: 

- HTML code for `<head>` — ensures connection to AMP libraries and minimal styles. Below is an example of such a code:

```xml
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<style amp-custom>
.wrap_list {
  position: relative;
  height: auto;
  min-height: 100px;
}
#wrap_listXXXX .commentlist {
  min-height: 100px;
}
#wrap_listXXXX .commentlist,
#wrap_listXXXX .commentlist > div {
  position: static;
}
#wrap_listXXXX .commentlist > div {
  min-height: 100px;
  height: auto;
}
</style>
```

- HTML code for `<body>` — defines the structure of the form and the block that contains the Interactive stream. This is the content that the user will see directly in the email. Such a code may look like this:

```xml
<form method="POST" action-xhr="https://app.pixcraft.io/amp/post/XXXX?key=YOUR_KEY" on="submit-success: AMP.setState({confFormXXXX: true})">
  <div [hidden]="confFormXXXX">
    <div class="field">
      <label>Share your thoughts</label>
      <textarea name="t_0847_share_your_thoughts_595" required></textarea>
    </div>
    <button type="submit">Submit</button>
    <input type="hidden" name="email" value="${email}">
  </div>
    <div submit-success>
      <template type="amp-mustache">
        {{success}}
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
    Please fill in correctly {{#error}}<b>{{title}}<br></b> {{/error}}
    </template>
    </div>
    <div class="loading" submitting>
      Loading...
    </div>
</form>
<div class="wrap_list" id="wrap_listXXXX">
  <amp-list class="commentlist" id="shortlist" layout="fill" src="https://app.pixcraft.io/amp/get/XXXX?key=YOUR_KEY">
    <template type="amp-mustache">
      <div class="list-card">
        <div class="list-item">
          Share your thoughts
          <div>{{t_0847_share_your_thoughts_595}}</div>
        </div>
      </div>
    </template>
  </amp-list>
</div>
```

- TJML — a ready-made framework by Pixcraft. It allows to combine HTML and AMP content of the email in a single codebase. Here’s an example:

```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">
    <div class="field">
      <label>Share your thoughts</label>
      <textarea name="t_0847_share_your_thoughts_595" required></textarea>
    </div>
    <m-button bgcolor="#7D4DA3">Submit</m-button>
      <input type="hidden" name="email" value="${email}">
    </div>
    <m-form-success>[[success]]</m-form-success>
    <m-form-error>Please fill in correctly [[#error]]<b>[[title]]<br></b> [[/error]]</m-form-error>
    <div class="loading" submitting>
      Loading...
    </div>
</m-form>
<div class="wrap_list" id="wrap_listXXXX">
  <m-list class="commentlist" id="shortlist" layout="fill" src="https://app.pixcraft.io/amp/get/XXXX?key=YOUR_KEY">
    <div class="list-card">
      <div class="list-item">
        Share your thoughts
        <div>[[t_0847_share_your_thoughts_595]]</div>
      </div>
    </div>
  </m-list>
</div>
```

From the recipient’s perspective, the Interactive stream resembles interactions in social networks or messenger apps:
- The subscriber fills out the form and clicks the button.<br><br>
- The data is sent to the server.<br><br>
- **AMP-list** loads new comments from the **List src**. If **Publish by default** is enabled, the comment is displayed immediately. If pre-moderation is active, the comment becomes visible only after manual approval.

Before sending the campaign to a wide audience, be sure to test the email across different email clients to ensure that AMP elements are displayed and function correctly.

## How to Collect Statistics and Manage Comments
Once the Interactive stream is ready, the user gains the ability to track subscriber activity and manage their comments. To do this, go to the **Components** section and select the required Interactive stream. Clicking on it opens the **Statistics** section.

<Img
img="/api/uploads/06_statsscreen_4408461576.png"
alt="Interactive stream statistics"
/>

This section gathers all information about user interactions:
- comments;<br><br>
- events related to the form;<br><br>
- metrics for the entire period or for a selected timeframe.

Moderation also takes place here: a toggle allows the user to manually approve or reject a comment.

<Img
img="/api/uploads/07_moderatscreen_51f9d41ef6.png"
alt="Comments moderation"
/>

It is possible to change the parameters of the **Interactive stream** at any time after its creation. For this, simply go to the Settings or Connection sections to make the necessary adjustments. This allows users to:
- quickly adjust moderation rules;<br><br>
- change the text shown in the form;<br><br>
- reuse the stream in other campaigns without having to rebuild it from scratch.

## How to Add a Hidden Field for Displaying a Name

A mechanism that automatically inserts random nicknames allows to add individuality to the Interactive stream. For example, if the form does not provide for entering a name, the system will automatically substitute a value from a predefined list.

<Img
img="/api/uploads/08_nameexample_00fa6f283c.png"
alt="Names inserting example"
/>

Technically, this is implemented through hidden fields. An array of value options (for example, _“Unidentified hedgehog”_, _“Unidentified kitty”_, and similar ones) is sent to the field, after which the system randomly selects one of those and uses it as the name.

In the code, the mechanism looks like this:

```xml
<input name="some_name" type="hidden" [value]="['Unidentified kitty', 'Unidentified elephant','Unidentified dragon','Unidentified axolotl','Unidentified turkey'][floor(random() * 4)]" />
```

This seemingly small detail makes the Interactive stream more friendly and informal. Subscribers are more willing to leave comments if they are not required to enter their name, and the dialogue in the email becomes livelier thanks to lighthearted and amusing nicknames.

**It is important to note** that to use this substitution, the state must change at least once before the form submission (`on="tap:AMP.setState({})"`). This can be done natively by hiding the form under a button or spoiler: when opened, the value is calculated and inserted automatically.

## Conclusion

Thanks to the Interactive stream, an email transforms from a simple information delivery channel into a communication platform. Feedback is collected instantly, and engagement grows thanks to active dialogue.

Pixcraft provides all the tools necessary for convenient launch and management of this format. Combined with other AMP components, the Interactive stream becomes an excellent addition that makes your email campaigns even more impactful.

Let's take a look at how to use the Interactive stream component that adds the ability to leave comments directly in the email and turn a newsletter into a communication platform.

small_cov_pic (1).png

thumbnail_cov_pic (1).png

cov_pic (1).png

Interactive Stream in AMP Emails: Next Level of Engagement

Want to measure how satisfied your audience is with your product and whether they are willing to recommend it? Try an **NPS survey**: it’s a quick way to get the real picture of customer perception.

In this article, we’ll explain how NPS surveys work and how to set them up quickly and effectively in your email campaigns with the help of **Pixcraft**.
## What is NPS
**Net Promoter Score** is a customer loyalty index that shows how willing your clients are to recommend your product or company to others. It allows you to measure trust and satisfaction without the need for lengthy questionnaires.

The methodology is simple: you need to ask a key question, such as “How likely are you to recommend our product to a friend or colleague?”. The customer selects a score, and based on their response, falls into one of three categories.
<br><br>
<Table>
| Category  | Description               |
| --------- | ------------------------ |
| **Promoters (score 9–10)** | Fully satisfied with the product and eager to recommend it to others. They often become unofficial brand ambassadors, sharing positive reviews and attracting new users. |
| **Passives (score 7–8)** | Neither dissatisfied nor highly enthusiastic. They like the product and continue to use it but see little reason to share their experience. If they feel that the product quality has dropped, they may easily switch to competitors. |
| **Detractors (score 0–6)** | Dissatisfied customers who face issues with the product, service, or communication. Their opinions are especially important since they are more likely to leave reviews: negative feedback directly impacts your reputation and can reveal weak points in your product or service. |
</Table>
<br><br>
The score is calculated by subtracting the percentage of Detractors from the percentage of Promoters. For example, if 50% of respondents gave a score of 9 or 10 and 20% gave a score from 0 to 6, then the NPS equals **50 – 20 = 30**. The higher the score, the more loyal your customer base is, and the more chances your business has of growing organically through recommendations.

It’s worth noting that NPS can be negative. If that happens, it’s a clear signal to immediately investigate why customers are dissatisfied and how you can fix it.
## Why Businesses Should Track NPS
NPS surveys provide more than just a general understanding of customer loyalty. They allow companies to foresee risks, identify growth opportunities, and take proactive action.

Here’s what makes NPS valuable for businesses:

- **Understanding real customer perception**. Sales numbers or website traffic don’t always reflect what customers actually think about your product. NPS shows how satisfied your audience truly is with your product.

- **Quick identification of pain points**. If the share of Detractors grows, it signals issues with service, inconvenient interfaces, or other flaws. The earlier you detect these problems, the easier it will be to fix them.

- **Customer churn reduction**. Negative experiences often remain silent. In many cases, buyers don’t voice their dissatisfaction out loud; instead, they simply stop using the product. NPS helps spot dissatisfied users early and address their concerns through service improvements, support, and incentives.

- **Boosting referral channels**. Promoters are essentially your brand advocates, often willing to sincerely recommend your product. By identifying these customers, you can nurture their enthusiasm through loyalty programs and turn word‑of‑mouth into a source of organic growth.

It’s possible to integrate NPS surveys directly into email campaigns, which provides unique advantages:

- **Faster, more precise feedback**. Emails containing NPS surveys gather responses while emotions are still fresh, right after a customer interacts with your product. This approach delivers more accurate insights without delays.

- **Tracking dynamics across the customer journey**. You can monitor how user perception of the product changes in different campaigns and identify the touchpoints where churn risk is likely to occur.

- **Segmentation and automated actions**. Scores allow you to automatically segment your audience into Promoters, Passives, and Detractors. Each category of users can then receive tailored follow‑ups, such as rewards or retention campaigns.

Keep in mind that NPS is not a one‑off survey but part of a systematic analytics process. It works effectively only when measured regularly. Seasonal trends, different audience segments, and external factors should all be considered when interpreting results.

Additionally, pay close attention to customer comments. Behind each score might be an actual problem or an insight that can help you improve the product and retain more users.
## How to Implement an NPS Survey in Pixcraft
Pixcraft offers two main approaches for creating NPS surveys: quickly embedding an AMP form directly into your email template via the visual editor, or crafting a standalone AMP component. Let’s take a closer look at both options.
### AMP Form in the Email Template
If you need to collect NPS responses quickly, it's possible to add an interactive AMP form directly to your template. This method is perfect for urgent campaigns and allows you to create a survey without extensive preparation. 

Here’s the step‑by‑step process:

- On the left-side panel, click the Plus icon and drag the Form primitive into the desired spot.

- Choose the form type. For NPS surveys, the **Radio** type works best: it allows the user to select only one option from the list.

<Img
img="/api/uploads/001_radiotype_ce020e9959.png"
alt="Radio form type"
/>

- Set up your NPS survey. Add a numeric scale or other reply options, a short question (e.g., “How likely are you to recommend us?”), and a clear call‑to‑action for the button.

- Customize the design. Adjust colors, fonts, padding, and border‑radius to make the survey form seamlessly match the look and feel of your template.

<Img
img="/api/uploads/002_readymadeform_3b131a97f6.png"
alt="Ready-made NPS-survey"
/>

### Standalone AMP Component
It’s also possible to create a standalone AMP component and embed it into an existing template. This is a convenient option if you already have an HTML email and want to enhance it with an interactive survey. Simply run the email through the [**Pixcraft HTML-to-AMP converter**](https://pixcraft.io/converter) to generate an AMP version where you can easily add an NPS form or any other interactive element.

Here’s how to create a separate AMP component in Pixcraft:

- On the My Space screen, select Components and click New Component. A window will open where you can specify the component name, description, and type.

<Img
img="/api/uploads/003_componentoptions_41de6ffc84.png"
alt="Component creation screen"
/>

- Select a form type. For NPS surveys, choose **Rating** or **Custom**. Rating instantly creates a simple numeric scale. Custom gives you a blank form to which you can add any fields you need; this is especially useful if you want to include a comment box in addition to the rating.

- Configure the form content. Add your question, rating scale, successful form submission message, and any additional fields or elements you require.

<Img
img="/api/uploads/004_formsetup_f06acdcfb0.png"
alt="Form configuration screen"
/>

- After the component is ready, hit the Save button. You’ll receive ready‑to‑use HTML (AMP) and [**TJML**](https://pixcraft.io/framework) code, which you can customize further if needed.

<Img
img="/api/uploads/005_code_b54eddf742.png"
alt="Survey form HTML code"
/>

To integrate the survey, simply insert the generated code into your email template. Also, make sure to include the ```amp-bind```, ```amp-form```, and ```amp-mustache``` scripts for the form to work correctly.

Pixcraft will only store the field values whose names match those defined in the code. Any other attributes, parameters, and layouts can be freely adjusted to fit your design.
## Sending and Processing Collected Data
When a user fills out and submits an NPS survey, all responses are automatically recorded in Pixcraft. The collected data can be:

- exported to a **CSV file** or sent to **Google Sheets** for manual analysis or integration with your analytics tools;

- sent to external systems via **webhooks** (automatic notifications triggered by events in the system).

Webhooks allow you to transmit survey results to a specified URL immediately after the user submits the form. To set them up:

- Open your form component.

- Go to the “Connection” section and enter the required URL in the “Webhook” field.

<Img
img="/api/uploads/006_webhooks_03f76bfff6.png"
alt="Webhook field"
/>

- After the user completes and submits the form, Pixcraft will generate a POST request with the form data and send it to the specified URL.

Please note that **Pixcraft does not calculate the NPS automatically**. You need to set up your own data processing logic in Excel, Google Sheets, or a BI tool to calculate the Net Promoter Score.
## Alternative Approach: HTML Version
A number of email clients, such as Microsoft Outlook and Apple Mail, do not support [**AMP emails**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy). To avoid losing valuable feedback, it’s important to prepare an HTML version of your email as well. In this version, an AMP form is replaced with a link, button, or image that redirects users to a web survey form when clicked.

There are a couple of solutions here. You may create a web version of the AMP email or use [**Altcraft Platform**](https://altcraft.com/) that makes it easy to host an NPS web form and automatically collect analytics. Here’s how it works:

- **Create the survey form**. In the Weblayer section, select Forms and click Create. Set up the form’s name, description, and identifier. Enable the Published toggle in order for the form to get a URL or become available as an iframe. Configure additional options, such as the final form page and the refill restriction.

- **Add the NPS survey element**. In the Constructor tab, add the NPS Survey element. Configure the title, scoring range, and the rating scale symbols. Optionally, add a comment field and make the survey mandatory for completion. Save and publish the form.

- **Place the link in the email**. Pixcraft automatically generates the HTML version of your email. Insert a visual element linking to the Altcraft web form alongside the AMP form. Set the element’s display option to Visibility → HTML. This ensures that recipients using email clients without AMP support will see the alternative link, button, or image instead.

<Img
img="/api/uploads/007_shownotshow_cb569e254a.png"
alt="Component visibility toggle in Pixcraft"
/>

- **Data collection and analytics**. Altcraft automatically collects responses and calculates the NPS score. In the form’s Analytics section, you can view the overall NPS, the distribution across Promoters, Passives, and Detractors, and the NPS dynamics over time.

## Conclusion
The sooner you integrate NPS surveys into your communications, the more opportunities you’ll uncover for understanding your audience and improving your product. With Pixcraft, setting up an NPS survey takes only a few minutes. Just ask your customers a simple question and receive valuable insights that will help your business grow.

In this article, we discuss NPS surveys: what are they, what makes them useful for businesses, and how to implement them in an email-campaign with the help of Pixcraft.

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

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

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

NPS Surveys: What’s Their Purpose and How to Implement Them in Pixcraft

Picture this: you open an email, and instead of just text or images, you find a classic game of *Snake* that you can play right there in the message. That’s exactly the kind of experiment we decided to try—to breathe new life into our emails and surprise our subscribers.

In this article, we’ll walk you through how we created an interactive AMP email with a game for [**Altcraft’s**](https://altcraft.com/) New Year newsletter, the challenges we encountered along the way, and the results we achieved. If you’re curious about how to add interactivity to your email campaigns and captivate your audience, read on.

## The Idea

2025 is the Year of the Snake in the Eastern zodiac, so when we began brainstorming concepts for an interactive [**AMP email**](https://pixcraft.io/blog/what-amp-emails-are-and-how-they-are-changing-email-marketing), the idea of a *Snake* game felt like a natural fit.

We started with the classic gameplay mechanics: the snake moves forward continuously, and the player changes its direction to avoid crashing into the walls or its own tail. The goal is simple—collect the blinking dots to grow the snake longer, one square at a time.

<Img
img="/api/uploads/amp_email_snake_58366f1277.jpg"
alt="Snake’s mechanics"
/>

However, AMP emails come with certain limitations: the only way to automatically change the display is by using a carousel with autoplay. This would have added unnecessary scrolling animations, making the game less user-friendly.

As a result, we reimagined the concept and decided to tie the snake’s movement to user clicks. Now, the player’s goal is to guide the snake through a maze, find a key, and reach the exit.

<Img
img="/api/uploads/amp_email_design_24fe8960ca.jpg"
alt="Snake’s maze in the AMP email"
/>

You can try the game [**here**](https://cases.pixcraft.io/altcraft/2025_en/). 

## The Development Process

### Gameplay

When creating a game for an AMP email, it’s crucial to consider how users will play on different devices: on a computer, they’ll use a mouse, while on a smartphone, they’ll rely on touch controls. These two scenarios are quite different and come with their own constraints. For example, on mobile devices, buttons need to be large enough to tap easily with a finger, but they also shouldn’t take up too much space, so the game field can fit on the screen as well.

After several experiments, we settled on a 10x10 grid. It turned out to be ideal: compact enough to prevent the game from becoming tedious due to an overly large maze, yet spacious enough to keep everything clearly visible even on a small phone screen.

The next step was designing the game map. We added dead ends, loops, and decorative elements to make the map feel more dynamic and engaging.

<Img
img="/api/uploads/amp_email_maze_design_aa9e10177f.png"
alt="AMP email development"
/>

The character controlled by the user is the snake. It consists of several cells and changes its position based on the direction of movement. The head and tail don’t “bend” as the snake moves. Because of this, we decided that the snake’s minimum length should be 4 cells.

<Img
img="/api/uploads/amp_email_snake_mechanics_604ef2eb22.png"
alt="Interactive email development"
/>

The controls are implemented using buttons: each click moves the snake one cell in the chosen direction. We also added a hint for users: “Control the snake using these buttons.”

<Img
img="/api/uploads/amp_email_controls_b28ecd019e.png"
alt="The AMP email’s controls"
/>

### Technical Details

To enable the snake to move across the entire game area, we used relative coordinates — from the left and from the top. These coordinates are defined using CSS classes, which determine the snake's position on the grid. For rendering, we created ten classes for horizontal and vertical offsets. The snake's position is set as follows:  

```html
<div [class]=”'translate-left-' + playerState.left + ' translate-top-' + playerState.top + ' head_snake_' + playerState.direction_1”></div>
```  

When the player presses a control button, the snake's head turns in the chosen direction. Since the snake consists of four segments, each segment must shift to the position of the previous one. This is implemented through state updates:  

```html
<button class="button_up" on="tap:AMP.setState({
	playerState3: {direction_1:playerState2.direction_1, direction_2:playerState2.direction_2 ,left: playerState2.left, top: playerState2.top},
	playerState2: {direction_1:playerState1.direction_1, direction_2:playerState1.direction_2 ,left: playerState1.left, top: playerState1.top},
	playerState1: {direction_1:playerState.direction_1, direction_2:playerState.direction_2 ,left: playerState.left, top: playerState.top},
	playerState: { direction_2:playerState.direction_1, direction_1: 'up', left: playerState.left, top: playerState.top - 1 }
})"></button>
```  

Note that we have two directions — direction_1 and direction_2. These are necessary to correctly bend the snake's body during turns.  

Another important aspect is ensuring the snake stays within the game area. Since it only moves forward, it is sufficient to check the coordinates of its head (playerState). The left and top coordinates must not exceed 10 to keep the snake within the game boundaries.  

To validate the coordinates, we use an array that lists all permitted points on the map:  

```javascript
coordinates: [
	{ left: 0, top: 6 },
	{ left: 1, top: 0 },
	{ left: 1, top: 1 },
	{ left: 1, top: 2 },
	{ left: 1, top: 3 },
	{ left: 1, top: 5 },
	{ left: 1, top: 6 },
	{ left: 1, top: 8 },
	...
]
```  
To check if the snake is within the allowed area, we use the filter method:  

```javascript
coordinates.filter(c => c.left == playerState.left && c.top == playerState.top).length
```  
If the result is zero, it means the snake has moved outside the game area.

## Results

The experiment with an interactive AMP email that included a game yielded excellent results, confirming that this approach works effectively.

**Engagement and Metrics:** We observed that users actively interacted with the game. Nearly 30% of those who opened the email reached the end of the game—a great metric for interactive content. Users not only opened the email but also spent more time engaging with it than they typically would. 

**Mobile Audience:** The majority of users played the game on mobile devices, and the on-screen controls proved to be user-friendly and convenient.

**Technical Outcomes:** The email displayed correctly in AMP-compatible email clients, and for those without AMP support, a fallback HTML version was seamlessly provided.

## Conclusion

The experiment demonstrated that emails with interactive elements are a genuine way to captivate an audience. Users eagerly engaged with the game, especially when it offered something unique, like playing *Snake* directly within the email. The AMP format proved to be an ideal choice for implementing this idea.

People are willing to interact with content if it is interesting and user-friendly. However, for everything to run smoothly, every detail must be considered—from compatibility with email clients to providing fallback solutions for those without AMP support.

We decided to test how gamification affects engagement and embedded "Snake" directly into an email. The article covers the experiment details and results.

small_amp-email-main.jpg

thumbnail_amp-email-main.jpg

amp-email-main.jpg

“Snake” in an Email: How We Created a Game for an AMP Newsletter with Altcraft

In today’s world, user attention is the most valuable resource. Static emails no longer excite, and lengthy redirects to links only frustrate. But what if your email could become interactive right in the inbox? It’s not magic — it’s [**AMP emails**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy), a technology that redefines how brands can engage with their audience through email.

In this article, we’ll explore how brands use AMP to captivate subscribers and boost engagement.

## An Example from [Findomestic](https://amp.dev/success-stories/findomestic)

<Img
img="/api/uploads/Findomestic_Sample_Email_6cfee92223.gif"
alt="AMP email example"
/>

Findomestic aimed to make their emails more user-friendly and drive higher conversion rates. By implementing AMP, they stood out from competitors and added interactivity to their emails.

The idea was simple: allow users to interact with the email directly in their inbox — for instance, selecting a banking product or instantly receiving a calculation — all while maintaining Findomestic’s familiar style and interface.

A/B testing of AMP and traditional emails during Black Friday revealed impressive results:

- Open rates increased by 128% (35.4% vs. 15.5%).
- Click-through rates rose by 133% (1.4% vs. 0.6%).

Creating such emails is easy with the [**Pixcraft**](https://pixcraft.io/builder) email builder. Now, crafting a ready-to-send message takes just a few minutes, no HTML knowledge required. Simply choose pre-designed blocks, customize their appearance, add text and links — all within a convenient visual editor.

## Example from Volkswagen (Design: [RRAP](https://www.rapp.com/))

<Img
img="/api/uploads/amp_example_volkswagen_12a015adca.png"
alt="Example of an AMP email from Volkswagen"
/>

In this email, readers can select a car color directly in their inbox using an interactive selector powered by AMP technology. A single click on a preferred shade instantly changes the car's color in the email. This is achieved through AMP components that handle dynamic image updates.

This approach not only grabs attention but also allows users to see their choice in action, adding an element of personalization and playfulness.

## Example from Huel

<Img
img="/api/uploads/amp_example_poll_c646dc5b02.png"
alt="Example of an AMP email from Huel"
/>

In this email, users can pick their favorite drink flavor through an interactive poll implemented with AMP technology. All it takes is a click on one of the options. User responses are sent to a server via the ```<amp-form>``` component.

Results are displayed in real time thanks to ```<amp-list>```, which dynamically updates the email’s content. The percentage breakdown for each flavor is shown in a bottle, represented by both a visual liquid level and numerical percentages.

This feature not only engages recipients but also gives them a sense of participation: users can see how their choice compares to the votes of others.

## Example from Disney 

<Img
img="/api/uploads/amp_examples_puzzle_04fc6b47e3.jpg"
alt="Example of an AMP email from Disney"
/>

This email for kids features an engaging game mechanic — a crossword puzzle that the child can solve directly in their inbox. The goal is to guess characters based on silhouettes and brief descriptions, then enter their names into a form within the email. The ```<amp-form>``` component allows users to submit answers without leaving the email.

All logic and content updates are handled with the ```<amp-bind>``` component, which links data to interactive elements and updates them in real time. Correct answers and changing character images are processed using AMP tags, enabling new content to appear seamlessly within the email.

This approach encourages active interaction with the content rather than passive reading, significantly increasing the likelihood of completing the desired action.

## Example from Toms 

<Img
img="/api/uploads/amp_examples_toms_c500f815a8.jpg"
alt="Example of an AMP email from Toms"
/>

This email showcases glow-in-the-dark shoes with an interactive toggle that lets users control the effect directly in their inbox.

The functionality is implemented using ```<amp-bind>```, which dynamically switches the images, as well as ```<amp-img>``` to display both glowing and regular versions of the shoes. This creates a captivating visual effect without requiring users to visit an external website.

## Example from Mail.ru

<Img
img="/api/uploads/mail_c8a0967b69.gif"
alt="Example of an AMP email from Mail.ru"
/>

An email created by Pixcraft for Mail Cloud makes learning about new features simple and fun through an interactive format. Instead of plain text, users are invited to play a game: answer questions and immediately receive detailed information about each feature.

This functionality is powered by AMP components. Users select their answers, and results with additional information appear instantly, thanks to ```<amp-bind>```. This approach delivers dynamic, modern, and visually engaging interaction directly within the inbox.

## Conclusion 

AMP for email is a powerful tool that enhances emails by making them brighter and more engaging. Interactive elements, instant updates, and the ability to interact directly within the inbox open up new opportunities for brands and marketers.
These emails not only boost open and click-through rates but also provide a unique user experience.

If you’re not yet using AMP in your email campaigns, now is the time to start. The Pixcraft email builder and our [**Figma plugin**](https://pixcraft.io/figma). 

With Pixcraft, you can easily design both standard HTML emails and interactive AMP emails, significantly improving conversion rates and engagement.

This article explores how brands use AMP to captivate subscribers and increase engagement.

small_amp-emails-examples.jpg

thumbnail_amp-emails-examples.jpg

amp-emails-examples.jpg

Revitalize Your Emails: Top AMP Email Examples

Welcome emails are the first point of communication with a user, making it crucial to leave a good impression on subscribers. This task becomes significantly more challenging when the recipients are children.

While the main difficulty with adult audiences is getting them to open [**emails**](https://altcraft.com/blog/how-to-reach-customers-via-email-campaign) due to the overwhelming number of messages they receive, the challenge with emails for children is the lack of content that is suitable and engaging for them.

Therefore, for the Kids' Mail service, together with VK, we decided to create a welcome email sequence featuring content in a playful format. The main idea is to present the available services in such a way that children can build their ideal mail experience on their own.

## Concept Development

Just before we started working on the project, Kids' Mail updated its branding and introduced new mascots — cute little monsters. We decided to give users the chance to create their own "mail monster."

<Img
img="/api/uploads/pismo_struktura_285cf05547.png"
alt="Concept development"
/>

As we developed this concept, we also decided to introduce young subscribers to each of the services by giving a brief overview of its key features. When you click on a service, a description bubble appears.

<Img
img="/api/uploads/amp_email_build_your_monster_851afd1378.png"
alt="Email variant"
/>

At this stage, Mail's design team had already worked out the visual appearance and main features of our mail monster.
The monster turned out to be so adorable that we came up with another idea — to allow users to save the image they created and use it as, for example, a phone wallpaper.

## A Few Technical Details

Naturally, to implement such an interactive email, we could only use [**AMP**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy). Since the email is primarily targeted at mail.ru users, the majority will see the interactive version.

To ensure proper rendering and speed up the process, we used the [**TJML framework**](https://pixcraft.io/framework). Regarding the specifics of AMP interactivity, each service had its own state, which was set to either 1 (active) or 0 (inactive). Depending on the state, we would show or hide a particular layer (such as a tail, ears, eyes, etc.).

To track which services were most popular among children, when creating the monster, we also generated a form that collected the selected services and, upon clicking "done," sent the data to Pixcraft.

In the final step, we show a picture of the monster with its name. There’s a small technical detail worth mentioning here. The issue is that mail.ru doesn't work with default states, meaning that the following type of entry will be ignored:

```xml
<amp-state id="names">
  <script type="application/json">
	["Tsifrosh", "Servicio", "Filer", "Otpravita", "Megaguy", "Mailia", "Chernover"]
  </script>
</amp-state>
```
</br>
At the same time, this would have worked correctly in Gmail.

The universal solution in our case was to assign an array of possible names directly to the span, referring to a random element of the array:

```xml
<span [text]="['Tsifrosh', 'Servicio', 'Filer', 'Otpravita', 'Megaguy', 'Mailia', 'Chernover'][floor(random() * 7)]"></span>
``` 
</br>

Phone wallpapers were also tricky. With 7 available services, it was possible to create 128 different monster combinations. Manually generating all of these would have taken a lot of time, so we wrote a small program to generate all the possible variants automatically.

<Img
img="/api/uploads/amp_en_50cc990b0a.gif"
alt="AMP email"
/>

## Statistics

After launching the email, we collected and analyzed the statistics over a month. Since we are talking about [**AMP emails**](https://altcraft.com/ru/blog/chto-takoe-amp-pisma), the first thing to note is the percentage of AMP opens:

<Img
img="/api/uploads/welcome_pismo_statistika_1542f81de4.png"
alt="Statistics"
/>

For unique opens — 62% for AMP, 38% for HTML. For non-unique opens — 66% for AMP, 34% for HTML. **The conversion rate for submitting the form** (clicking the "done" button) was 19.9% of those who opened the email. This indicates that users returned to the AMP emails multiple times, reopening them to create different monsters, meaning the goal of capturing users' interest was definitely achieved.
We also analyzed which services for kids were the most popular and in-demand, and the results showed the following picture:

|    |         | 
|------------|-----------------|
| Cloud     | 44.29%          | 
| Cartoons     | 46.20%          | 
| Math     | 44.85%          | 
| Games     | 49.52%          | 
| Drawing Tool     | 50.43%          | 
| Marusya     | 44.60%          | 
| Emoji     | 49.92%          | 

However, it's likely that kids were choosing the features they found most visually appealing for their monster, rather than the services that genuinely interested them. It's no surprise that the "Drawing Tool" was added by over 50% of the subscribers, as it added a cute brush-tail. "Emoji," selected by nearly half, gave the monster adorable eyes, and "Games," which were close in popularity, added wings.

## Conclusion

This level of detail in the welcome emails allows us to build a trusting relationship with the audience from the very start. We paid great attention to small details, carefully crafted the content, and genuinely aimed to make the communication process enjoyable for children. This approach helped us achieve excellent results.
A significant part of this success was due to the PixCraft platform. It made it quick and easy to create high-quality email templates and supported the backend functionality of the AMP emails.

In this article, we will discuss how we developed the concept of a welcome letter for the Kids' Mail service.

Articles by tag: AMP