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 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.

Specify the email subject and preheader

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.

You can use the AI suggested content wizard to get creative ideas for catchy and engaging email subject lines and preheaders.

HTML editor

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

Use the Inspect mode to identify HTML code corresponding to your selection in the Preview panel and debug any issues you might have found. For example, you can use the Inspect mode to identify the HTML source code corresponding to certain text, button, or image in your email.

To identify the corresponding HTML code, click the Inspect icon in the preview panel and then click the area in the Preview panel. The corresponding HTML code is highlighted in the HTML panel.
To find an area in the Preview panel corresponding to the HTML source code, click the Inspect icon and then click the HTML code.

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.

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. The default plain text content generated by Blueshift is also displayed in the Plain Text tab. You can edit this content or add your own content. To override the system generated content with this custom content, select the Use the content below to replace the system generated plain text content option.

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.

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

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.