Over the past few decades, email has come a long way — from simple text messages to visually rich newsletters filled with graphics, animation, and interactivity. Yet as content became more diverse, so did the demands on email layout and coding.

To make email crafting comfortable and efficient under modern conditions, we developed a dedicated **TJML framework**. In this article, we’ll take a closer look at how it works and what makes it stand out when compared to other email coding methods.

## Is Manual HTML Coding Still Relevant Today

Manual HTML coding was once the only way to achieve maximum control and precision in email design. However, the technologies evolved, which has also affected email clients; each of them has its own peculiarities and rendering rules.

Today, you need to keep numerous details in mind: how external styles behave, whether media queries work, and how tables and paddings are handled across different clients. Moreover, many people check their inboxes on smartphones, which means every email must also be adapted for vertical screens and mobile operating systems.

Basically, a single email has to be created in **three different versions**:

- for modern desktop and web clients;<br><br>
- for mobile devices;<br><br>
- for Outlook on Windows, where CSS support is still heavily limited.

AMP technology deserves a special mention. It has made interactive emails possible thanks to carousels, forms, and other dynamic components. But technically, this means that you must provide both an AMP version and a regular HTML version of the same message for those email clients that don’t support interactive components.

### Where Visual Builders May Come In Handy

In modern marketing workflows, it’s impossible to rely solely on manual coding. One of the alternatives is **email builders**: modern, user-friendly tools for creating email campaigns. They require no coding skills and let you design professional templates in just a few minutes.

For example, the [**Pixcraft visual email builder**](https://pixcraft.io/) allows you to assemble emails using a drag-and-drop interface: simply drag the desired elements onto the canvas and adjust them. Component management (including AMP) is available directly in the interface. The resulting templates are compatible with most email clients and easily adapt to mobile screens. One more option is the [**Pixcraft plugin for Figma**](https://www.figma.com/community/plugin/1403763341617358835/pixcraft-email-export-html-email-code-from-your-figma-design-responsive-outlook-gmail-ios), which can turn a finished design into a responsive HTML email.

Still, behind every message is a code that makes it work, and sometimes, editing it directly is inevitable. Can this process be just as convenient and modern? The answer is yes — with the help of TJML.

## What Is TJML

TJML is an email framework developed by the Pixcraft team for building HTML and AMP emails. It combines the simplicity of a block-based approach with the flexibility of manual coding, all while preserving familiar syntax.

A basic TJML email structure may look like this:

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

Here’s what each component does:

- `<tjml>` — the root container that wraps the entire code;<br><br>
- `<m-body>` — the main body of the email containing all its content;<br><br>
- `<m-wrap>` — a wrapper responsible for width, padding, background, alignment, and other layout parameters.

To build multi-column layouts, TJML provides two types of content composition that determine how blocks behave on mobile devices:

- **Non-restructurable blocks.** Here, elements remain in a single row. The `<m-row>` component wraps `<m-column>` elements, which scale on mobile.<br><br>
- **Restructurable blocks.** These are `<m-box>` elements wrapped inside `<m-boxes>`. In mobile view, they automatically stack vertically if they no longer fit in one row.

These structures can be filled with content blocks such as text (`<m-text>`), images (`<m-img>`), buttons (`<m-button>`), and more. Please read the detailed [**documentation**](https://docs.pixcraft.io/en/tjml/) to learn more about all available components and attributes.

Here’s a simplified example of a TJML-based email:

```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">
      Hello! This email was created using TJML.
    </m-text>
    <m-button href="https://docs.pixcraft.io/en/tjml/" bgcolor="#6a66d3" color="#ffffff" border-radius="6px" width="200">
      Learn more
    </m-button>
  </m-wrap>
</m-body>
```

## What Makes TJML Special

### Code Editing Directly in the Browser

To start working with TJML, all that’s required is the online [**Playground**](https://app.pixcraft.io/playground/) editor. Here, you can code and preview your email in real time, toggle between desktop and mobile views, test dark mode, and inspect the generated HTML output.

<Img
img="/api/uploads/codeplgrnd_1286fc7955.png"
alt="Email created in Playground"
/>

TJML can also be used in any IDE of your choice. For extra comfort, we’ve also developed the following: 

- a special [**VS Code plugin**](https://marketplace.visualstudio.com/items?itemName=Pixcraft.vscode-tjml) that enables autocomplete and tooltips for all components and attributes;<br><br>
- [**web-types**](https://app.pixcraft.io/tjml/web-types.json) support for JetBrains products like WebStorm and PhpStorm.

### HTML and AMP in a Single Code

In a traditional approach, AMP and HTML versions of an email are built separately as two distinct templates. TJML simplifies this process by generating both versions simultaneously within the same markup.

If you want to show a specific block in one version only, you can use conditional rendering:

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

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

TJML automatically includes all required AMP components (such as `amp-carousel`, `amp-form`, or `amp-list`) whenever they are used in the code.

### Rendering Across Email Clients

One of TJML’s main advantages is its smart approach to cross-client compatibility, including support for Outlook and Yandex Mail:

- The desktop **Outlook** email client uses a rendering engine that ignores modern CSS properties. TJML automatically inserts VML blocks and conditional comments to ensure correct display of backgrounds, alignment, and spacing (including in older versions).<br><br>
- **Yandex Mail**, on the other hand, doesn’t support media queries. TJML structures the layout in a way that preserves responsiveness even without them.

To put it simply, TJML eliminates the tedious routine of cross-client adaptation. Compatibility and rendering issues are handled at the framework level.

### Code Size Control and Optimization

In email marketing, message size is just as important as its content. For example, Gmail clips emails larger than **102 KB**, which may break layouts or affect tracking pixels.

TJML monitors the code size and warns you if it exceeds recommended limits. You can also use built-in optimization to remove unnecessary spaces, line breaks, and unused styles. The result is a lightweight, stable message that displays correctly and won’t be clipped by email clients.

### Error Checking and Typography

TJML continuously validates the email structure and nesting of `m`-elements. The framework alerts the user in case of any inconsistencies. In addition, it includes an automatic typograph, which inserts non-breaking spaces to prevent orphaned prepositions and conjunctions, ensuring the email looks clean not only technically but also visually.

## Pixel-Perfect Layout

To avoid discrepancies between the design mockup and final layout, TJML includes a **Pixel Perfect** tool. Simply upload a version of your design in a graphic format (e.g., PNG or JPG) and align it with your TJML template using this tag:

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

After that, you may specify the offset and blending mode to visually compare the mockup and the email layout.

## Automating Email Creation with ChatGPT

To make the process of crafting TJML emails even easier, we came up with a [**special version of ChatGPT**](https://chatgpt.com/g/g-6823ad1f3c208191b9ce2d58bf3bb724-tjml) specifically for the framework. It can generate complete email layouts from a simple prompt: all you have to do is enter the description, and within seconds, you’ll receive a TJML code that can be customized to suit the requirements at hand.

<Img
img="/api/uploads/codechgp_de5b9f44d6.png"
alt="Email generation in a special ChatGPT version"
/>

Yet the functionality doesn’t end there. This ChatGPT version can also:

- **edit existing code** based on text instructions;<br><br>
- **explain how TJML works**, including the purpose of each tag and which attributes to use in different scenarios.

## Results and Efficiency

The framework has already proven itself in real-life production workflows and is ready for daily use.

For example, when TJML was implemented at a major Russian marketing agency, this showed a significant increase in productivity. Even for complex emails, coding speed improved by more than **50%**, and for AMP emails, the speed improved by **about 1.5×** without any loss of quality.

Another key metric is **code cleanliness and compactness**. In benchmark tests, an uncompressed TJML email weighed only about **13.5 KB**, compared to over **22 KB** for an equivalent created using [**MJML**](https://pixcraft.io/blog/email-frameworks-mjml-vs-tjml). Smaller size means faster loading times and a lower risk of clipping in Gmail.

One more major advantage is TJML’s **low entry barrier**. The framework lets you focus on the structure and design rather than worrying about technical adaptation for a variety of email clients. Combined with its **strong rendering stability**, TJML stands out as a reliable and efficient solution for professional email production.

## Conclusion

With TJML, the process of building email campaigns becomes fast, stable, and convenient. Quality control is ensured at every step, from the initial creative concept to the final delivery. For marketing professionals, this means less time spent on debugging and more time for content and creativity.

This article explains how TJML framework by Pixcraft simplifies email coding, what features make it even more convenient, and how to speed up the process using a special version of ChatGPT.

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

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

cov_pic_1.png

TJML Framework: How to Create Emails Quickly and Easily in 2025

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

The quality of an email campaign depends on both the experience and skills of your team and the convenience and reliability of an email builder. However, despite interface similarities, the set of features and operating principles of visual email editors may significantly differ.

Previously, we conducted a [**detailed comparison**](https://pixcraft.io/blog/beefree-vs-pixcraft-which-tool-to-choose-for-your-email-campaigns) between **Pixcraft** and **Beefree** email builders. In this article, we are going to compare our tool with **Letteros**. Let’s check out the core functionality and key features: from no-code email building to integration capabilities and additional functions.

## Template Editor Flexibility
The process of crafting email templates in **Pixcraft** is built around a drag-and-drop principle: components are dragged onto the canvas, after which they can be modified. The following elements are used to create emails: 
- **Primitives** — basic elements such as text, image, button, divider, or empty block.<br><br>
- **Assets** — predesigned structures assembled from Primitives and ready for further editing. 

These allow users to build a template “piece by piece”, combining simple elements and more complex presets. Each block or individual component can be saved in a personal collection for future use in other emails.

<Img
img="/api/uploads/01_pimitandas_697e840c63.png"
alt="Assets in Pixcraft"
/>

A major advantage of **Pixcraft** is its level of flexibility, not limited to simple content editing. Users can enhance blocks with new Primitives, rearrange them, move Primitives to other blocks on the canvas, and even completely rebuild the structure (change the number of columns, their mobile adaptation, and other parameters). 

This opens up virtually unlimited opportunities for customization: any block from the collection can easily be adapted to specific tasks at hand.

<Img
img="/api/uploads/02_flexib_790f7c7834.gif"
alt="Changing the structure of blocks in Pixcraft"
/>

Additionally, **Pixcraft** features a special [**Figma plugin**](https://pixcraft.io/figma). It enables the import of Figma layouts and transforms them into fully functional and responsive HTML templates.

**Letteros** offers **Elements** as its basic components. These include both standard blocks for text, images, and buttons, as well as more advanced options, such as a countdown timer and embedded video. Instead of drag-and-drop, Elements are added by clicking, after which they immediately appear on the workspace.

<Img
img="/api/uploads/03_letworkfield_48bae5b61f.png"
alt="Canvas in Letteros"
/>

On top of that, **Letteros** provides **Layout** blocks and **Modules**.

**Layout blocks** — consist of up to 6 columns, each of which can hold one Element. Layout blocks are also added to the template by clicking, after which they can be filled with content or edited.

<Img
img="/api/uploads/04_letlayo_7813b2042b.png"
alt="Layout blocks in Letteros"
/>

Within Layout blocks, the components can be swapped horizontally, but cannot be moved to other blocks. Creating vertical columns of multiple Elements within a single Layout block is also not supported.

**Modules** — ready-made blocks with design and content that depend on the selected master template. They are divided into categories (banners, content blocks, text blocks, and so on), each containing several predesigned options. Unlike Elements or Layout blocks, Modules are added to the template by dragging them onto the canvas.

<Img
img="/api/uploads/05_letmodu_441021d237.png"
alt="Modules in Letteros"
/>

It is not possible to add new Elements inside Modules or rearrange existing ones. Their structure cannot be rebuilt: customization is limited to editing and replacing text and images in the available components.

## Ready-Made Email Templates
Often, ready-made templates become the starting point for future campaigns. Thanks to them, users don’t have to build the structure from scratch: instead, they can move directly to adding content and setting the parameters.

**Pixcraft** features an extensive **Template Gallery** with more than a hundred options grouped by categories. Users can choose a template by email type (for example, promotional newsletter, welcome message, triggered email), industry (e-commerce, education, automotive business), or event (International Women’s Day, Black Friday, Halloween). The library is regularly updated with new templates, ensuring fresh and relevant solutions.

<Img
img="/api/uploads/06_tempgalpix_cfb02b3a96.jpg"
alt="Pixcraft Template Gallery"
/>

Each **Pixcraft** template is essentially a complete email. Users only need to refine them and add the necessary content. As with individual components, templates offer maximum flexibility. It is possible to edit almost everything, from minor details to overall logic. If the initial structure does not fully suit the task, it can be supplemented or rebuilt using other Assets or Primitives.

<Img
img="/api/uploads/07_blockpix_ba17db8bf5.png"
alt="Block editing in Pixcraft"
/>

**Letteros**, by contrast, offers a different logic. There is no full-fledged template gallery here. Instead of ready-made emails, it offers a system of **master templates** divided by industries: “Auto”, “Hobbies and Entertainment”, “Gadgets”, and others. When creating an email, users are prompted to choose either a standard template with basic Modules or a specific industry with its own set of components

<Img
img="/api/uploads/08_mastemplet_5c40ce4eef.png"
alt="Master template selection in Letteros"
/>

The user can assemble their own version of an email using the predesigned Modules. However, as already noted, Modules are not very flexible. It is possible to drag them onto the canvas and edit the content within their Elements. However, it is not possible to add new Elements or completely remove existing ones. The structure customization is limited only to rearranging Modules within the email template.

## Bulk Editing of Styles and Links
In large-scale projects, the ability to bulk-edit elements can save a huge amount of time. For example, if the font throughout the text in an email needs to be changed or several links need to be updated, doing this manually is inconvenient. 

Special tools can help with that. In **Pixcraft**, two separate panels are provided for such tasks:

- **Styles.** With this panel, users can manage groups of similar text elements and buttons. For convenience, the Target icon can be used to highlight the location of the required elements in the template.

<Img
img="/api/uploads/09_stylpix_80abdfaa63.png"
alt="Styles in Pixcraft"
/>

- **Link Map.** This tool collects all the links in one place. Through the panel, users can quickly find the desired element, check the correctness of links, and replace them if necessary.

<Img
img="/api/uploads/10_lnkmppix_26a5194e65.png"
alt="Link Map in Pixcraft"
/>

**Letteros** allows users to check the text for spelling and punctuation, as well as to detect incorrect links: these can be highlighted in the template, eliminating the need for manual search. 

<Img
img="/api/uploads/11_lnkchcklet_76d56154e3.png"
alt="Link Checker in Letteros"
/>

However, bulk editing is limited only to changing the color of links. All other edits must be made manually for each individual element.

## AMP Support
For **Pixcraft** users, the [**AMP technology**](https://pixcraft.io/blog/how-to-implement-amp-emails-into-your-email-strategy) (which makes it possible to add interactive components to a template) is available immediately after registration. Such components make email campaigns even more engaging.

For example, it is possible to include an **AMP carousel** that allows readers to switch between images directly in the email.

<Img
img="/api/uploads/12_amcaroupix_5807a6d82d.png"
alt="AMP carousel in Pixcraft"
/>

It is also possible to add an **AMP form** so that the reader can, for example, ask a question and submit it without leaving the email client.

<Img
img="/api/uploads/13_amfopix_2f9315ab8d.png"
alt="AMP form in Pixcraft"
/>

Additionally, **Pixcraft** allows users to create standalone AMP components:

- **AMP-Form** — for advanced creation of surveys and feedback forms.<br><br>
- **AMP-List** — for loading and updating data in real time, enabling dynamic collections and other content within an email.<br><br>
- **AMP-Link** — for confirming registration or subscription directly in the email client.<br><br>
- **Interactive Stream** — for displaying a response feed in the email, where each reader can leave their comment.

For **Letteros**, AMP support is included in the list of planned updates, yet as of the time of publishing this article, the builder does not support this technology. Therefore, at the moment, users can work only with the standard capabilities of HTML emails.

## Social Media
Social media icons have become common practice for continuing communication with a brand and are constantly used in email campaigns. **Pixcraft** takes this important detail into account and offers a wide selection of social media icons. Yet most importantly, it brings extensive options for editing them.

In the email builder interface, users can:

- Select the necessary icons from a wide list of available platforms.<br><br>
- Change the appearance of the icons and logos, from size and spacing to colors and rounding, so that each icon looks natural in the email.

<Img
img="/api/uploads/14_socicopix_162f2eadb3.png"
alt="Social media icons in Pixcraft"
/>

In **Letteros**, social media icons are available in a special Element. It is possible to add up to 5 icons, set their width, or specify alt text. But changing the color, shape, or style of the icon using the email builder is not possible. Therefore, when users need to modify an existing icon, the only option is to use other tools and upload the images.

<Img
img="/api/uploads/15_socicolet_4aed356381.png"
alt="Social media icons in Letteros"
/>

## Email Preview
In **Pixcraft**, template preview works as a separate tool. The email template can be viewed in two main modes:

- **Desktop mode**, full screen width.<br><br>
- **Mobile device mode** with the ability to manually adjust the width down to a single pixel.

<Img
img="/api/uploads/16_resolpix_fd9e37c6b6.gif"
alt="Template preview in Pixcraft"
/>

Additionally, a set of useful extra functions is provided. These include previewing in light and dark modes, viewing AMP and HTML versions, checking dark mode for Gmail on iOS, as well as the ability to export the layout as an image using the Screenshot button.

In **Letteros**, the preview is embedded directly into the workspace. In particular, here it is possible to check the email in light and dark modes. However, width checking is limited to only three values: 768px for desktop and 375/425px for mobile devices. Specifying a custom resolution is not possible.

<Img
img="/api/uploads/98resolrepl_ca5501ecf6.gif"
alt="Template preview in Letteros"
/>

## Final Thoughts
**Pixcraft** and **Letteros** offer two different approaches to working with email templates.

In **Letteros**, the foundation of an email is a master template. Initially, it is created manually by a coder and marked up with special syntax. Users can then only manipulate predesigned blocks by changing their content without being able to edit the structure (except by editing the code).

**Pixcraft**, in turn, provides maximum freedom for building emails. Any creative idea can be implemented without code editing. Each separate block, element, or gallery template can be adapted down to the smallest details. Bulk editing and Link Map speed up routine processes and make them more convenient. And for an easier start, **Pixcraft** allows users to export ready-made email layouts from Figma.

Try **Pixcraft** in action: [**sign up today**](https://app.pixcraft.io/user/register) and get 14 days of free access. Have questions? [**Contact us**](mailto:team@pixcraft.io), and we will gladly discuss all the details with you.<br><br>

_Facebook, Instagram, and WhatsApp are owned by Meta Platforms Inc., recognized as an extremist organization and banned in the Russian Federation._

_Viber and LinkedIn are blocked in the Russian Federation._

_Access to the social network X (formerly Twitter) is restricted in the Russian Federation._

In this article, we compare the core functionality of the Pixcraft and Letteros email builders — their flexibility, features, approach to email template editing, and more.

small_pix_vs_let_cover.png

thumbnail_pix_vs_let_cover.png

pix_vs_let_cover.png

Pixcraft vs Letteros: Testing the Capabilities of Email Builders

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

Today, visual email editors have become commonplace in email marketing. With their help, email templates can be crafted without a single line of code: everything is done directly in the interface, and the result is immediately visible on the screen.

In this article, we will compare the **Pixcraft** visual email builder with the popular international service **Beefree** and examine how exactly these tools differ in their approach to creating and editing email templates.
## Working with the Canvas
### Elements and Structures
Both builders operate on the **drag-and-drop** principle: simply drag the required element onto the canvas and edit its content. Their toolkits include both basic elements (such as text, images, buttons, or dividers) and ready-made structures. However, **Pixcraft** and **Beefree** take different approaches to working with the latter.

Ready-made blocks in **Pixcraft** contain **columns**: horizontal and vertical layouts consisting of individual elements. This format provides particular advantages:
- it’s possible to configure both individual elements and the **entire column at once** (for example, set its background, borders, rounding, and spacing);<br><br>
- users can **move the entire column** with all its contents without having to drag each element separately.

<Img
img="/api/uploads/001_columnspix_6e2b1f5277.gif"
alt="Moving a column in Pixcraft"
/>

Blocks and individual elements can easily be saved for future use. This is a convenient solution if you regularly need to add recurring elements to your emails, for example, a ready-made footer or promo block.

In **Beefree**, the basis for the structure of emails are horizontal **Rows** that contain individual content elements and can also be saved for future use. This approach is convenient but imposes limitations on flexibility:
- users can edit either the **properties of the entire Row** or each individual element within it;<br><br>
- it’s impossible to combine several elements into a single structure inside a Row: you will have to move either the entire Row or each element separately.

<Img
img="/api/uploads/02_ryadbee_8924c2c1f2.png"
alt="Row example in Beefree"
/>

### Settings and Styling
In large emails with dozens of identical elements, making edits can take a lot of time. **Pixcraft** simplifies this task thanks to the **Styles** panel, which automatically detects and groups similar elements:
- texts and buttons with the same features (color, style, font) are combined into unified categories;<br><br>
- with a single action, users can change the design of all identical elements at once — for example, the button color or the text font;<br><br>
- a target icon next to each parameter can be used to highlight the elements that will be affected by the changes.

<Img
img="/api/uploads/003_stylespix_5139385bed.gif"
alt="Styles panel in Pixcraft"
/>

**Beefree** offers general configurations at the template level. For example:
- set the background and email width;<br><br>
- choose a default font;<br><br>
- change the color of all links.

<Img
img="/api/uploads/04_nastroikibee_466064020b.png"
alt="Template settings in Beefree"
/>

While these settings are useful, they don’t allow users to bulk update all buttons or necessary text elements at once. **Beefree** provides an additional solution called Brand Style Management, which makes it possible to apply styles to the entire template or to Rows (for example, button styles). However, it can only be used through the API, not directly in the builder, and requires additional integration.
### Links
Large email campaigns may include numerous unique links. **Pixcraft** offers a special tool, the **Link Map**, to conveniently work with them. It displays all email elements that contain hyperlinks, ensuring full control over them:
- the list of all links in the email is presented in a single panel;<br><br>
- users can make edits without wasting time on searching for each separate element on the canvas;<br><br>
- easy to track outdated or incorrect links;<br><br>
- as with the **Styles** panel, it features a target icon, which highlights the element that contains the link.

<Img
img="/api/uploads/005_linkmappix_566c4d69ef.png"
alt="Link Map in Pixcraft"
/>

**Beefree** does not offer a unified panel for managing hyperlinks. These must be **edited manually directly in the template**: users need to locate the element, open its settings, and change the link. The only exception are social media links with a dedicated panel. But other links in buttons, images, and texts have to be specified or edited one by one.

<Img
img="/api/uploads/06_ikonkibee_d85b7edb27.png"
alt="Social media icons settings in Beefree"
/>

### AMP Support
AMP technology makes email campaigns interactive, adding brightness and engagement to them. In **Pixcraft**, AMP elements are available **by default** and serve as a fully functional tool, not an experimental feature.

Working with them is as simple as with other email elements. AMP blocks are added by dragging them onto the canvas and can be easily configured directly in the interface. The number of available AMP components is expected to increase in the future.

<Img
img="/api/uploads/007_ampelpix_3703341122.png"
alt="AMP component in Pixcraft"
/>

**Beefree** can also be used to craft interactive emails. However, it’s not possible to add AMPHTML directly into a template: only special AMP widgets can be used via the **Beefree SDK**. This means that:
- a separate developer account is required;<br><br>
- the SDK must be connected, and those who work with email templates must be familiarized with technical aspects.

### Template Preview
Preview is an important step before sending an email. It helps ensure that the template will look exactly as intended. **Pixcraft** provides an extended set of tools for previewing email templates:
- **preview on desktop and mobile devices** with the option to set a custom screen width for the latter;<br><br>
- separate preview of the **AMP and HTML versions** of the email to check the display of interactive blocks;<br><br>
- email preview in **dark mode** (including **dark mode in Gmail on iOS**, one of the most layout-sensitive email clients);<br><br>
- a built-in **screenshot feature** that allows the user to quickly share results with colleagues or clients.

<Img
img="/api/uploads/008_previewpix_72d383a887.png"
alt="Preview mode in Pixcraft"
/>

**Beefree** also supports preview scenarios: 
- switching between desktop, smartphone, and tablet modes;<br><br>
- the ability to set a custom screen resolution;<br><br>
- preview in dark mode;<br><br>
- HTML and AMP versions preview (when using **Beefree SDK**).

At the same time, **Beefree** does not support dark mode simulation in Gmail on iOS, where color inversion may behave differently compared to other email clients. It’s also not possible to take a full screenshot of the email using the editor’s built-in capabilities.

<Img
img="/api/uploads/09_predprosmbee_65cc61d862.png"
alt="Preview mode in Beefree"
/>

## Ready-Made Solutions and Icons Customization
### Template Gallery
Although **Pixcraft** is a relatively new email builder on the market, its library already includes more than 100 ready-made templates and is regularly updated. The collection covers the most in-demand email marketing scenarios:
- welcome emails for new subscribers;<br><br>
- promotional newsletters with offers and discounts;<br><br>
- trigger-based messages;<br><br>
- product selection for e-commerce.

<Img
img="/api/uploads/010_gallerypix_6efb580583.png"
alt="Template gallery in Pixcraft"
/>

Each template can be easily adapted to a brand’s style. The flexible editing system allows users to turn any draft into a unique email without the need to create one from scratch.

**Beefree**, thanks to its many years on the market, has assembled a truly extensive library: users have access to more than 1,700 templates. Here, you can find solutions for a wide variety of tasks, from e-commerce and promotions to event-driven campaigns and B2B communications.

<Img
img="/api/uploads/11_galereyabee_a635dc97d6.png"
alt="Template gallery in Beefree"
/>

### Social Media Icons Customization 
At first glance, social media icons may seem like a minor element, yet such small details can influence the overall perception of a brand. Through them, a company guides subscribers to its social pages, which is why it’s important that these elements look consistent with the brand’s style.

**Pixcraft** places special emphasis on customizing social media and messaging apps icons. In particular, users can:
- change the logo and background colors of icons to match the brand palette;<br><br>
- add or remove logo borders;<br><br>
- adjust the degree of rounding and spacing;<br><br>
- apply different styling to each individual logo.

<Img
img="/api/uploads/012_socicopix_5125192f3c.png"
alt="Social media icons settings in Pixcraft"
/>

As a result, even a standard set of icons can be seamlessly integrated into a company’s visual style: icons and logos will look as if they were originally designed for that specific brand or campaign.

<Img
img="/api/uploads/013_iconspix_099134c0d2.png"
alt="Social media icons in Pixcraft template"
/>

**Beefree** also provides ready-made icons within the editor. Users can select a preset style, quickly add icons to the email, configure links, and set alt text. However, the appearance of icons remains fixed:
- logo colors cannot be changed manually and will remain adherent to the selected style;<br><br>
- manual customization of backgrounds, rounding, and logo borders is not available;<br><br>
- if a brand’s style requires special design, custom icons have to be prepared and uploaded.

<Img
img="/api/uploads/14_socsetybee_cee0b99317.gif"
alt="Social media icons collections in Beefree"
src="Facebook and Instagram are owned by Meta Platforms Inc., which has been designated as an extremist organization and is banned in the Russian Federation. Access to the social network X (formerly Twitter) is restricted in the Russian Federation, and LinkedIn is blocked in the Russian Federation."
/>

## Localization, Exporting, and Integrations
### Language Support
**Pixcraft** is available in English and Russian, making it a great fit for both Russian-speaking and global audiences. For instance, the following is provided in two languages:
- the entire interface;<br><br>
- documentation, knowledge base, blog articles, and email templates;<br><br>
- additional tools such as the [**HTML to AMP converter**](https://pixcraft.io/converter) and [**TJML Framework**](https://pixcraft.io/framework).

**Beefree**, by default, is available only in English, including the email builder interface, knowledge base, and documentation. **Beefree SDK** supports 20+ languages, but this feature is available only in Core price plan and above. Such plans are suitable mostly for the corporate segment, with their price starting at $1,000 per month. Therefore, localization in **Beefree** remains mainly an option for large companies.
### Exporting and Integration with Services
Once a template is assembled and verified, the next step is exporting or direct integration with email platforms. 

Here, **Pixcraft** offers several convenient formats:
- **HTML** — a universal format that can be used in any ESP;<br><br>
- **ZIP archive** — convenient for storing and sharing templates with team members or clients;<br><br>
- **AMP version of the email** — for campaigns with interactive blocks;<br><br>
- **EML file** — can be opened in Outlook, Thunderbird, or another email client to immediately check how the campaign will look to subscribers, or to carry out a small internal email distribution to company employees without the need for an ESP.

<Img
img="/api/uploads/015_exportoptionspix_cf1125d2eb.png"
alt="Export options in Pixcraft"
/>

In addition, **Pixcraft** supports direct export to ESP platforms. The list of integrations includes both international services (**Mailchimp**, **Klaviyo**, **SendGrid**, **SendPulse**) and Russian providers, such as [**Altcraft**](https://altcraft.com), **enKod**, **Sendsay**, **Unisender**, and others.

<Img
img="/api/uploads/016_servicespix_9a27c0814c.png"
alt="Supported platforms in Pixcraft"
/>

**Beefree** also provides a number of export and integration options. By default, users can:
- download an email in HTML format with images;<br><br>
- export it as a PDF file;<br><br>
- use ready-made connectors to major international platforms (**Mailchimp**, **HubSpot**, **ActiveCampaign** and others);<br><br>
- copy the HTML code for insertion into an ESP.

At the same time, it comes with some limitations:
- direct export of the AMP version of an email is supported only when using **Beefree SDK**;<br><br>
- specific formats (such as EML) are not available “out of the box” and require a separate connector;<br><br>
- there are no direct integrations with Russian services, only through the Custom Connector option (but this requires a developer to configure the API).

<Img
img="/api/uploads/17_exportybee_2f7242b4cb.png"
alt="Export options in Beefree"
/>

## Business Integrations
**Beefree SDK** allows users to integrate the email editor directly into a product or a company’s internal platform. With its help, companies can deploy the editor in a white-label format without the **Beefree** logo, adapt the interface to the corporate style, and also manage their own blocks and templates.

**Pixcraft** is also available for integration into business platforms and corporate products. It supports deep customization, from the visual layer to functional logic. This approach brings particular value to large businesses where it’s important to organize marketing campaign management in the format of a single product.

Additionally, **Pixcraft** offers **On-Premises deployment**. Such an approach ensures full autonomy and control over processes. In this case, not only the editor itself but the entire **Pixcraft** ecosystem is deployed within the client’s internal infrastructure:
- storage and analytics of AMP emails, including working with AMP forms;<br><br>
- collection of unique statistics and subscriber feedback, as well as storing them within the company’s own infrastructure;<br><br>
- execution of all AI processes (such as image creation, AI-based generation of email templates based on descriptions, and others) exclusively within the corporate infrastructure.

To learn more about integrating **Pixcraft** into your business, [**contact our team**](mailto:team@pixcraft.io), and we will provide you with detailed information about all available options. 
## Conclusion: Which Tool to Choose?
Both **Pixcraft** and **Beefree** solve the same task: they help create email templates without coding. However, the two tools take different approaches.
- **Beefree** remains a proven international visual HTML email editor with a large template library, integrations for global teams, and an easy-to-learn interface.<br><br>
- At the same time, **Pixcraft**, in addition to its convenient interface, immediately offers a full set of tools for creating large-scale email campaigns. These include built-in AMP support, centralized editing of styles and links, as well as integrations with both Russian and international services.

Ready to see it for yourself? [**Try Pixcraft**](https://app.pixcraft.io/user/register) today and experience how much easier your work with email templates can become.

In this article, we'll take look at two visual email builders, Pixcraft and Beefree, and compare them based on various characteristics so that you can choose the best option for your work.

small_image (2) (1).png

thumbnail_image (2) (1).png

image (2) (1).png

Beefree vs Pixcraft: Which Tool to Choose for Your Email Campaigns

Personalization in email campaigns can take many forms, from simply inserting the recipient’s name to offering a personalized discount. But it is far more impactful when the template adapts dynamically: shows items in the cart, suggests accessories for a recent purchase, or reminds the user about previously viewed products. Such emails feel like a continuation of a conversation rather than generic mass messages.

In this article, we will cover dynamic content: what it is, why it matters, and how it works.
## What Is Dynamic Content
**Dynamic content** refers to elements in an email that change automatically at the moment of sending. They can be unique for each recipient or segment, turning a template into a personalized message.

<Img
img="/api/uploads/cards_1fd36caf6a.png"
alt="Product card tempaltes in Pixcraft"
/>

Examples of dynamic elements include:<br><br>
<Table>
| Element  | Description               |
| --------- | ------------------------ |
| **Product Cards** | Generated from a YML or JSON feed or through CDP tools, and adapted to a specific user or segment. These can also be universal cards that don’t require manual re-coding: the system automatically adds products and prices from the website or CDP. |
| **Current Promotions** | Inserted into the email based on the user’s region, their interaction history, participation in A/B testing, and other data. |
| **User Bonus Balance** | Displays personal bonuses, accumulated points, or available privileges. |
| **News and Articles** | Depend on the type of email campaign. For example, you can automate a monthly digest by loading the most popular blog posts into the template. |
</Table>

## Why Use Dynamic Content
In short — to make emails more effective, faster to develop, and easier to scale. Below, we’ll go into the main advantages in more detail.
### Increased Campaign Effectiveness
When the email is tailored to the user’s interests, it feels relevant and attracts more attention. Deep personalization helps to:
- Better meet audience needs<br><br>
- Keep attention through relevant offers<br><br>
- Convert clicks into targeted actions
### Easy Scalability
Without dynamic content, you have to create a separate template for each segment — a process that may take dozens of hours. With dynamic content, you only need to create a single template, and the system will automatically insert the necessary blocks. This allows new campaigns to launch faster, even in large-scale projects, while keeping the email structure clean and manageable.
### Timely Response
Dynamic content is useful for reacting when the user is most engaged and interested. For this, you can set up automated scenarios, such as:
- **When a customer has viewed a product several times on the website** → Send an email with similar products or accessories<br><br>
- **When a customer has placed an order** → Send an email with “You might also like…” recommendations<br><br>
- **When new arrivals appear in a product category the customer has purchased from before** → Send an email “You may be interested in these new products”
### Less Routine Work
A well-thought-out template with dynamic elements reduces the number of repetitive tasks required for preparing emails. This frees up time for more complex processes, such as developing creative materials and strategy planning.
## How Dynamic Content Works in Emails
For an email to become dynamic, it must contain specific logic that allows the content to change automatically. For this, email marketing platforms use special tools: template engines, conditions, loops, and external data sources.
### Variables: Data Insertion
This is the simplest form of personalization. Variables insert the necessary values from a database into the email, such as name, city, order amount, registration date, and other information.<br><br>
**Examples of variables:**
<Table>
| Variable  | Description               |
| --------- | ------------------------ |
| `{{user.name}}` | Recipient’s name |
| `{{user.city}}` | City from the address database |
| `{{item.title}}` | Product name from the data array |
</Table>
<br><br>

Such variables can be used in the body text, links, images, or subject lines. The key point is that the data must be available in the system at the time the email is generated; otherwise, the variable will remain empty.
### Loops: Iterating Through Lists
Loops are used to display a list of items in an email, for example, a set of recommended products.<br><br>
**Loop example:**

```xml
{% for product in recommendations %}
  <div class="product-card">
    <img src="{{product.image}}" alt="{{product.title}}">
    <p>{{product.title}}</p>
    <p>{{product.price}} USD</p>
  </div>
{% endfor %}
```

In this case, if five products are featured in `recommendations`, the email will display five product cards.
### Conditions: Displaying Relevant Content
Conditions control which content is shown depending on the user’s gender, status, activity, or other parameters. For example, these can be used to show one content block only to men and another only to women.<br><br>
**Conditions example:**

```xml
{% if user.gender == "male" %}
  <img src="banner-men.jpg" alt="Men’s collection">
{% elseif user.gender == "female" %}
  <img src="banner-women.jpg" alt="Women’s collection">
{% else %}
  <img src="banner-default.jpg" alt="New arrivals">
{% endif %}
```

Conditions can also be combined with loops, for example, to display products only within a certain price range or from selected categories.
### Feeds: Connecting External Data
To add up-to-date information on categories, prices, and product availability, you can use external data sources, such as YML or JSON files.

The platform loads the feed and makes its content available for display in emails. Since the data is loaded from an external source (such as the store’s website), it remains relevant in campaigns.<br><br>
**General example of connecting a YML feed:**

```xml
[% external_extra("https://site.ru/catalog.yml", "format", "yml") %]
```

## How Dynamic Content Works In Different Platforms
As an example, let’s take a look at how dynamic content is implemented in three popular mass mailing platforms: **Altcraft**, **Sendsay**, and **DashaMail**.
### Altcraft
[**Altcraft**](https://altcraft.com/) Platform features Market — a module for working with product and customer order data. It allows you to use this data in email campaigns to generate dynamic content.

The following can be used in templates:
- **Products**. Prefix — `product`. A basic product card that contains the name (`name`), identifier (`external_id`), categories  (`categories`), custom fields (`custom_fields`), and other parameters.<br><br>
- **SKU (Stock Keeping Unit)**. Prefix — `sku`. Variations and product attributes, such as product manufacturer (`manufacturer_name`), availability (`is_available`), courier delivery option (`delivery`), and others.<br><br>
- **Order**. Prefix — `order`. Includes general information about a single order, such as identifier (`external_id`), status (`status`), and total price (`total_price`).<br><br>
- **Orders**. Prefix — `orders`. Allows for selecting multiple orders in a profile list.

Altcraft Platform supports two main methods of importing product data:
- **YML**. Format developed by Yandex and used for describing products. Suitable for bulk export from CMS, marketplaces, or warehouse systems. Includes store name, categories, product list, prices, and other parameters.<br><br>
- **JSON**. Supports uploading product entities, SKUs, categories, orders, and items with required parameters (`external_id`, `name`, `entity_type`, and others). With JSON, you can add data generated on your server directly at the time of sending.

Below is an example of inserting product cards into a template. This is a simplified version of the code, showing only the key fragments:

```xml
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">
{for $index $el = products("product.manufacturer_name == 'Apple'" 4 "price" "desc")}
<div style="display: inline-block;width:300px;">
    <div><a href="{$el.url}" ><img src="{$el.pictures}" /></a></div>
    <div><a href="{$el.url}" >{$el.name}</a></div>
      {if "el.old_price"}
        <div><s>{$el.old_price}</s></div>
    {end}
      <div>{$el.price}</div>
    <a href="{$el.url}" >Buy now</a>
</div>
  {if iseven($index)}
        
    {else}
          {if $index lt 3}
          
          {end}
    {end}
{end}
</td></tr>
</table>
```
Let’s break down some of its elements:
- `for $index $el` — a loop that outputs an array of elements. In this case, the array is a list of products.<br><br>
- `products("product.manufacturer_name == 'Apple'" 4 "price" "desc")` — a product query. It contains four parameters: filter (which products to display), number of products, field to sort by, and the sort order.<br><br>
- Another important detail is the condition under the product card. To ensure proper display in Outlook, the correct table structure must be maintained. Depending on whether the current card number is even (`if iseven($index)`), the template should either move to the next cell in the same row or end the current row and start a new one. This is handled using conditional comments that Outlook can interpret and process.

A major advantage of Altcraft Platform is the unified template syntax for different channels — email, push notifications, SMS, and messengers. The same insertion and filtering logic works across all communication formats, simplifying the setup and scaling of campaigns.
### Sendsay
[**Sendsay**](https://sendsay.com/) is equipped with the **PROScript** language, a content templating mechanism for email campaigns. It is designed to allow the following directly within an email template:
- Generate dynamic content<br><br>
- Control structure based on conditions<br><br>
- Insert data from external sources

PROScript supports:
- **Variables**. Provide access to profile field values or data from an external source. A variable can be a hash, a link to an array, or an object.<br><br>
- **Loops** (`foreach`). Allow for iterating through data arrays (for example, a list of promotions or gifts).<br><br>
- **Conditions** (`if`, `elsif`, `else`). Display content blocks depending on variable values.<br><br>
- **Operators** (`==`, `!=`, `and`, `or`). Enable building complex, compound checks and nested conditions.

For e-commerce scenarios such as “Abandoned Cart” or “Abandoned View”, Sendsay uses external YML files. In addition to product descriptions, these can contain a list of categories, promotions, and gifts. Elements in these sections are accessible via special keywords in the path:

- `[% yml.CATEGORY.<id>.* %]` — product categories, where `<id>` is the value of the id attribute of the `<category>` tag in the YML file, identifying a specific category in the catalog.<br><br>
- `[% yml.GIFT.<id>.* %]` — list of gifts, where `<id>` matches the value of the id attribute of the `<gift>` tag describing a specific gift.<br><br>
- `[% yml.PROMO.<id>.* %]` | — list of promotions, where `<id>` is the value of the id attribute of the `<promo>` tag describing the terms and details of the promotion.<br><br>

Here is a simplified example of inserting product cards from a JSON file into a template:

```xml
[% external_extra("URL/products.json","ignore_error","1","timeout","1") %]

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">
[% FOREACH item IN products %]
<div style="display: inline-block;width:300px;">
    <div><a href="[% item.url %]"><img src="[% item.pictures %]" /></a></div>
    <div><a href="[% item.url %]">[% item.name %]</a></div>
      [% IF item.old_price %]
        <div><s>[% item.old_price %]</s></div>
    [% END %]
      <div>[% item.price %]</div>
    <a href="[% item.url %]">Buy now</a>
</div>

        [% IF loop.index % 2 == 0 %]
            
        [% ELSE %]
		[% IF !loop.last %]
            
        	[% END %]
        [% END %]

[% END %]
</td></tr>
</table>
```
Key points to note:
- `external_extra` requests a JSON file with the product catalog.<br><br>
- `[% FOREACH item IN products %]` loop iterates through all loaded products.<br><br>
- Proper display in Outlook is ensured through a table-based layout. For this, the code checks whether the current iteration is even: `[% IF loop.index % 2 == 0 %]`. 

**How it works upon sending:**
- The platform loads data from JSON.<br><br>
- Filtering and selection of required elements are performed directly in the template.<br><br>
- The recipient sees content generated according to the set rules — for example, products from a chosen category or promotions for a specific segment.
### DashaMail
Unlike Altcraft and Sendsay, [**DashaMail**](https://dashamail.ru/) does not have a full-fledged template language with loops and conditions in the usual sense, but it does include a mechanism for automatically inserting product data from a YML file. The file must first be added in the “Products” section. It’s important to note that product insertion in DashaMail is **only available for trigger emails**.

Here’s how a basic example of adding product cards looks like:

```xml
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">


<div style="display: inline-block;width:300px;">
    <div><a href="%YML_URL%"><img src="%YML_IMAGE%" /></a></div>
    <div><a href="%YML_URL%">%YML_NAME%</a></div>
        <div><s>%YML_OLDPRICE%</s></div>
      <div>%YML_PRICE%</div>
    <a href="%YML_URL%">Buy now</a>
</div>

</td></tr>
</table>
```

Let’s take a closer look at some of the details:
- `` — a loop that outputs product cards.<br><br>
- `...` — for displaying cart data.<br><br>
- `...` — for displaying recently viewed products.<br><br>
- `` — sets a limit on the number of displayed products.

It’s not possible to add conditional comments for proper rendering in Outlook here. For layout purposes, other solutions need to be used — for example, displaying one card per row or applying CSS media queries for adaptation.
## Tips for Working with Dynamic Content
Before launching a campaign, it’s important to check how the email looks and behaves in real-life conditions. Here are the key points to keep in mind:
- **Test templates in different email clients**. For example, Gmail may cut off content, and Outlook may display tables incorrectly. Check data insertion: for instance, what happens if the loop outputs only one product instead of four. Also check rendering on both desktop and mobile devices.<br><br>
- **Use a fallback if data is not loaded**. For example, if the cart is empty or a field has no value. If a product is unavailable, show a placeholder (e.g., “Product will be available soon”) or hide empty blocks entirely.<br><br>
- **Avoid overloading with too many items**. If there are too many products in the email, it’s harder for the reader to focus. Limit the template to 4–6 product cards. Below them, add a “View All” button that opens the full product list on the website.<br><br>
- **Limit image sizes**. Heavy images slow down email loading. Compress them to an optimal size — ideally, up to 100 KB each.
## Conclusion
When implemented correctly, tested thoroughly, and aligned with user behavior, dynamic content becomes a powerful email marketing tool. The key to success is a combination of technology with attention to detail:
- Choose the right tool for the task and complexity level<br><br>
- Test scenarios and template responsiveness<br><br>
- Ensure data accuracy and high-quality rendering

And if you wish to avoid the complexities of coding, use our convenient [**Pixcraft visual email builder**](https://pixcraft.io). Bring your ideas to life quickly and without the need to dive into complicated technical details.

Learn more about dynamic content in email campaigns: why it matters, how to use it, and how it works in different mailing platforms.

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

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

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

How to Use Dynamic Content In Email Campaigns

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

We're thrilled to introduce the updated Pixcraft email builder that makes creating email campaigns faster and more convenient, no matter how complex the task is. Here’s a closer look at what has been changed, what new features we’ve added, and why building emails is now easier than ever.
## Flexible Approach to Template Design
Different users have their own methods for creating emails. Some prefer to build a template from scratch and control every detail, while others prefer to rely on ready-made solutions to save time. To accommodate this, we took different workflows into account so you can get started in the format that suits you best.
### Creating Emails from Scratch
If you want full control over the process, start with a blank canvas and build the structure of your template using **primitives**: blocks and columns that include text, images, buttons, dividers, and other basic elements. Each component is highly customizable, from fonts and colors to borders, corner radius, and spacing.

<Img
img="/api/uploads/primitives_cbd64f47cd.png"
alt="Primitives"
/>

### Crafting a Template with Assets
If it’s not necessary to start from scratch, you can create a template using pre-designed **assets**: structured blocks such as product cards, banners, footers, headlines with buttons, and more. Just drag the block into your email template and adapt it to your needs.

<Img
img="/api/uploads/assets_7962583708.png"
alt="Assets"
/>

The best part is, just like with primitives, you can fully customize pre-designed assets, adding your own text, images, and other key elements.
### Ready-Made Templates for Various Campaigns
Need a head start for your project? Head over to our [**template gallery**](https://pixcraft.io/templates)! Here, you'll find dozens of options crafted for a variety of formats and occasions:
- Promotional campaigns

- Welcome emails

- Broadcast campaigns

- Recurring newsletters

<Img
img="/api/uploads/gallery_59114c7782.png"
alt="Template gallery"
/>

Templates can be easily filtered by email type, industry, or event such as Black Friday, New Year, or a product launch.
### Direct Import from Figma
For those who prefer working in Figma, we’ve added full import support via the [**Pixcraft plugin**](https://www.figma.com/community/plugin/1403763341617358835/). Now you can design your layout in Figma and transfer it directly into Pixcraft (or export it as an HTML template, as before). This allows you to retain Figma’s flexibility while gaining the convenience of a visual email builder.
## Full-Fledged Workspace
Pixcraft is more than just a tool for crafting email templates. It's a powerful working environment that provides you with creative freedom:
- Modify the layout directly on the canvas and see changes in real time.

- Customize every detail, from large sections down to the smallest elements.

- Easily drag-and-drop blocks and elements to rearrange template layout.

<Img
img="/api/uploads/placement_5e80d0e6c5.gif"
alt="Rearrangement using drag-and-drop"
/>

If you use certain elements regularly, store them in your personal elements library for quick and easy access. Here’s how to save an element:
- Select the required element. You can choose anything from a single button to a full product block.

- Click the star icon that appears above the selected element.

- The element is now stored in the library and becomes available for use in future emails.
## Unified Configuration Panel
In the Pixcraft email builder, settings for all elements are managed through the **Configuration Panel**. It is divided into several tabs:
- **Plus** — here, you can add primitives, pre-designed blocks, or saved elements to your email template.

- **Pencil** — appears when you select an element. The panel automatically switches to the settings that are relevant for this specific element, such as size and roundings for an image or font and line spacing for text. 

- **Palette (Styles)** — use this option to quickly edit multiple similar elements, like buttons or text blocks. The panel automatically groups similar elements for batch adjustments. To make element navigation smoother, use the Target icon: it appears next to a parameter when you hover over it. Simply click on it to highlight all elements that match the chosen parameter. This is a convenient option for templates containing numerous similar components that need to be updated fast.

<Img
img="/api/uploads/styles_eef136d469.gif"
alt="Viewing related items using the Traget icon"
/>

- **Link Map** — helps you manage hyperlinks in text, buttons, and images using a single, unified interface. Here, you can easily change links in all the necessary elements without having to select each of them separately. The panel displays all links in a list, helping you ensure nothing is missed. Just like in the Palette, there is also a Target icon that helps to find necessary elements quickly.

<Img
img="/api/uploads/link_map_ab327884be.png"
alt="Link map"
/>

- **Comments** — a collaboration tool for work within a single company. It allows you to leave notes on the canvas, discuss the template with colleagues and, when necessary, mark comments as resolved. The commentator's avatar and name are displayed next to the comment itself. Comments placed on an element become "pinned" to it and retain their position when the element is moved. This helps maintain the context of the discussion within the individual components of the template.

- **Settings** — here, you can set the preheader (short text that appears next to the subject line) and the email title.
## Elements Designed with Precision
A number of elements used in Pixcraft can also be found in other email builders. However, we have significantly refined them to provide a thought-out and flexible customization mechanism.
### Social Media Icons
A set of icons for popular social media platforms is provided directly in the email builder: no need to search and upload images separately. The key feature, however, is their wide customization options. In particular, it’s possible to:
- Customize the color of the background and the logo itself.

- Change the shape of icons (square or rounded).

- Adjust the size, padding, borders, and other settings.

Each social media icon can be modified separately: this allows you to create a unique and cohesive design style.

<Img
img="/api/uploads/social_icons_803b653483.png"
alt="Social media icons"
/>

### Lists
For our email builder, we’ve created a custom component that replaces the standard HTML list (```<ul>/<li>```). It’s similar to ```<ul>/<li>``` in appearance and behavior, allowing you to customize fonts, marker colors, and indents between items. At the same time, it works reliably across different email clients including Outlook (which often renders standard lists incorrectly). This eliminates the need to sacrifice visual quality for compatibility. 

<Img
img="/api/uploads/list_ab02a922a3.png"
alt="List in Pixcraft email builder"
/>

### Tables
Need to include a price list or a schedule in your email template? Simply add and customize a table:
- Show or hide borders (all borders, only the outer borders, only horizontal dividers, or no borders at all).

- Set the text alignment, column width, and indents.

- Choose the background color and font for your table.

Just as with the lists, the table remains responsive and displays correctly on a variety of desktop and mobile clients.

<Img
img="/api/uploads/table_fix_076cd327d5.png"
alt="Table in Pixcraft email builder"
/>

### AMP Components
If you want to boost the engagement of your email campaign, one effective option is to add interactivity to your email using AMP components. Currently, two such elements are available in the Pixcraft email builder:
- **Image Carousel** — suitable for presentations, product selections, or promos.

- **Data Collection Form** — great for sign-ups, feedback, or quick surveys.

And we’re just getting started! More AMP features are currently in development, including components for gamification.

<Img
img="/api/uploads/carousel_8905fd2175.gif"
alt="Carousel AMP component"
/>

## Adapted for All Devices
We understand how important it is for your content to look equally good on all devices, be it a large desktop screen or a narrow smartphone display. With this in mind, we have implemented a flexible and precise system for responsive template design in Pixcraft.

Each element can be configured separately for the desktop and mobile versions. You can decide where and how it will be displayed:
- **Simultaneously in both versions**.

- **On the desktop only** — for example, if the element is too complex for a narrow mobile device screen.

- **In mobile clients only** — for example, when you require short adapted CTAs.

To make sure that everything is designed exactly as you intended, use the **Preview** function. It is located on the left side of the canvas, right above the Configuration Panel, and allows you to see the email through the eyes of the recipient before sending.

In preview mode, you can:
- Switch between the desktop and mobile versions of the email.

- Manually adjust the screen width to see how the layout behaves at different resolutions.

- Compare how the email displays in the dark and light theme.

- Enable or disable AMP elements.

<Img
img="/api/uploads/desktop_mobile_7636ee0ca4.png"
alt="Preview mode"
/>

## Our Plans for the Future
Pixcraft continues to evolve. We are expanding the capabilities of our platform and actively working on the implementation of tools based on artificial intelligence. These tools are going to handle routine tasks, speed up workflows, and let you focus on strategy and content.

For instance, the following features have already entered development:
- **Template generation**. Simply describe what kind of email you need, and AI will create a fully designed, responsive template in a few seconds.

- **Image generation**. AI will be able to create illustrations directly in the email builder: just enter the prompt and get a ready-made image.

- **Automatic text generation**. Suitable for headings, email body, product descriptions and other elements. AI will be capable of generating text, translating the email into the required language, and checking spelling, grammar, and sentence consistency.

- **Email editing by request**. Formulate what you would like to change in the email: for example, update the structure, replace the text or correct the colors. AI will understand your request and make necessary changes to the template.
## Conclusion
The updated Pixcraft email builder is a convenient, flexible, and scalable platform created for real-world email marketing tasks. It combines:
- Manual template editing for those who value full control over the process.

- Ready-made assets and templates for a quick start.

- Responsive design with vast customization capabilities.

- Clean, intuitive interface where every feature serves the desired purpose.

In the future, thanks to AI tools ranging from template and image generation to smart editing and translation, email design will become even more advanced and convenient. Try the upgraded Pixcraft email builder today and stay tuned for upcoming features. 

In this article, we discuss the improvements and updates in the Pixcraft email builder: tools, adaptability, different approaches to creating templates, and more.

Blog