Email and SMS Templates
  • 17 Nov 2020
  • 5 Minutes To Read
  • Print
  • Share
  • Dark
    Light

Email and SMS Templates

  • Print
  • Share
  • Dark
    Light

Once the initial setup for sending Email and SMS notifications is done you can move on to creating templates for each of them.

Mambu makes a distinction between Automated and Manual communications so depending on whether you intend a particular message to be sent automatically based on a trigger event, or for Mambu users to manually send them from a client or group's detail page, you will need to create the template in one of two locations in the Administration console:

Automated notifications

Create manual email and sms notification templates

Administration > SMS/Email > Notifications - see here for info on setting triggers and conditions


Manual notifications

Create templates for automated email and sms notifications

Administration > Templates > SMS/Emails - see here for info on manually sending notifications to clients

SMS Templates

SMS messages are text-only and are generally limited to containing a maximum of 160 characters. If your message content is more than 160 characters, it will be sent as multiple messages. Some modern phones can get around this limitation by automatically joining those multiple messages into one, or by displaying messages in one thread, however, longer messages will have an impact on your billing, as you are essentially sending two or more SMS notifications for one message. The maximum limit is 1600 characters, any messages longer than this will not be sent.

We would recommend only including essential information in your SMS templates as well as checking the length before activating them, especially when using placeholders. Bear in mind that placeholders you use in your templates could be a lot longer or a lot shorter than the data they will be replaced by, so starting with what you expect a typical message to look like once it is received by a client, confirming its length and working backwards to replace data points with their respective placeholders might save you headaches during testing when the results don't match your expectations.

Check out our article on available placeholders and their available options here.


Email Templates

Emails can be much more complex and rich than SMS notifications so Mambu allows users to switch between two editors when creating templates. The standard view is the Rich Text Editor which provides a familiar interface and clickable options for styling text using things like bold, italic and strikethrough, as well as to create links, bulleted or numbered lists.

When including images on your Email templates make sure to always use a secure source. Some email clients will report security warnings, errors or even refuse to display images if they are not coming from a domain using https

By using the HTML editor, you have full control, allowing 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 to included images.

You can switch back and forth between the HTML and the Rich Text editor at any time. For example, when adding images you can use the rich text to include the image then make any necessary adjustments to its size or position using HTML attributes.

You can also get an instant preview of any changes you make by clicking the preview button found below the editor, this will also fill some common placeholders such as client name or ID with dummy data so you can get a better idea of how the message will look when it lands in a customer's inbox.

When working with email templates you can include placeholders in both the body and subject line. When creating your subject lines, bear the length in mind as a long subject lines may be cut off when they land in the recipient's inbox, especially if being read on mobile devices, leaving customers a little confused or likely to put off opening your message. A maximum subject line length of around 50 characters is a good rule of thumb.

Adding images

To add an image to the document:

  1. Use the rich text editor
  2. Click on the image button in the editor toolbar
  3. Add the URL where the image is stored
  4. Save
Please be Aware
Images must be saved in an URL prior to adding them to the document, it is not possible to upload images directly to the document.

Adding your own corporate identity/style

You can customize your own 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>


In order to speed up loading of your webpage don't forget to 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, that while the Rich Text editing window will reflect style choices made in this way, 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">

Consistency Across Software and Devices

As Emails can be read using a variety of different mail clients and on any number of different devices, there are no guarantees that messages will look the same on all of them, users on mobile, for example, may opt not to load images or external files at all.

A good guide to consult regarding CSS support across email clients can be found here but as software and devices are constantly being updated, regular testing of your messages on a few of the most popular devices, operating systems and messaging clients might make sense.)

Accepted tags, attributes and protocols

When validating the HTML content written in a Email or Product Document template, Mambu works with a whitelist of accepted tags, attributes and protocols.

Please bear the list below in mind when creating any templates using the HTML editor and ensure that you are not using any unsupported tags. Using a tag or attribute that is not found in the white list 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 HTML Protocols: http, https, mailto, ftp


Ask the Mambu Community

If you have a question about how anything works or have come across something you haven't seen explained here, get in touch with our community of fellow users and Mambuvians where someone will lend a hand.

Ask a question about Notifications in Mambu

* If you don't already have an account you will be prompted to create one when you first visit the site.

Was This Article Helpful?