Advanced Email Editing

Overview

Suppliers can provide marketing communication content (emails, landing pages, website plugins, etc.) to you, for you to use to engage your contacts and potential customers. Depending on how the supplier has set up these pieces of content, you may have options to personalize the content to meet your needs.

This article describes some formatting options you have when personalizing or editing content from your supplier. You can also use these guides to help you create your own emails, in the Create Your Own (CYO) email builder, if it’s enabled on your portal.

The WYSIWYG Editor for these types of content is powered by Beefree. For more information about all the formatting/styling options that are provided in the editor, see Content/Formatting/Display Options for Marketing and Comms Content. The WYSIWYG Editor is provided in these areas:

• The Personalization step for an email or website plugin
• The Create Your Own Email action when adding an email to a campaign

Before You Begin

Before creating your own emails consider the following:

• Your supplier decides which areas in a piece of marketing content are available for editing/personalizing - they have the option to lock the whole piece or individual areas only.

  If an area is locked for editing, you will see a padlock icon and a pop up message

  

• The email builder supports merge tags that allow you to create personalized emails.

Contents

Click + to expand each section.

How to Add a Background Image

You can add a background image to these areas:

• The whole page
• A single row of content

Email background images are not compatible with these email clients:

• Outlook desktop on Windows.

  Background images work on Outlook 2011 & Outlook 2016 on OS X, and on outlook.com

• Lotus Notes 7
• free.fr email client
• T-Online.de email client
• Xfinity / Comcast email client

We recommend that you set a background color as well as a background image. When background images are not compatible, they will be replaced with the background color. For more information, see the How to Add Background Colors section of this article.

You can add use one of your images as the background, or choose from a collection of stock photos.

To insert a background image:

1. Go to one of these areas:
   • Add the image to the whole page - go to the Settings area in the right hand panel. Toggle on Background image.
   • Add the image to a single row - Click the row you want to edit. It’s highlighted in blue to show you’re editing it. The Row Properties menu opens in the right-hand panel. Go to Backgrounds and toggle on Row background image.
2. Specify the image to use - you can choose either of these options:
   • Paste a URL in the Url field

   • Click Choose Image to browse for the image. In the File manager, you can upload an image from your computer, import an image via a link or from social media, or search a collection of more than 500,000 high-quality stock photos. All images are published under the Creative Commons Zero license.

     Click Insert to add the image from the File manager library.

3. (If adding a background to a row) Choose where to place the background image:
   • Content Area - in the part of the row that contains content
   • Row - across the whole row (behind any content)
4. Choose Fit to background to resize the image to the same width as the selected area. If you don't select the Fit to background option, the image will be added in its original size.

5. If you're not fitting the image to the background (Fit to background disabled), you can choose one of these options for positioning the image:

   • Repeat - repeat the image in its original size across the selected area
   • Center - center the image in the selected area, in its original size (it’s aligned to the left as a default)

   

6. Click Save at the top of the page to confirm the change.

Here are some examples of positioning images for a whole page:

• No positioning selected

  

• Fit to background

  

• Repeat

  

• Center

  

For information on adding formatting to the background image once you've added it, see the How to Apply Effects to a Background Image section of the article.

How to Apply Effects to a Background Image

To add effects to a background image once you’ve added it:

1. Go to one of these areas in the right hand panel:
   • Background for the whole page - Settings > Background image.
   • Image for a single row - click the row you want to edit. It’s highlighted in blue to show you’re editing it. Go to Row Properties > Backgrounds > Row background image.

2. Click Apply effects.

   

3. Make changes as required:

   • Filter - add color filters
   • Resize - add a new size for the image, with the option to maintain its aspect ratio when resizing
   • Crop - crop the image by dragging its edges as required or selecting a prescribed aspect ratio (e.g. 3:2)
   • Transform - rotate the image clockwise or counter-clockwise, or invert it
   • Draw - add freehand marks to the image

   • Text - add text to the image

     Click Add Text to add a text box.

     Double click on the text in the text box (as a default, it contains Double click here) and update it as required. Use the toolbar options to set the text color and the font.

     Use the + and   to access formatting options for the text box - shadow, outline, background color, etc.

   • Shapes - add pre-drawn shapes such as arrows, stars, and squares
   • Stickers - add predefined stickers/emoticons
   • Frame - add a predesigned frame
   • Corners - define the radius of corners in the image

   

4. Click Apply in any of the tabs to apply the effects.
5. Click Save at the top of the page to confirm the change.

How to Add a Background Color

You can add a background color to these areas:

• The whole page
• A single row
• The content area in a row

This is recommended if you’re working with background images, as the background color will be used as a fallback if the image can’t be rendered.

To add a background color:

1. Go to one of these areas:
   • To apply the background color to the whole page - Settings > Background color.
   • To apply the background color to a single row - Row Properties > Backgrounds > Row background color.
   • To apply the background color to the content area in a row - Row Properties > Backgrounds >  Content area background color.
2. Click in the color field.

3. Use the color picker to choose the required color.

   

4. Click Save at the top of the page to confirm the change.

How to Add Images

Images improve the quality of your marketing content, making it more engaging and impactful. You can add an image from three sources:

• Upload images from your computer or network.
• Import web images from Facebook, Google Drive, Box, Google Photos, or OneDrive.
• Search free, high-quality stock photos. The stock photos are from Unsplash, Pexels, and Pixabay and are free under the Creative Commons Zero license.

To insert an image into content:

1. Click the content block to which you want to add an image. It’s highlighted in blue to show you’re editing it. The Content Properties menu opens in the right-hand panel.
2. Click the Content tab to expose the available content blocks. Find Image, and drag-and-drop it into the required block.
3. Click the image to highlight it. The Image Properties menu opens in the right-hand panel.

4. Specify the image to insert - you can choose either of these options:

   • Paste a URL in the Url field
   • Click Choose Image to browse for the image. In the File manager, you can upload an image from your computer, import an image via a link or from social media, or search a collection of more than 500,000 high-quality stock photos. All images are published under the Creative Commons Zero license.

   Click Insert to add the image from the File manager library.

   

5. You can now format the image - use these options in the Image Properties panel as required.

   For more information about the available options, see Content/Formatting/Display Options for Marketing and Comms Content.

   • Auto width

     Toggle on to make the image automatically fill the full content block width.

     Toggle off if you want to manually control the width of the image in the block. The image maintains its aspect ratio as you change the width. Check Full width on mobile to override the manual width setting and automatically fill the content block on mobile displays.

   • Align

     Specify the alignment of the image in the content block. Choose Left, Center, or Right.

     Note: this setting has no effect if the image is set to fill the width of the content block.

   • Dynamic image

     Add a responsive image that changes based on specified merge tags (content placeholders). For more information, see the How to Add a Dynamic Image section of this article.

   • Alt text

     Provide alternate text describing the image, for users using a screen reader.

   • Image rounded corners

     Whether the corners of an image should be rounded or square.

   • Action

     Configure an action to take when clicking on an image.

   • Padding

     Toggle More options on to control the padding on each side of the image. Or choose All sides to apply to the same padding to all sides of the image.

   • Hide on

     Choose whether to hide the image from desktop or mobile users.

6. Click Save at the top of the page to confirm the change.

How to Add a Dynamic Image

Dynamic images are responsive image files that change depending on input for merge tags (content placeholders).

For example, you might send your users personalized birthday emails wishing them “happy birthday” by name. When you include a merge field for first name in the dynamic image URL, your recipients’ first name is automatically read from your contact list data and the image changes to display each user’s name. Use a dynamic image in combination with a variable field to create a unique email for each user.

A list of permitted merge fields can be found in the Glossary under Variable Fields.

Along with your dynamic image, provide a static backup image in case the variable inputs can't be processed (for example, if a first name is not available in your contact data).

To add dynamic images:

1. Drag-and-drop an Image content block into the required location.
2. Insert a static image using the image browser. For more information, see the How to Add an Image section of this article.
3. Click into the image content block again.
4. In the Content Properties menu, toggle on Dynamic image.
5. Input a URL in the Dynamic URL box. Make sure to include a merge field in the URL.
6. Publish your changes. You will see the static URL in the Preview. You will see the merge field on the Personalize view. Your Test email will show the merge field.

Here’s an example:

We want to send this image to our users on their birthday.

For our static image, we provide an arbitrary static variable in the URL. Here, we use “Partner.” Our static URL looks like this:

https://img1.niftyimages.com/ovd/sp8/nxq?txt=Partner

We want the image to wish our users happy birthday by first name. A list of permitted merge fields can be found in the Glossary under Variable Fields. From the list, we find the variable [FirstName]. Our dynamic URL looks like this:

https://img1.niftyimages.com/ovd/sp8/nxq?txt=[FirstName]

When our users receive the email, they see a personalized birthday message addressed to them by name. If there is a mistake in our data that prevents users’ names from being displayed, the image will automatically fall back to the static image.

To test the email, create a short internal email list to send the email to. Verify that the name is appearing on the email and not a variable. Once you are sure the email is correct, it is ready to send out.

These services provide dynamic image services: Niftyimages, Fresh Relevance, CountdownMall, and others.

How to Include Your Contact Form

Your contact form is used for adding contacts to your contact lists or allowing existing contacts to manage their communication preferences. The contact form can be referenced stand-alone or embedded into a page on your website.

For more information on managing your contact form, see Contact Forms for Contact Lists.

Note

Your supplier may have included a different contact form with an email they’ve provided for you to use. This will likely be with an associated landing page, which users will see if they click the CTA button in the email. You can see if the form is included when personalizing an email. For example, this supplier has included a landing page and a contact form with the email:

You can add your contact form to marketing content, if you’re permitted to edit email, website plugins, etc.

You can add a form in one of two ways:

• Add the URL for the contact form, for example as the target of a call to action button.

  To get the URL, go to your Contact Form page and copy the URL from the Contact Form URL field.

  

• Embed the form on a website and use the website URL in the marketing content, for example as the target of a call to action button.
  • Go to your Contact Form page
  • Click Embed.

  • Copy the embed code from Contact Form embedded code.

    

  • Paste the code into the required location in the HTML source of the target website page.
  • Provide a link to the website in your marketing content.

How to Add Special Links

Some content blocks allow you to add pre-built links that allow recipients to carry out certain tasks:

• Unsubscribe
• Global Unsubscribe
• Opt in to all communications, or specific contact lists
• View email in browser
• Go to a landing page

Special links can be added to buttons, images, and text content blocks.

To add a special link to a button or image content block:

1. Click on the content block to which you want to add the link.
2. In the Content Properties menu, click Special links in the Action section.
3. Select a link category from the list or search using keywords.
4. Click the name of the link you want to add.

The special link appears in the URL box under Link type in the Action section of the Content Properties menu.

To add a special link to a text content block:

1. In the email builder, click into the text box you want to edit.
2. In the popup text editor menu, click Special links.
3. Click the name of the link you want to add.

The link appears in the text box as a blue hyperlink.

How to Use Merge Tags

Merge tags are content placeholders that are replaced with actual values when an email is sent. For example, you can use the First Name and Last Name tags to personalize your email for each recipient.

To add a merge tag to email content:

1. Go to a text content block in the email or add a new one.
2. Click into the text box and place the cursor where you want the autogenerated text to appear. 

3. Click Merge Tags.

   

4. Select the tag you want to use - the list contains standard contact fields, plus your custom contact fields. For more information about contact fields, see Contact Fields.

   

   The merge tag is inserted in the format [fieldname], for example [FirstName]. It will be populated with data from the recipient's contact record.

If the information represented by a merge tag is not available for an email recipient (for example, if your contact record for them doesn't include their first name), the email will include a blank space where the content should be.

How to Create Display Conditions

Display conditions allow you to write scripts that conditionally display content, based on a context statement. For example, you can display a message only to partners in a particular state or region.

The display conditions feature responds to whatever syntax your application understands.

To add a display condition, follow these steps:

1. Click the row block you want to add the display condition to. The Row Properties menu opens in the right-hand panel.
2. Under Display condition, click Add condition.
3. Give the condition a name and description and provide the script for the start and end of the conditional statement.
4. Click Confirm.

Only one display condition can be applied to each row. To edit a display condition, click Edit condition. To delete a display condition, click the trashcan icon.

How to Use Custom HTML

HTML experts only

Using your own code may affect how the message is rendered. Make sure to use correct and responsive HTML.

The custom HTML content block allows you add more customizable content that is not available in the standard email editor. You can control text formatting, add HTML 5 videos and anchor links, add effects from CSS, and add live content from external providers.

Drag-and-drop the HTML block from the Content tab into the required location in the email.

Click in the HTML block. The HTML editor opens in the right-hand panel, with some placeholder code in the editing area.

Add your custom HTML code. The editor automatically color-codes syntax and indents code to improve readability.

Allowed tags

a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var

Allowed Attributes

general attributes	style, id, class, data-*, title
a	href, name, target
img	align, alt, border height, hspace, src, vspace, width, usemap
table	align, bgcolor, border, cellpadding, cellspacing, width
tbody	align, valign
td	align, bgcolor, colspan, height, rowspan, valign, width
tr	align, bgcolor, valign
tfoot	align, valign
th	align, bicolor, colspan, height, rowspan, valign, width
thead	align, valign
li	type
map	name
area	alt, coords, href, shape, target