Email node

Angel Cheung
Angel Cheung
  • Updated

Quick links

What is the Outbound Email node?

Set up

Design

Build from scratch

Use HTML code

Inserting and editing images

Inserting an image

Customise an image

Editing an image

Deleting an image

Known issues


What is the Outbound Email node?

The outbound email node sends an outbound email to recipients.

Double click on the outbound email node, or hover over the outbound SMS node on the canvas and click on the settings icon to open the settings panel.

mceclip1.gif

Set up


Under the 'Sender details' section, you can choose a sender name and from address, if enabled. Note that 'From address' must either be a Pendula verified email address, or an address on behalf of a Pendula verified domain.

Under the 'Email details' section, you can choose the recipients and the email subject. Merge fields may be referenced in these text fields – refer to the merge fields section for details.

mceclip2.png

Design


Here is where you can drop code, build from scratch or preview an email. It is recommended to build an email from scratch for optimised and robust emails. This means that emails built using this email builder is optimised to be visually consistent across potential viewing email clients.

mceclip0.png

 

Build from scratch


When Building from scratch, you can edit, drag and drop content into the email building screen. The email design panel is divided into several sections:

  • Content allows the addition of columns, HTML and other visual elements such as text, buttons, dividers and images. Images can be inserted with an URL.
  • Blocks allows the addition of pre-made columns with the option to visually customise how the columns and rows look and behave.
  • Body contains settings that will affect the whole email, including preheader text, content (email) width, background and text colour, links and font family.
  • Images contain a library of free-to-use images under Creative Commons Zero.

Further customisation of each content item can be adjusted visually for desktop and mobile by double clicking on the content item.

mceclip4.gif

The canvas overlooks the email overall – email content to be moved, undo/redo and previewed.

To move content or a row, hover over the item to reveal the pan icon. Click and drag to new desired place.

mceclip3.gif

To redo/undo an action, preview an email for different screen resolution, click on the icons located on the bottom right corner.

mceclip4.gif

Once the email is built and behaving as desired, click on the Save icon.


Use HTML code

To use custom HTML code, select the button and paste the HTML code into the textfield. You can preview the template before saving the node.

If you use your custom HTML, it may appear differently in your recipient's email client (e.g. Gmail or Outlook) as your HTML may not be optimised by potential email clients.

For example, background images may be rendered in the preview when you use custom HTML code, but if the recipient uses Outlook to preview the email a background colour will be shown instead of a background image. This is because email clients render emails differently from one another. For this reason, we strongly recommend using Pendula's inbuilt email designer builder to ensure visual consistency across potential email clients.

mceclip5.gif


Inserting and editing images

Inserting an image

Pendula offers four methods to insert an image to your email – upload your own, use a previously uploaded image, use an image URL or choose from millions of stock images, all licensed under Creative Commons Zero. When you upload an image, we save that file on our servers. To insert an image:

  1. In the 'Content' pane, drag the Image tile onto the email canvas.
  2. Select the placeholder image on the canvas to open up the Image Content panel. 
  3. Choose how to add an image:
    1. To choose a file from your computer, drag your file into the dropzone, or select Upload image
    2. To use a previously uploaded image, select More images > Uploads
    3. To use an image that's saved online, replace the Image URL with the image link.
    4. To select from the stock photo gallery, select More images > Stock images
  4. Click Save to keep the changes you've made.

Customise an image

After adding an image to your canvas, you can customise your image the settings on your image. This  can be accessed by selecting your image the canvas to open up the Image Content panel.

You can customise:

  • Auto width – automatically size the image to the width of the recipient's screen
  • Align
  • Alternate text
  • Image link – determine where and how the image links to
  • Padding and responsive design settings

Editing an image

  1. Select the placeholder image on the canvas to open up the Image Content panel. Select Apply Effects.
  2. In the photo editor, click on any of the tools to edit as desired.
  3. Click Save after editing.

Deleting an image

  1. Select the image on the canvas.
  2. Select the bin icon to remove the image.


Known issues

Visual difference of paragraph spacing between preview and email sent. In the Email Builder, after pressing 'enter' once between paragraphs, paragraph spacing isn't respected.

Email builder preview

Email sent

Solution: For each paragraph, use a new text block.

Email builder preview

Email sent