Design template with HTML Editor

With the HTML Editor, you can create and edit email templates by directly modifying the HTML source code.

Note: It is recommended that you keep the overall email file size under 102Kb and compress images before you add them to the email template.

The HTML Editor has the following 4 tabs:

  • HTML: If you are comfortable with writing HTML and Liquid syntax, you can use the HTML editor to create the template.
  • Plain Text: Since spam filters watch for both HTML and plain text versions of a message, utilizing plain text alternatives is a great way to lower spam score.
  • AMP: Google AMP for email makes emails dynamic and interactive so you can deliver rich user experiences in emails. 
  • Elements: View and edit elements in the HTML template that are tagged as editable elements.

email_html_tabs.png

Basic template fields

All templates have the following fields. 

  • Subject: This is the subject of the email. You can override this when you select the template in a campaign trigger by providing an alternate subject.
  • Preheader: This is the content that shows up in email previews.

You can use shared assets in your templates and include personalization using Liquid template language. To include personalization in the subject and preheader, use {{}} to insert liquid merge tags.

HTML editor

Add your HTML code for the email template directly in this tab. You can include shared assets and personalization.

Including Shared Assets

To include a shared asset in the template, add the shared asset using the reference string for the shared asset. For more information, see Shared Assets.

For example, the following image shows a shared asset added to the HTML code and the preview of the shared asset.

email_html_sharedasset_example.png

Plain text editor

Since spam filters watch for both HTML and plain text versions of a message, utilizing plain text alternatives is a great way to lower spam score. To provide customized content for the plain text version of the message, you can use the Plain Text tab section of the HTML editor. 

The Blueshift platform automatically generates a plain-text version for every email template that you create on our platform. Hence, we recommend that you exercise caution when you provide custom content because your content will override the content that is automatically generated. 

The preview section shows how the plain text version looks in an email. To see how the plain text message looks, send a test email to a plain text only client. 

To enable this feature, contact support@blueshift.com.

email_plain_text_editor.png

AMP

AMP stands for Accelerated Mobile Pages, a Google backed project designed as an open standard for any publisher to have pages load quickly on mobile devices. Google AMP for email makes emails dynamic and interactive so you can deliver rich user experiences in emails. Currently Google AMP is supported for Gmail users, but not supported across all the ISPs. Pages making use of AMP coding appear within special places in the search results and/or with a special “AMP” designation.

If you are using Sparkpost, Sendgrid, or Mailgun as your ESP, you can create AMP emails in Blueshift. You can specify the AMP components directly in the 'AMP HTML' tab of the HTML template editor. You must also specify the HTML content (in addition to the AMP content) before you can save the email template since AMP is not supported by all email clients.

The preview functionality in the Blueshift app will only show previews for the HTML content. In order to preview the AMP content, users must 'test send' an email to view the email on a client that supports AMP emails. 

Note: To enable this feature, contact support@blueshift.com. Google has a whitelist of certified AMP senders, so you must apply to be included in the program. You can apply here:  https://developers.google.com/ gmail/ampemail/register. Once you have applied and been accepted into the program, contact your Blueshift account manager at support@blueshift.com.

You can test Google AMP for email while you wait to be whitelisted by following the steps outlined in the register link:

  • Ensure that you have SPF, DKIM and DMARC enabled on the sending domain.
  • You can enable receiving AMP emails on your personal Gmail by going to:
    Gmail Settings > General > Dynamic email and then clicking Developer settings. Enter your From email address with the correct domain that is signed with SPF, DKIM, DMARC. You can read Google's guide to testing AMP here: https://developers.google.com/gmail/ampemail/testing-dynamic-email

Editable image & text blocks

You can make certain image elements & text blocks editable, without the need to change the HTML. This way you can allow non-technical members in your team to update content without any knowledge of HTML.

You can make the elements editable by adding an ID to the element. This element is then available on the Elements tab. When you edit the text or update the image for the element on the Element tab, this change is reflected in the email that is sent. You can also view the changes in the preview.

Images

Add an “ad_hero” ID to an image to make it editable.

You can include up to 30 editable images in the template by adding IDs "ad_hero1" through "ad_hero30".

For example:

<img id="ad_hero1" src="http://d3ad91huxqg64v.cloudfront.net/e/fd769820f734872f7e2935bef2d66611-image_600x490.jpg"/>

Rich Text Area 

Add an “ad_body” ID to the <div> surrounding the rich text block to make it editable.
You can include up to 30 rich text areas in the template by adding IDs "ad_body1" through "ad_body30".

Rich text elements are displayed in a WSYIWYG editor to the end user and the contents of the marked div are replaced with the HTML generated by the WSYIWYG editor.

For example:

<div id="ad_body1"><p>Lorem ipsum dolor sit amet magna aliqua aliquip ex ea commodo consequat.</p></div>

Plain Text

Add an “ad_text” ID to the <p> tag surrounding the text block to make it editable.

You can include up to 30 plain text elements in the template by adding IDs "ad_text1" through "ad_text30".

Plain text areas replace the contents of the marked paragraph with plain text, and no HTML.

For example:

<p id="ad_text1">Hello World</p> <p id="ad_text2">Goodbye</p>

Example:

Consider the following example where a Plain text element is added.

email_html_elements_add.png

This plain text element is now available on the Elements tab and the contents can be seen in the preview.

email_html_elements_1.png

After updating the content from the Elements tab, you can see the updated preview.

email_html_elements_2.png

Include links

Blueshift supports the following links in the message content:

  • http:
  • https:
  • mailto: to launch the user's default email app to send an email to a specified email address. For example: <a href="mailto:someone@example.com">Send email</a>
  • tel: to start a phone call to a specified number. For example: <a href=”tel:+1954123555”>Call us</a>
  • sms: to launch the SMS app to send an SMS to a specified number. For example: <a href="sms://+14035550185">Send an SMS</a>
  • Deep links (for mobile customers). 

The click activity for users clicking on these links is available in the email template Click heat map report. You can also see these clicks in Campaign activity reports, Campaign performance reports, Insights reports and on the Creatives index screens.

Note: Clicks for mailto: links are not tracked.

Guidelines for email banner images

Here are some guidelines for the email banner image size:

  • For desktop screens, the recommended width is between 650px to 700px and the height between 90px to 200px.
  • For mobiles, the recommended width is between 320-385px and the height up to 100px.
  • On most devices, users can view approximately the first 300-500px section of the email without scrolling. As such, it is recommended that the email banner height should be small enough for the users to be able to view the email content without scrolling.
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.