Email Content Editors
  • 20 Jul 2022
  • 3 Minutes To Read
  • Dark
    Light
  • PDF

Email Content Editors

  • Dark
    Light
  • PDF

When defining the contents of automated and manual email notifications you have access to both a rich text editor and an HTML editor. For more information about these types of notifications, see Automated Email Notifications and Manual Email Notifications.

The default editor is the rich text editor however you may switch back and forth from the rich text editor to the HTML editor whenever you like.

To create email notification templates, you must have either the Create Templates (CREATE_COMMUNICATION_TEMPLATES) or Edit Templates (EDIT_COMMUNICATION_TEMPLATES) permissions.

Rich text editor

The rich text editor provides an interface with clickable options for styling text using things like bold, italic and strikethrough, as well as to create links, bulleted or numbered lists.

Screenshot 2022-07-01 at 11.27.39.png

HTML editor

The HTML editor shows the contents of the email in HTML. This allows you to create much more complex content such as tables, add styling information to change fonts, colours and text sizes, or resize and add alternate text in images.

Screenshot 2022-07-01 at 11.27.49.png

Previewing Content

To preview the content of your email select the Preview button at the bottom. This will fill common placeholders with dummy data and provide you with an estimated length of the content.

Screenshot 2022-07-01 at 11.29.24.png

Images

To add an image, it must be accessible from a secure URL, preferably hosted in a fast CDN, and made publicly accessible, you cannot upload images directly to the document.

To add an image:

  1. Use the rich text editor and select the image option in the editor toolbar.
  2. Enter the URL where the image is stored and save.

After adding an image you may want to switch to the HTML editor in order to edit it further using HTML attributes, for example to adjust its size, position or add a clickable link.

Please be Aware

Images should always use a secure source. Some email clients will report security warnings, errors, or refuse to display images if they are not coming from a domain using https.

Branding and styling

You can customize your CSS by using the <style> tag, simply add this in the HTML editor.

<style>
body {background-color:YellowGreen;}
h1 {color:red;}
p {color:blue;}
</style>


<h1>A heading</h1>
<p>A paragraph.</p>


Please Note

Emails may appear differently on different devices, email clients and software. We recommends checking CSS support with tools such as Campaign Monitor.

To speed up loading of your webpage you can minify your css. There are free online tools such as cssminifier that you can use for this.

If the CSS is complex, for example, you are using different stylesheets for readers using mobile devices than desktop then it must be in a separate file hosted on a secure, public server and imported using either:

<style type="text/css">
@import url("https://styles.com/css_desktop.css") (screen and min-width: 641px);
@import url("https://styles.com/css_mobile.css") (screen and max-width: 640px);
@import url("https://fonts.com/myfonts?family=Comic+Sans");
</style>
Please be Aware
The rich text editor will reflect style choices but the generated preview will not.

or:

<link rel="stylesheet" href="https://styles.com/css_desktop.css" media="screen and (min-width:641px)">
<link rel="stylesheet" href="https://styles.com/css_mobile.css" media="screen and (max-width:640px)">
<link rel="stylesheet" href="https://fonts.com/myfonts?family=Comic+Sans">
Please note

In the examples above we are calling two separate stylesheets just to emphasise the importance of making sure your emails take into account customers could be opening mails on a mobile or desktop device. Your implementation may contain all values in a single stylesheet, or indeed, provide styling for even more use cases, such as print or tablets.

Accepted tags, attributes and protocols

Mambu validates your HTML content and only supports the following whitelist of accepted tags, attributes and protocols.

Using a tag or attribute that is not found in the whitelist will result in that section of the document not being generated.

Allowed HTML Tags: a, b, em, i, u, h1, h2, h3, h4, h5, h6, hr, ul, ol, li, br, p, strike, blockquote, div, span, img, hr, tr, td, th, tbody, table, colgroup, col, thead, pre, small, s, sub, sup, style, link, dd, dl, dt, strong, caption, code, title

Allowed HTML Attributes: href, target, class, style, title, src, span, align, name, id, height, width, rel, colspan, rowspan, cellpadding, cellspacing, alt, border, valign

Allowed Protocols for href attibutes: http, https, mailto, ftp

Please Note

We do not support the use of JavaScript.


Was This Article Helpful?

What's Next