Content Editors
  • 17 Aug 2022
  • 3 Minutes To Read
  • Dark
    Light
  • PDF

Content Editors

  • Dark
    Light
  • PDF

Article summary

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

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.

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 your contents 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 for embedded images.

Screenshot 2022-07-01 at 11.27.49.png

Previewing Content

In the case of email templates, you may preview the content by selecting Preview 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. This can be especially if you want to support responsive design and make sure your emails look just as good on a mobile device as they do on a desktop.

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
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.
ESC

Eddy AI, facilitating knowledge discovery through conversational intelligence