- 17 Aug 2022
- 3 Minutes To Read
- Print
- DarkLight
- PDF
Content Editors
- Updated On 17 Aug 2022
- 3 Minutes To Read
- Print
- DarkLight
- PDF
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.
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.
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.
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:
- Use the rich text editor and select the image option in the editor toolbar.
- 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.
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>
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>
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">
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
We do not support the use of JavaScript.