Content Editors

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:

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.

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>

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">

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