Create email content with Drag & drop editor

Build email content in the Pushwoosh built-in editor without writing code. You get a reusable layout with content blocks, images, buttons, personalized text, and a compliant footer that you can use in a Customer Journey or a one-time email.

Note

Prefer HTML? Use the Pushwoosh HTML code editor for more control. Learn more

Important

Before you start, set up your email’s languages, subject line, and sender details. Learn how

Create new email content

1. Go to Content → Email content.
2. Choose how to start:
   • Click Create email content to open the drag & drop editor and build an email from scratch.
   • Click the arrow next to Create email content, then select Use a template to start from a pre-built layout in the gallery.
   • Click the arrow next to Create email content, then select HTML code to use the HTML code editor. Learn more

Explore the editor layout

Once you open an email, the built-in editor has these areas:

Top bar

Rename the email, undo or redo changes, and save your work. Open the ⋮ menu for more actions:

• Preview: see the email as it will render for recipients, with its own Desktop/Mobile toggle. See Edit the mobile view.
• Validate Liquid: check the Liquid syntax in your subject, preheader, footer, and body across all languages before you send.
• Test email: send a preview to a test device or address. See Send a test email.

Language / Subject / Preheader bar

Above the canvas, switch the editing language and set the subject line and preheader for the email. Learn how to set these up.

Canvas

See the email as recipients will see it, and edit text, images, and buttons directly on the layout. An empty email shows Start with a block.

Layers panel

Lists every block in your email as a tree, in the same order as on the canvas. Open it from the left edge to select a nested block or drag rows to reorder content.

Right panel

Switch between three tabs:

• Blocks: add content to the email. See Add content blocks.
• Settings: apply styling to the whole email at once. See Configure email-wide styling.
• AI: chat with the AI assistant to generate or edit content from a prompt.

Start building your email

1. Drag a block from the Blocks panel onto the canvas, or click a block in the panel to add it at the end of the email.
2. Keep adding blocks the same way until the layout is ready.
3. Open the Settings tab when you need email-wide styling.

Add content blocks

Open the Blocks tab and drag a block onto the canvas, or click a block to add it at the end of the email. Available blocks:

• Heading: titles and short headlines in the email
• Text: body copy and longer descriptions
• Button: a clickable call to action
• Image: pictures from Media store, upload, or URL
• Card: an image paired with a heading, text, and button in one layout
• Divider: a line that separates sections visually
• 2 columns: two equal columns side by side
• 3 columns: three equal columns side by side
• 4 columns: four equal columns side by side
• 33 / 67: two columns where the left takes about 33% of the width and the right about 67%
• 67 / 33: two columns where the left takes about 67% of the width and the right about 33%
• Timer: a countdown for offers and deadlines
• Menu: a row or column of links, such as navigation or contacts
• Social: icons that link to your social profiles
• HTML: custom HTML, such as a form, survey, or embedded video

Heading and text

Heading and Text blocks hold the copy recipients read in the email. Edit the text on the canvas and format it with the toolbar.

Click a Heading or Text block to edit its copy on the canvas. Select some text to bring up the formatting toolbar: bold, italic, underline, alignment, a link button, and a text style dropdown.

Merge Tags are placeholders that insert a Tag value from the recipient’s profile into the email, so each subscriber sees personalized copy. To add one, select the text, click Merge Tags in the toolbar, and choose a Tag from your account.

Image

An Image block displays a picture in the email. Select it on the canvas to open the Image settings in the right panel.

• Add image / Replace image: click Add image when the block is empty, or Replace image when a picture is already set. You can upload a file or pick one from your Media store.
• Image URL: paste a hosted link to the image.
• Alt text: describe the image for accessibility.
• Link URL: open a link when the image is clicked. See Add links for the available link types.
• Link target: open the link in the same tab or a new one.
• File: after you add an image, shows the path of the file in use.

In Spacing, turn on Padding to add space around the image. Use All sides for the same padding on every side, or turn on More options to set each side separately.

Card

A Card block pairs an image with a heading, text, and button in a single ready-made layout. Select it on the canvas to open its settings in the right panel.

• Layout: choose which side the image sits on relative to the content.
• Image: replace the image, set alt text, and (for AI-generated images) edit the prompt used to create it.
• Size & fit: set the image size and how it fits and positions within its area.
• Spacing: set the padding around the card’s content.

Button

A Button is a clickable call to action in the email.

Click a Button block to edit its label on the canvas. Use the toolbar to change font size, text color, bold, italic, underline, and alignment.

To set what happens when the recipient clicks the button:

• Click the link icon in the toolbar to open Insert/Edit Link.
• Or use Action type and URL in the Link section of the right panel.

See Add links for the available action types.

In the right panel, under Styles:

• Alignment: left, center, or right.
• Background, Text color, Font size, and Font family: turn each option on to override the default look.
• Border radius, Border color, and Border width: shape and outline of the button.
• Width: set a fixed button width or leave it automatic.
• Padding: add space inside the button. Use All sides for uniform padding, or turn on More options to set each side separately.

Divider

A Divider is a horizontal line between content blocks. Use it to separate sections visually in the email.

Configure line style (Solid, Dashed, Dotted), color, thickness, and width in the settings panel.

HTML

The HTML block lets you paste custom HTML into your email. Use it for a custom form, survey, or embedded video.

Examples

Lead form

This lead form collects an email address to send a promo code for the New Year Sale.

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
  h2 { font-size: 18px; margin-bottom: 8px; color: #222; }
  p { font-size: 14px; color: #666; margin-bottom: 20px; }
  input {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }
  button {
    width: 100%;
    padding: 14px;
    background: #CC0000;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<h2>Get your New Year Sale code</h2>
<p>Enter your email and we'll send you an exclusive promo code for up to 50% off.</p>

<div id="form">
  <input type="email" placeholder="Your email address" />
  <button type="button">Get my code</button>
</div>

</body>
</html>

Survey

This survey asks what category the recipient is shopping for and links each option to the relevant sale page.

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { margin: 0; padding: 20px; font-family: Arial, sans-serif; text-align: center; }
  h2 { font-size: 18px; margin-bottom: 6px; color: #222; }
  p { font-size: 13px; color: #888; margin-bottom: 20px; }
  .option {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    color: #222;
  }
  .option:hover { border-color: #CC0000; background: #fff5f5; }
</style>
</head>
<body>

<h2>What are you shopping for?</h2>
<p>Pick a category and go straight to your deals</p>

<a class="option" href="https://example.com/sale/clothing">👗 Clothing</a>
<a class="option" href="https://example.com/sale/electronics">📱 Electronics</a>
<a class="option" href="https://example.com/sale/beauty">💄 Beauty</a>
<a class="option" href="https://example.com/sale/home">🏠 Home & Living</a>

</body>
</html>

Video

This example embeds a New Year Sale promo video in the email.

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
  }
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>

<h1>New Year Sale — Up to 50% Off</h1>

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
</div>

</body>
</html>

Note

You can also add an unsubscribe link directly in the HTML block:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

The %%PW_EMAIL_UNSUBSCRIBE%% placeholder is replaced with the Pushwoosh unsubscribe URL when the email is sent.

Menu

The Menu block places several clickable items in a row or column. Use it for a navigation bar or a list of company contacts.

For each menu item, set:

• Label: the text recipients see
• URL: where the item opens
• Target: same tab or a new tab

In the block settings, you can also set:

• Direction: Horizontal or Vertical
• Alignment: Left, Center, or Right
• Separator: an optional divider between items
• Font, size, weight, letter spacing, and link/text colors

Social

The Social block displays a row of social media icons that link to your profiles. Use it to send recipients to Facebook, Instagram, X, and other platforms from the email.

Add platform entries, then set alignment, icon size, and the gap between icons.

Countdown timer

The Timer block is a countdown in the email. Use it for limited-time offers, flash sales, and event reminders.

To set it up:

1. In Countdown, set End date and End time, then choose the Timezone and Language for the timer labels.
2. Turn Labels on to show “days / hours / minutes / seconds” captions under the digits, or off for numbers only.
3. In Appearance, set Background, Digits color, Labels color, and the font size for digits (default 40px) and labels (default 16px).
4. Adjust Spacing (padding) as needed.

Columns

Columns split the canvas into side-by-side sections so you can place content next to each other in one row.

Drag one of these blocks onto the canvas:

• 2 columns: two equal columns
• 3 columns: three equal columns
• 4 columns: four equal columns
• 33 / 67: left column about 33% wide, right about 67%
• 67 / 33: left column about 67% wide, right about 33%

Then add content to each column. To change spacing for all columns in the email, open Settings → Columns defaults and adjust outer padding, column padding, and the gap between columns.

Save and reuse blocks

Save a block to reuse it in this or other emails instead of rebuilding it each time.

1. Click the block itself (its frame or background, not the text or button inside it) to select the whole block. Card, Columns, and Social are examples of blocks that work this way.
2. Click the bookmark icon in the block’s toolbar and give it a name.

Saved blocks appear under Saved blocks at the bottom of the Blocks tab.

• Drag a saved block onto the canvas, or click it to add it at the end of the email.
• Click the × on a saved block’s tile to delete it.

Edit the mobile view

Once you’ve added your content blocks, switch to mobile to check and adjust how they look on a phone. Next to the language switcher above the canvas, use the Desktop / Mobile toggle to switch into a fully editable mobile view at real phone width. Select, edit, and rearrange content exactly the way your subscribers will see it on their phone, instead of just previewing how the desktop layout adapts.

Every mobile-overridable setting has a checkbox next to it. When the checkbox is off, a hint shows the inherited desktop value, and the setting keeps using it. Turn the checkbox on to set a separate value for mobile. Turn it off again to fall back to the desktop value.

Set different padding and font size per device

• Padding: every block, column, card, and individual element (such as text, an image, or a button) has a padding control you can override for mobile. Switch the canvas to Mobile, turn on the checkbox next to Padding, and set the new value. The desktop padding stays the same until you turn the checkbox on.
• Font size: turn on Font size (mobile) on a text element to set a size just for mobile. Without this override, large headlines shrink automatically to fit the phone screen.

Control how columns stack on mobile

Columns layouts stack vertically on phones by default. In the mobile view, use Stack columns to set how each Columns block behaves:

• Stack: columns flow into a single column, top to bottom (default).
• Keep row: columns stay side by side, preserving the desktop layout.
• Reverse: columns stack in reverse order. Useful for image + text rows: keep the image on the right on desktop, but show it on top on mobile.

Show or hide content per device

Open a block or element’s settings and use Hide on mobile or Hide on desktop under Visibility to show it on only one device, so you can build device-specific banners, CTAs, or navigation without maintaining two templates.

Add links

Use the Insert/Edit Link dialog to set what happens when a recipient clicks a button or selected text. Choose an Action type, then fill in the fields for that action.

Open Website

Opens a link when the recipient clicks. Enter the address in URL.

Manage preferences link

Adds a link to the subscription preference center where recipients can choose which email categories they receive. The link is inserted automatically.

Unsubscribe link

Lets recipients opt out in line with regulations and their preferences.

Tip

You can also add an unsubscribe link in an HTML block:

<a href=%%PW_EMAIL_UNSUBSCRIBE%%>Unsubscribe</a>

The %%PW_EMAIL_UNSUBSCRIBE%% placeholder is replaced with the Pushwoosh unsubscribe URL when the email is sent.

What happens when the recipient clicks the unsubscribe link

If the subscription preference center is enabled

The recipient is unsubscribed only from the category assigned to that email (e.g., Newsletter). The category name is added to their Unsubscribed Email Categories tag.

A confirmation screen appears with Resubscribe and Manage preferences options. Learn more.

If the subscription preference center is not enabled

The recipient is opted out of all marketing emails and the Unsubscribed Emails tag is set to true. Transactional emails are not affected and will continue to be delivered. Learn more about message types.

Important

To let you deliver important emails to your customers, we do not delete unsubscribed users from your user base.

To continue messaging engaged recipients, create a segment filtered by Unsubscribed Emails = false. To avoid complaints, do not email recipients who have unsubscribed.

Clicks are counted in the unsubscribe rate in Message History.

Web version link

Gives recipients access to a web version of the email, useful if they have trouble viewing it in their inbox.

No track statistics

Opens a link when the recipient clicks, without counting the click toward your email’s click statistics. Enter the address in URL.

Subscription form confirmation link

Inserts a confirmation link for a subscription form submission (for example, to confirm a double opt-in). Learn more about double opt-in.

Configure email-wide styling

Email settings control styling for the whole email: document size and background, sender-facing options, and default styles for blocks.

Open the Settings tab in the right-hand panel.

Available sections:

• Document: size and look of the whole email area: width, padding, background color, background image or gradient, text color, font family, and the gap between blocks.
• Email options: turn View in browser and Unsubscribe link on or off for the email.
• Block defaults: starting background, background image, border color, border width, border radius, and default mobile/desktop visibility for blocks you add later, so new content matches the email until you override a block on the canvas.
• Columns defaults: spacing for every Columns layout: outer padding, padding inside each column, and the gap between columns.
• Card defaults: starting look for Card containers that group content in the layout, applied until you style a card individually.
• Button group defaults: spacing and alignment when several buttons sit together as a group.
• Button defaults: starting look for new Button blocks so CTAs stay consistent across the email until you style one separately.
• Divider defaults: starting line style, color, thickness, and width for new Divider blocks.

Note

Some defaults, such as visibility, can be set separately for desktop and mobile. See Edit the mobile view.

Defaults apply wherever an individual block does not override them.

Configure the email footer

Every email includes a Footer block for the legally required sender information and unsubscribe link. Select Footer in the Layers panel to open its settings.

Use Load from account to pull in your saved account-level footer, or Save as account default to reuse the current footer as the starting point for future emails.

• Email type: Marketing or Transactional. Unsubscribe visibility follows this setting.
• Logo: set the logo URL or pick one from the gallery, then set the width in px and an optional click-through link.
• Company name, Postal address, and Copyright: your sender identity in the footer.

Caution

Marketing emails must include a physical postal address (CAN-SPAM).

In Links & badges:

• Footer links: add labeled links, such as Privacy Policy or Terms.
• App store badges: add App Store or Google Play badges with destination URLs.
• Social links: add icons that link to your social profiles.

In Style:

• Text color: set the footer text color.
• Font size (px): set the footer font size.
• Alignment: left, center, or right.
• Underline links: turn on to underline footer links.

In Options:

• Unsubscribe link text: the label for the managed unsubscribe link on marketing emails. Transactional emails omit it.

Localize your email content

Use the language switcher above the canvas to add languages and edit content per language. Learn how to add languages.

Content you haven’t translated yet for the current language shows dimmed. Start typing to create the translation. The default language keeps showing until you do.

Note

Any block you add appears with the same content for every language. Remember to translate new text and button labels for every language you use in your email.

Save your email

Click Save in the top bar to save your changes. Use Undo/Redo in the top bar to step back and forward through your edits.

Note

Saving stores your email in Content → Email content. From there you can edit and manage it, and use it in your campaigns. Learn more

Send a test email

Before sending your email campaign, you can send a test email to preview how the content will appear in recipients’ inboxes.

1. Open the ⋮ menu in the top bar and select Test email.

2. In the window that opens, pick a saved test device or type any email address.

3. Click Send to send the test message to the address you chose.

Use your saved email content

Now that your email content is ready, it can be used in email campaigns. Learn more about how to use it