Introduction

This document covers automation emails, for thank you auto-responder emails please reference that guide. For main supporter broadcast emails please go to that guide.

If you are updating an existing automation or making a new one please consult the digital team first to assist with your email template.

We are currently changing between two different email builder systems in Engaging Networks. To make your automation emails look the same as our broadcast emails you will follow these steps:

• First build the email in the main Email Broadcast tool.
• Do not add any links to the build.
• Request Digital team help to check and test the design and to import the HTML code ready for adding links in the automation sequence.

If you already have an automation sequence using the new templates you can follow the guidance on customising the HTML blocks and adding links. If you are unsure if the automation has old or new templates please contact the Digital Team for help by making a SalesForce case or email us.

Important Things To Note

When customising elements of the automation email such as editing the text or changing an image, you must work in the Advanced HTML Editor tab. When you are finished editing always update the Plain Text HTML by going to the Plain Text Editor tab and clicking on the button titled "Generate Plain Text From HTML" This ensures plain text will display the same as the HTML you just updated. Then click SAVE at the bottom of the window.

Please pay attention to and follow this guidance:

• Do not manually add styles to the html. The email templates have style sheets applied to them which are approved designs to fit with the CIWF branding and which have been extensively tested across platforms and devices to achieve the best user experience.
• Do not use coloured highlights on copy unless there’s a special case and a very specific reason for doing so. It is better to draw attention to copy using one or a combination of bold, italics, underline, capitalisation or impact blocks. Or break text up using subheadings formed by H2's and H3's
• Keep links on text to cover the key action words, avoid making whole sentences a link.
• Do not make subtitles hyperlinks.
• Buttons are limited to 22 characters.
• Keep H1 Titles to two lines when viewed on desktop. Titles cannot contain words longer than 13 characters.
• Button text should be capitalised
• Orange buttons are for donation links. Green buttons for CTA and everything else.
• Do not use images with text overlaid. Use captions and subtitles to illustrate image information.
• Do not insert images using the image picker tool. Always work in the Advanced HTML Editor tab. 
• Image and text block allows for the copy to sit the right or left of a small image. Note that it will not wrap.
• Do not customise lists with other types of icons. There are several styles of lists available already. Bullets, Numbered, Crosses and Ticks.
• DO NOT edit the email in the Rich Text Editor. Always use the Advance HTML tab to add/remove or customise content.
• DO Generate Plain Text from HTML in the Plain Text Editor when you have finished making edits. This updates the plain text to match the HTML display.

How To Customise An Automation Email

Log into Engaging Networks with your credentials selecting the country account you wish to work in.

Select MARKETING TOOLS then MARKETING AUTOMATIONS.

Click on the pencil icon to open the automation you want to work on. Email content sits inside the blue boxes in the journey flow. Click on the pencil icon to open the email editor.

Use the EN Email Campaign Naming sheet to create consistent naming for your emails. There is a tab for each country office.

Give the email a subject line and select the Sender and Reply-To details from the dropdown list. Do not edit these lists. Please contact the digital team if you need new contacts added. Preview text will be added in the HTML. Leave the preview text field empty.

HTML Code Blocks

Notice our email code blocks have been created using tables which results in the most consistent display and rendering results across email platforms e.g:

Important:

DO NOT change any of the code block structures except where specifically indicated in these instructions. Only the parts relating to the content such as h1, h2, h3, p, a and img tags should be customised.

If you need to change a block or there isn't a block that fits your requirements please make a request for it in a SalesForce case to the Digital Team. 

DO NOT mix in or add different coding languages or styles. Exceptions include pasting in a YouTube embed code or an iFrame in special circumstances but otherwise, no other code variations should be added.

Basic HTML Explained

When working with HTML, we use simple code structures (tags and attributes) to mark up a website page or in this case an email. For example, create a paragraph by placing the enclosed text within an opening <p> and closing </p> tag. Every block of code for an attribute will sit inside these kinds of tags.

HTML consists of a set of tags (also called elements), which are referred to as the building blocks of web pages and html based emails. They create a hierarchy that structures the content into sections, paragraphs, headings, and other content blocks.

Most HTML elements have an opening and a closing that use the opening <tag> and closing </tag> syntax.

Below, is an example of how HTML elements can be structured:

• The outermost element is a simple division (<div></div>) used to mark up bigger content sections.
• It contains a heading (<h1></h1>), a subheading (<h2></h2>), two paragraphs (<p></p>), and an image (<img>).
• The second paragraph includes a link (<a></a>) with "a href" attribute that contains the destination URL.
• The image tag also has two attributes: “src” for the image path and “alt” for the image description.

This is an external ten minute HTML tutorial video that you can use to help you learn some HTML basics:

Learn HTML basics

H1 Title

When customising the text in the HTML editor do not type in capitals. Capitalisation is added automatically through CSS (Custom Style Sheets). Keep individual words 13 characters or less otherwise the template breaks.

Editing Images

Please size all images to the correct dimensions according to their use before upload to the EN image library.  It's helpful to keep the image library organised by using folders.

All images used for email should be max 200kb file size when possible.

Images don't need to be pre-sized, but they do need to meet the minimum width requirement for the block. Depending on the block being used landscape or portrait cropping should be used:

• Full width images & main story image – min width 660px max 1000px (suggested width 800px), landscape
• Half-width images (2-col) – min width 500px max 700px, portrait to square format
• GIF files should be no more than 1 MB in size and have a width of either 660px or 500px depending on block placement
• Donation impact – width 500px, landscape
• Follow block – width 500px, landscape
• Signature images: Portrait 200px wide by 240px high

Do not blow images up to fit the minimum size requirements and ensure images are sharp and of high quality. Using degraded images, blurry images reflects poorly on our professionalism and undermines the message we are conveying.

Upload images to the library folder in Engaging Networks by going to Pages >Components. This takes you straight to the image library.

Select a folder to save the new image into from the dropdown menu and click "UPLOAD" to upload new images. If a folder doesn't already exist for email images create one.

Select any uploaded image to locate and copy the url. Add or update the alternative image description field in the library if it is not already populated.

Paste the copied URL of the image directly into the HTML source code of the block using an image in the email. Locate the src=url part of the code and replace the template https address. Don't forget to update the alt text here too.

It’s important to give all images an Alt tag name both in Engaging Networks library and in the source code of the email. Alt descriptions should describe how the image looks. In the case that someone could not see the image they would know what it was by reading the alt description. Giving images Alt descriptions also improves SEO (search engine optimisation).

Please complete this training course on how to create good alt-tag descriptions. Request a Site Improve log in from Digi Team to access.

Image with text blocks

There is functionality for a small image with text next to it which can be left or right-aligned. Care should be given to the amount of text next to the image so that it fits the height of the image. The text will NOT wrap around the image.

Links On Images

!IMPORTANT! Links on images should be added in the same way as any other type of link. See notes on creating links below.

Text On Images

Please avoid overlaying images with text. Especially informative text. It's important to consider that not all of our audience will have good vision, some may be using screen readers, have images turned off and over 50% of our audience read our communications on mobile devices.

Overlaying text on images is bad practice for accessibility reasons. Our content should be accessible - everyone should be able to consume it, we want everyone to know how awful factory farming is, and we don't want anyone to feel excluded from this. We want to have a reputation for providing accessible content. Or at least, not have a reputation for not doing so. So this means we need to consistently produce accessible content, and not make any exceptions.

For those viewing images it is still a problem. While the text is legible on a desktop/laptop it's not easy to read on a mobile. The text sizing will not auto-adjust for the device, it will be fixed and simply reduce in size resulting in the text on the images being illegible on smaller screens. Over 50% of people read their emails on mobile devices.

Images with accompanying text should be in captions or subheadings below the image. They could be h2 and h3's respectively and centered to give them some style if desired. There are also impact blocks and infographics that are designed with accessibility in mind and are a great way to display images with short excerpts of text to make a point.

Lists

Currently, only bullet or numbered lists can be used. Other list types or using emoji icons will break or not display in some email clients.

Buttons General

To edit the button title, carefully customise in the Advanced HTML Editor.

Take note the Orange buttons are to be used for donation links only. Green buttons should be used for Calls To Action and everything else.

Donation Impact Buttons

When using the donation impact module, or creating a Donate Buttons that stipulates a pre-set donation amount and/or frequency, for example, 'Donate £15 Monthly' the link should represent this value.

When generating the tracked url in the SalesForce URL Generator use the Optional URL Parameters section to add the extensions for each button accordingly.

Below are examples of how the links will look without utm tracking added so you can see clearly the result. You will need to add the appropriate url tracking for your links.

Pop Up Pre-Set Monthly

So "transaction.recurrpay=Y" will open the pop up monthly and "transaction.donationAmt=15" will put the amount 15 in the popup

Pop Up Pre-Set Single

So "transaction.recurrpay=N" will open the pop up single and "transaction.donationAmt=6" will put the amount 6 in the popup

Adding Links

External links (any non-EN page links)

To add a hyperlink on any image, text, or button that will point to a CIWF website page or any other website page that is not an Engaging Networks action or donation page:

1. Select or highlight the place where the hyperlink is to go
2. Click on the Blue Globe Icon with the Link Chain over it. 
3. Paste in the external url including the https part
4. In the NAME field enter appeal, action or other _ txt, button or img _ the first few words of the txt or describe the image. Examples of how the name might look: appeal_button_DonateNow or action_txt_WillYouHelp or other_img_piglets
5. Click on OK
6. On text links, highlight the hyperlink and click on the grey link chain icon.
7. Click on the ADVANCED tab. In the STYLE field enter: text-decoration: underline; color: #0BAB47;
8. OK
9. SAVE

Campaign links

To add a hyperlink on any image, text, or button that will point to an Engaging Networks action or donation page;

1. Select or highlight the place where the hyperlink is to go
2. Click on the Blue Link Chain icon
3. In the NAME field enter appeal, action, or other _ txt, button or img _ the first few words of the txt or describe the image. Examples of how the name might look: appeal_button_DonateNow or action_txt_WillYouHelp or other_img_piglets
4. Select the action or donation page from the CAMPAIGN drop down list. The action or donation page must be set to LIVE for it to appear in the drop down.
5. Click on OK

1. With the text, img or button still selected click on the grey link chain icon.
2. Select from the “h” of the http... all the way to the last number or letter before the ~ of the link and paste the tracked SalesForce link. Learn how to create tracked links in SalesForce with This Guide.
3. For text links, click on the ADVANCED tab. In the style field enter: text-decoration: underline; color: #0BAB47;
4. Click OK
5. Click SAVE

Social Button Share Links

Button Titles

On all social media buttons please make sure to only use one word maximum in the button title. For example, "Facebook". This ensures that the button looks correct across all devices and email clients.

There are optional styles for social buttons using an icon and title, or icon only.

Link Tracking

If the link you plan to share is a CIWF owned page you must add tracking to the link. Tracking will be unique for each platform share button.

Take the default URL and create the tracked URL with an appeal code (if appropriate) and UTM tracking in SalesForce or the Google Tracking sheet. Please see the guide on creating tracked links for details.

Once you have your tracked links created, encode the tracked URL using the dencoder tool: https://meyerweb.com/eric/tools/dencoder/ - then add it to the URLs on the social share buttons following the directions below for each button type.

Facebook and LinkedIn Share

Locate the piece of code below within the share-ask block code and replace with the new encoded url:
on the FB link it goes after u=
on LinkedIn it goes after url=

When sharing an action or donation page, Facebook generates messaging from the "Social Details/General Tab" of the page. The image is also pulled in from here.

WhatsApp and Twitter

Take the tracked URLs and shorten them in Bitly: https://bitly.com/ or your preferred link-shortening tool.

Then go to the encoder and add it to the end of your share copy

For example: This brought a smile to my face! A really joyful video of farm animals having a life worth living #loveanimals https://bitly.com/yourlink

Encode the message and bitly/short link, copy and paste it onto the URL after "text="

Customise the text on the buttons.

When sharing an action or donation page from Engaging Networks, the Twitter card pulls it's image from the "Social Details/General Tab" of the page being shared.

Email share

This one is a little different. Notice there is a “mailto:” command and it has a subject line too, which also needs to be encoded (but separately to the body copy).

Once the subject line has been encoded, copy and paste the part after subject= and before &body=

On the the main part of the message, replace everything after body=

Customise the text on the button.

Telegram

A telegram share link is made up of two parts, the share text and the link.

The URL starts with this (not encoded) https://t.me/share/url?url=

After this we insert the encoded tracked URL, this can be bitly or a standard URL e.g. https%3A%2F%2Fbit.ly%2F414fxml

After the URL we have the text parameter (not encoded) &text=

This is where we add the encoded share text e.g. I%20just%20took%20action%20for%20pigs!%20Join%20me

Twitter Card Trouble Shooting

Twitter Card Not Showing An Image

• If sharing an EN page make sure there is an image inserted in the social share section of the EN page at the correct size Min 600px wide and ratio of 1.91:1
• Use the Scrape function in the EN page Social Details Facebook Tab. Ensure it generates the message and image saved in the general tab
• Make sure the page being shared is in Live mode
• Share on Facebook - you can set the post to share privately so the public won't see it.
• Make sure that the message does not exceed the max character count of 280 including spaces.

Reminder / Re-Send Emails

To create a reminder or re-send an email in the automation sequence, simply copy and paste the HTML code from the Advanced HTML Editor tab. Paste the HTML into the Advanced HTML Editor tab of the email action block in the journey that will be set up as the reminder email.

How to avoid having emails sent to SPAM folders

Here is a list of things that are considered flags for spam by email clients:

• Using 'Hot Words', capital letters and punctuation in subject lines especially exclamation marks
• Using 'Hot Words' in the body content
• Using a large number of links throughout an email. More than 12 links including footer links can cause SPAM flags in some clients.
• An uneven ratio of text and images in the email
• Using 'Friend' as an alternative to addressing the subscribers name if we don't have their name (Spam Assassin doesn't like this)
• Images missing alt text

Avoiding doing the things listed above will help your emails stay out of SPAM boxes. While there are several factors as to why this can happen, the list above is not exhaustive, nor is it a guarantee, but it should help.

Checkout our guide on best email practices to avoid SPAM and increase open rates.

Test your email and check your potential SPAM score in MailTester. 

Using emoji's

A limited amount of emoji use in email subject lines and email content is fine. But don't overdo it. Please don't use emoji icons in place of bullet points. Use only the style list blocks provided.

If you are using emoji's be careful to use one from either of these two sites: Emojipedia and Email Emoji

While not guaranteed these two sites do seem to be fairly good at providing stable emoji icons.

Carefully test the email in various email clients and platforms. They can have a tendency to stretch and blow up, particularly Gmail desktop in Chrome browser. 

Windows 7 machines and earlier versions will not show emojis, some emojis will be converted to Emoticons. Gmail will always show emojis regardless of the operating system.

Setting Up A Split Test

To set up a split test, use the split test action block from the blue action icons in the left hand tool-bar. You will need to check on the performance results of the emails after the automation has been running for a little while. Once you have good enough data you can decide which email is performing better and select it as the winner for all future journey participants to receive.

Sending Email Tests

All emails built should be tested by yourself and by anyone who needs to sign off on the content.  You should check all links test functionality for this. Final tests should be sent to Digital team in good time ahead of your desired launch day.

On each email click on the black circular arrow icon in the Email Action Block.

Add an email address/es to send a test to. 

Always check how to the email looks on both desktop and mobile. If possible check how the email looks in both Outlook and also in a webmail client such as Gmail.

Once you are satisfied with your own tests, create a SalesForce Case for an email test with Digital Team. When creating the case please include the following details:

• Subject line/s
• Any testing such as content or subject line testing
• The number of emails to be tested and if there is an action page and/or donation page that also needs to be tested.
• When the automation is to be launched
• When you expect to have a test delivered – an estimate is fine
• EN name of the automation sequence, email names