Email Design

Table of Contents:

Overview of Email Design aka Editor page

There are 2 built in editors in Ongage:

1. WYSIWYG/HTML editor:

   Open

   

    

2. BEEFree Drag and Drop Editor

   Open

   

WYSIWYG/HTML Editor

• Email Subject: This is where you write the Email Subject which is visible to users in Inbox. You can personalize your email subject with Dynamic Fields. 

• Pre - Header Text: It’s a short intro text that follows the subject line when viewing the email message, as a line item in the inbox of your email client. You can customize the Pre - Header text from the given option. If kept blank, the ISPs will show a few words from top of the HTML Email message. 

• Template: Opens Template Library to from where you can load the Template you already prepared in the Template Library into the Email Message. 

• Template Block: Opens Template Library to allow you to load predefined template blocks you have already created. 

• Header: Opens Template Library to Insert a header template you prepared add into Email Message.  

• Footer: Opens Template Library to Insert a footer template you prepared add into Email Message.

• Image: Opens Image Library to select Image to insert in Email Message. 

• Content: Allows you to upload content using external file in HTM, HTML, TXT OR ZIP format or using the URL which loads HTML/TEXT. 

• Dynamic Fields: Dynamic fields allows you to use the values residing in their list fields as dynamic content within their email messages.

• System Fields: Allows you to use Predefined system fields that can be used to insert into your Email Message as System Dynamic Fields.

• Edit HTML: If your email messages are prepared outside the HTML designer, you can copy the source of the HTML and paste the source code in the editor.

• Edit Text: Allows you to check and edit the text version of email.

  Open

  

BeeFree Drag and Drop Editor

• Load Templates: It displays a list of Custom Templates as well as Ongage Free Templates. 

• Save as Template: You can also add your own customized templates just by adding the template files and saving them as a template.

• Content: Allows you to add various content elements such as Text, Image, Video etc. into an Email Message.
  
  

  Open

  

   

• Rows: Drag and drop empty or available default rows into an Email Message.

  Open

  

   

• Settings: General Settings being applied to Email Message.

  Open

  

For more details on how to use BeeFree editor to create Email Messages, you can refer to the following tutorial videos.

1. https://emaildesign.beefree.io/create-an-html-email-in-minutes/

2. https://www.youtube.com/watch?v=buOlXJMgYC0 

Dynamic Fields, AKA Merge Fields, AKA Merge Tags

What are Dynamic Fields

Dynamic fields allow users to use the values residing in the custom List fields as dynamic content within their email messages. Typically for the purpose of personalizing the contents of the email message. For example:

• For each recipient being emailed in a given campaign, the system will take the value that resides for that recipient from the custom List field "first_name".

•  If the value of that field is empty, then it will be left blank, e.g. ,"Hi " and not "Hi Sue".

•   Use the exact spelling (case sensitive) of the List field name, as it appears in the 'List Settings → Fields Setup' page, under the 'Name' column.

  Open

  

  
  You can also find all available custom list field names, when clicking on any of the ‘Dynamic Field’ buttons in the editor, where it will display the exact spelling required:

  Open

  

What are Dynamic System Fields

• Dynamic system fields are pre-defined Ongage system fields, for example "Campaign ID" ('{{ocx_mailing_id}}'). 

• You can find a list of the available ones when pressing on the "System Fields" button in the Ongage WYSIWYG editor. See screenshot in following section. 

• The Ongage "Campaign ID" ('{{ocx_mailing_id}}') is a common example of system field that you might want to insert into your HTML email. 

• Moreover, as in the case of Conversion Points, you might want to use it in a link. See one of the following sections about how to insert dynamic fields into links.

How to use Dynamic Fields in an Email

When editing an Email (second step of creating a campaign), click the 'Dynamic Fields' button. A new window with all available dynamic custom list Fields will open. 
Click on the Dynamic custom list field you would like and it will be added to the message. You can also type it in manually.

Open

How to use Dynamic Fields in the Subject of an Email

Click on the 'Dynamic Fields' button next to the 'Subject' input and add the Dynamic custom list fields you'd like to include in the subject (and pre-header) of the email as demonstrated in the screenshot below:

•  A common List Field used in the Subject is {{first_name}} e.g., Dear {{first_name}}

•  System Fields  can also be used in the Subject e.g., The Latest Highlights for {{ocx_dow_long}} 

How to Set a Default Value for a Dynamic field

• When to use a default value:  when you might not have data for for all list members in a specific list field. For example, you might have the first name, for 80% of your list members, but if you use "Hi {{first_name}}," then 20% will get an email that looks like information is missing. With a default value, you can insert a substitute generic value, e.g., Subscriber.  

• How to define a default value: add colon, followed by the default value.

The below example will insert the word "Subscriber" in your HTML email if first_name doesn't have value.

You can also use another dynamic field (from your list), instead of a static value. The below example will insert the last name if the first name doesn't have value. 

Note: This feature does not work if your send a test email to a recipient email address that is not in your list. So when sending a test email using this feature, make sure the recipient email address resides in your list (and of course is active, i.e., not bounced or unsubscribed). 

 Default values can also be used inside of an <a href=url> as well, for example:

How to Use Dynamic Fields in Email Message Links

• Edit your message with the Ongage WYSIWYG editor:

• Click on the Link icon in the editor

• Choose Link type 'URL' ( this is the default)

• Type in the URL you want – for example "www.mysite.com"

• Add the following string to the end of the URL:

  • ?parameter={{some_list_field}}

  • For example: ?email={{email}}

  • For additional parameters use the '&' as follows: www.mysite.com?parm1={{email}}&parm2={{first_name}}&etc...

• Press 'OK' 

  Open

  

 Of course if you're coding the HTML outside of the editor, you can simply setup the link as following: <a href="http://www.yourwebsite.com?parm1={{job}}&parm2={{zip}}">Visit our website</a> where job and zip are the names of fields in your list.

 You can send any Ongage dynamic variable field and/or Ongage system field, on an email message link, as well as hashed emails (Search in this online guide for the section called: 'Advanced Hashing Functions' for more info about this).

Best practice for storing and using URLs in dynamic fields

• Do not store the entire URL as a dynamic field (e.g., {{url}}).
  In particular, avoid including the leading protocol (http:// or https://) in a list field. Doing so can cause URL encoding issues and result in broken links.

• Moreover in the case of transactional emails/SMS messages, clicks stats will not get counted, when the entire {{url}} is stored in a dynamic list field. See below recommendation.

Recommended approach:
Keep the protocol in the message template itself, and use dynamic fields for the variable parts of the URL. For example:

Having said that, this can also work:

How to format date fields 

1. Typically you set the desired date format for date list fields in the Settings → Fields Setup page, so when using that field as a dynamic variable in the body of your email message, it will display in the format you chose for it on that Fields Setup page.

2. However, Ongage system fields have a default date format which you can't set on the above screen, so for system date fields like the ocx_created_date you can use the following formatting directive {{ocx_created_date[format=d/m/y]}}.

3. Moreover you can use this formatting on any of your date list fields as well if you'd like to overwrite the date format you set for it on the Fields Setup page.

You can use anyone of the date formats that you see when adding / editing a date field in the Settings → Fields Setup page.

Open

AMP for Email Support

Overview

AMP for Email allows dynamic, interactive content inside emails. This guide walks through the full process of setting up and sending AMP-enabled campaigns using Ongage. Currently supported in 4 ISPs: Gmail, Yahoo Mail, Mail.ru and FairEmail.

Creating AMP Emails on Ongage

Ongage does not currently support native AMP editors. You should create AMP-compliant email using AMP Playground, 3rd party AMP editors (such as Stripo) or using Custom script/tool to generate AMP Email (MIME format). Please visit this guide to learn more about creating AMP email.

Once you have AMP-compliant Email, copy the complete code, Go to Content > Email Message > Email Design > AMP Editor and paste the AMP email code as shown in screenshot below.

Open

Note: AMP editor option is not available by default to all Ongage accounts. If you do not see the AMP editor option, please Contact Ongage Support to enable the option for your account. 

Note: As only limited ISPs support AMP friendly emails, for Email Message you create with AMP version, you should create an HTML version of same Email and configure it in Email Message as usual which will be sent rendered in all other Inboxes as HTML version as usual.

Testing AMP Email using Ongage

Before sending production campaigns, you should thoroughly test the AMP emails using steps below.

1. You need to be logged in with your Gmail Email in Browser where you want to receive the validated AMP email. 

2. Whitelist "amp@gmail.dev" and your From Address from which you want to send AMP email in Gmail. 

   1. Navigate to Gmail Settings > General > Dynamic email and click Developer settings. This opens a dialog where you can whitelist an email address that can send you dynamic emails for testing purposes. The AMP version of emails sent from the listed address to your account are rendered, even if the email address is not registered with Google. This lets you test your dynamic emails on your own accounts before registering to ensure they are working as expected

   2. Please ensure you have whitelisted both “amp@gmail.dev” and your from address as mentioned in screenshot below.

3. Visit AMP Playground and paste the AMP Email code that you have prepared for Test in the visual editor as shown in screenshot below.

   Open

   

4. You will see the VALID in the AMP playground if your AMP code is as per format and guidelines. If not, you can fix the issues mentioned to create VALID AMP email code and then hit the SEND option.

5. In the Gmail account used in the Browser, you should receive the Test Email from “amp@gmail.dev” email address.. 

6. Make sure the dynamic Symbol is there and also behavior should be dynamic as expected.

   Open

   

7. Now, Copy the code from Playground and paste in "AMP" section in "Email Design" at Ongage along with an HTML copy of the email.

8. Send a test campaign from Ongage using ESP connection with From address you whitelisted in Step 2; and same behavior should be expected as in Step 6.

AMP Registration Submission Process for Supported ISPs

You must register your sending domain to enable AMP rendering in inboxes like Gmail and Yahoo. In order to get approval from ISPs, please follow the steps given below. 

1. Prepare Your Domain

   1. Check SPF, DKIM, and DMARC are set up and passing for the sending domain

   2. Ensure that you have configured HTTPS for tracking and image domains to be used in your account. 

   3. Check the Domain has a good sending reputation in Postmaster tools.

2. Prepare Production Ready Email Message in Ongage

   1. Create Production ready AMP Email and test it using AMP Playground.

   2. Create the simple HTML version of the same Email message.

   3. Create  Email Message as per the steps suggested above in Ongage. 

   4. Please ensure you have both, HTML and AMP versions of Email Message prepared and updated in Ongage Email Message.

   5. Ensure that you have configured HTTPS for tracking and image domains to be used in your production campaign.

3. Prepare Details Required to Submit for AMP Registration

   1. Email Address: To receive updates about the AMP Email Approval

   2. Name: Who will represent the organization 

   3. Company Name

   4. Company Origin Country

   5. Company Privacy Policy Link

   6. Email Address your AMP emails will be sent from 

   7. Use case(s) do you plan to deliver using AMP for Email

   8. 3rd Party ESP(s) used to send Emails through (Ongage in this case)

4. Follow AMP Registration Steps

   1. First, use the Production Email Message with AMP email configured and send a test campaign using ESP connection with the applicable From Address/Sending domain to following email addresses.

      1. ampforemail.whitelisting@gmail.com

      2. ampverification@yahoo.com

      3. postmaster_amp@corp.mail.ru

   2. Once the sample email is sent, submit this 4 step form with required details. The details you prepared in Step 3 will be used to submit in this form. 

   3. Once submitted, you will get notified on email used in form for the Registration success or anything related to the Registration. The Gmail and Yahoo registration normally takes 5-7 working days. 

Note: In the case of Gmail, the AMP Registration process needs to be followed for each From Address separately. Whereas for Yahoo and Mail.ru, the approval process needs to be followed for sending domain only. For more details about AMP registration, please refer to this guide from Gmail.

List of Vendors that support AMP friendly Email

Email Design FAQs

How to Import HTML to the HTML Editor

• When editing an Email there are multiple ways in which you can insert/load the HTML content into the Email:

  • Paste HTML

    • Go to your local HTML file and copy the source of the HTML

    • Go to Edit HTML

    • Paste the HTML source code into the newly opened window

    • Make sure to maintain correct <html>, <header> and <body> open and close tags

    • In case there are errors in the HTML source code, a notification error/s will appear on top of the window. Additionally, a new 'Warnings & Errors' section will appear at the bottom, specifying where the HTML error is

    • Make sure there are no errors at all before you save your HTML source code

  • Upload HTML Template

    • You may use any of the HTML Templates defined in your Template Library

    • Click the "+Template" button

    • A new 'Select Template' window will open

    • Selected the Template you want to use

    • And the HTML will get inserted directly into the Edit HTML editor

  • Upload external content

    • You may choose to upload a file or provide an external URL link

    • Click the "+Content" button

    • A new 'Upload Content' window will open

    • You may either browse and upload any HTML file, as well as a ZIP file that contains both the HTML and images in one ZIP file. 

      • In the latter case it will upload both the HTML into the email and images directly into the image library, and assemble the images within the HTML to correctly point to their links in the image library.

    • Or provide a URL to where your HTML is located on some accessible Internet server 

    • Click "Upload"

    • The HTML will be loaded into the Edit HTML editor

View Email in Web Browser Link AKA Mirror Link

These are used, typically at the top of an email, in order to provide your contacts the option to view the email in a web browser . Often the text for this link might be something like: "if you are having trouble viewing this email click here". But you have full control to whatever text you'd like to place here (and of course in any language).

 Note: Nowadays its quite rare that an email cannot be displayed in a mail client and therefore there's declining use of this email message feature.

For WYSIWYG editor, see the following steps to add a view in browser link (aka mirror link) in your email message:

1. Go to Edit Email message.

2. Write and highlight the text you would like to use for view in web browser link.

3. Click on the 'Link' icon.

4. Select 'View in Web Link'' from the links drop-down.

5. Click 'OK' to confirm.

   Open

   

    

For Beefree editor, see the following steps to add a view in browser link (aka mirror link) in your email message:

1. Go to Edit Email message.

2. Write and highlight the text you would like to use for viewing in a web browser link.

3. Click on the 'Link' icon.

4. Select the word that you want to display (in this case open in browser). 

5. Choose the hyperlink option and Add {{ocx_mirror_page}} in the URL and click ‘OK’ to confirm.

   Open

   

    

How to disable WYSIWYG Editor

• Go to Email Design >> Edit HTML >> Disable WYSIWYG

  Open

  

   

• By checking the above option, you can prevent the WYSIWYG editor from doing any additional changes to your HTML code (this check box, replaces the ‘Save as is’ button that used to be in the HTML editor)

How to set Custom Unsubscribe Link in WYSIWYG Editor

You can customize the HTML format and design of the Ongage unsubscribe link in the body of your HTML email message, with the following steps:

1. In the Email WYSIWYG editor choose the "Link" icon:

   Open

   

    

2. In the drop-down choose Link Type "Unsubscribe"

   Open

   

   
   You can place this anywhere you want in the body of the email

 The above will create the following unsubscribe link in the HTML code: <a href="{{ocx_unsubscribe_link}}">your text</a>. This link feature allows you to design and format your unsubscribe link however you see like, so it will fully match the design of your HTML email template.

 Note: When you use a customized unsubscribe link like described above, you can un-check the 'Unsubscribe default link' in the 'Unsubscribe Management' section of Step-1, which will simply add a non formatted unsubscribe link, to the very bottom of your email message.

 Note: that some ESP(s) enforce their own unsubscribe link, and will add a link to the bottom of your email, regardless. See full list here.

How to set Custom Unsubscribe Link in the BeeFree Editor

If you'd like to set an unsubscribe link in the BeeFree editor, follow the steps listed below.

1. Go to Email Design >> Select Text Box

   Open

   

    

2. Write and highlight the text you would like to use for the Unsubscribe link.

3. Click on the 'Link' icon.

4. In the Insert Link window add {{ocx_unsubscribe_link}} in the URL field and click OK to confirm.

   Open

   

How to Preview Email Message using Litmus

1. Start by going to Campaigns >> Email Messages. In the Email Design panel, click on the Edit WYSIWYG Editor, choose a template from the template library of your choice and then click on the “Test with Litmus” button below.

   Open

   

    

2. If you are testing for the first time, you need to login to your litmus account with your credentials. Also if you are already signed in it displays a credit score per account, of how many previews are left for that particular account. After signing in you can run the test.

   Open

   

    

3. Once you run the test, it gives you an overview of how your email messages will appear in different browsers and applications.

   Open

   

    

4. Preview of how it appears in Outlook is shown in the screenshot below.

   Open

   

    

5. Similarly, here is the gmail preview for the email message.

   Open

   

What if I close my Litmus Account

Once you close your Litmus account, Ongage defaults back to providing up to 6 previews per month via the free Litmus preview integration.

How to Implement a Basic Feedback Survey in an Email Message

If you'd like to implement a basic survey / satisfaction feedback, in the body of an email, you can achieve this by using the Post-back link feature in the email message. For example, you can add two buttons: Satisfied and Unsatisfied, and create two separate Post-back links, once the recipient clicks on a button option, the associated value will be posted to the selected List field for that contact. To implement, please follow the steps below: 

1. First create a List Field to store Survey results. You can name it something like “Survey”.

2. Then Go to List >> Settings >> Post Back Links >> Click on “Create New Post Back Link”.

3. In the form to create Post-Back link add the Link Name, Select the List Field you created in Step 1, and define the value which will be populated in the list field once this survey option is selected. For example define “Satisfied” as a value that will be inserted to the List field.

   Open

   

    

4. To notify the user about the confirmation of the feedback, you can add your own text that will be displayed to the user once the feedback is submitted.

5. Create another Post-Back link for another Survey Option such as Unsatisfied (to be posted back to the same List field).

6. Now, create an Email Message and add two buttons Satisfied and Unsatisfied.

   Open

   

7. Select the link type: Post-Back Link and for Satisfied select the link: Survey Feedback Satisfied.

   Open