Blueshift provides interactive and easy to use template editors. You can use these editors to create beautiful email templates. Based on the tools that are available, you can use these templates to send amazing emails to your customers to drive engagement on your service. On the Blueshift web app, you see two options when you try to create an email template:create_template_email.png

 

  • Visual editor:  Select this option if you want to drag-drop components (such as text, image, buttons, rows, columns, and more) from a component selector into the content of the template that you plan to create. 
  • HTML editor: Select this option if you want to specify the HTML source code to create an email template. 

The template editor

Before you get started, it's important that you get used to the editor's interface and the tools it provides. We suggest that you take a look at the following image and associated pointers that indicate how to use the editor. 

visual_editor_email.png
(Click to see the full-size image)

Let's review the email editor components one-by-one. 

Template configuration tabs

When you launch the template editor, either to create a template or edit an existing one, the first page that you see is the Properties tab of the template editor. Each tab provides options to configure the template. Here are the tabs that are available: 

  • Properties: Provides options to specify and review a template's basic properties. Such as:
    • The template's name
    • Its organization using tags and tag folders
    • The list of shared assets it uses
    • Campaign behavior properties
    • Preview panel 
  • Content: Provides options to design your template. In visual editor, we provide HTML components of the email as visual components that you can drag-drop into the design panel to create the template. 
  • Data: Provides options to use the recommendations in the template and review its data. 
  • Test Send: Provides options to send a test mail to an email address that you specify.
  • Engagement: Provides a click heat map that indicates how your customers engage with the template. 

Following sections provide more information on each tab. 

Properties

This is normally the tab that you see when you open or create a template. 

visual_editor_template_properties.png

This page provides options to edit the name, organize it under tags/tag folders and more. In addition, you can preview the template and how it looks like, to one of the customers that you have added in Blueshift. You can also change the customer to preview how the template looks like for someone else. 

change_customer.png

In addition, you can manage versions of the template when you click the Compare Versions button. Use the Preview the tab to compare the templates.

template_version_email_comparison_preview.png

Use the Meta Data tab to compare metadata changes across versions.  

template_version_email_comparison_metadata.png

You can also restore an older version of the template.  For more information, see template versioning.

In addition, you can set the campaign behavior properties such as:

  • You can stop Blueshift from sending messages if one of the recommendations that you add in the template are empty
  • You can stop Blueshift from sending messages if one of the external fetches (such as images) that you add in the template are empty
  • You can stop Blueshift from sending messages if there is an unavailable product in the event that triggers the message  

The properties page also lists:

  • The shared assets (such as images and HTML) that the template uses
  • The campaigns that use the template

Content

This is the tab where you design the template and specify its content. Based on the editor of your choice, you can review the documentation of one of the following sections.

Before we get into specifics of individual editors, here's some info on the common fields:

  • Subject: You can type in a subject or use a shared asset of the type Subject Line. For example:
    mceclip0.png


    And you'll see that the plain-text content of the shared asset shows up in the preview.
    mceclip0.png

    For more information about shared assets, see this document.

  • Preheader: You can provide the content that shows up in the email previews, here. For example:
    mceclip2.png
    As you can see, you can use Liquid template language to have the content customized according to the customers. This is how it'll look like in real life:
    mceclip0.png

The following sections provide more information on the email template editors. You can use either of the two to create templates. 

You can drag-drop HTML components as visual components into the design panel and design the template according to your needs.

drag-drop-components.gif

When you select the type of the template editor, you can pick from a gallery of pre-created templates that we provide and then customize those templates to suit your needs.

The visual editor is provides a lot of advanced features that you can use to create a compelling template that you can use in your campaigns and send engaging messages to your customers. 

You can preview how is it rendered for your customers on the Data tab.

mceclip1.png

To learn more about the visual editor, we suggest that you go through its dedicated documentation that we have created

 

If you are comfortable with writing HTML and Liquid syntax, you can use the HTML editor to create the template.

liquid_email_template.gif

In addition, there are other options that are available in the HTML editor.

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. We automatically generate a plain-text version for every email template that you create on our platform.

To provide customized content for the plain text version of the message, you can use the Plain Text tab under Content section of the HTML editor. However, we recommend that you exercise caution when you provide custom content because your content will override the content that we automatically generate. 

plain_text_editor.png

The preview section shows a how the plain text version looks. To see how the plain text message looks, send a test email to a plain text only client. To get this feature, reach us on 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.

Users who use Sparkpost as their ESP will now be able to create AMP emails in Blueshift. Users can specify the AMP components directly in the 'AMP HTML' tab of the HTML template editor. Users will still need to specify the HTML content (in addition to the AMP content) before they 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 will need to do a 'test send' to view the email on a client that supports AMP emails. 

If you are interested in using this feature, please  reach out to support@blueshift.com to enable the feature.

Google has a whitelist of certified AMP senders, so you need to apply to be included in the program here  https://developers.google.com/ gmail/ampemail/register . Once you have applied and accepted into the program, please reach out to 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 above:

  • Make sure 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.    Here, 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. 

reg_para.png

Once you register these elements, you will see them under the Elements tab of the template:

elements_tab.png

 

Editable Image Elements: You can make up to 30 images in the template editable by adding IDs "ad_hero1" through "ad_hero30". Here's a sample:

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

Editable Rich Text Area Elements: You can make up to 30 rich text areas in the template editable by adding IDs "ad_body1" through "ad_body30" to the div surrounding the text block. Rich text elements show a WSYWYG editor to the end user and replace the contents of the marked div with html generated by the WSYWYG.

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

Editable Plain Text Elements: You can make up to 30 plain text elements in the template editable by adding IDs "ad_text1" through "ad_text30" to the div surrounding the text block. Plain text areas replace the contents of the marked div with plain text, no html. This sample snippet adds two separate plain text elements.

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

<p id="ad_text2">Goodbye</p>

Data

This is the place where you specify the data that you want to use in your template to customize it for your customers. Transaction_Replay.png

 

 

Here are the details that you can provide and use in the template's content:

Configuration data

These will be included as add-on content for your template.

  • Recommendation: Choose a recommendation algorithm to automatically suggest products personalized for a customer.

    You can also see predictive scores and affinities that are associated with a customer's profile. You can use such values to include or exclude recommendations from the email message that your customers receive. Predictive attributes are available under user_metrics.

  • External fetch (if you want to include data from an external source): Choose an external source to include dynamic messages in your email. You can include one or more external fetch creatives, each of which calls a unique API endpoint. You can then use the content that your API endpoint(s) return in your in-app messages using Liquid. For more information, see this document.

Click on Show Data on the editor to review the JSON of all the data that's available to you. 

data_tab_email_template_editor.png

You can now use Liquid merge tags to use that data in the Content tab of the template editor, to enhance personalization for your customers. For more information on how to use Liquid template language to personalize messages for your customers, see Personalization

Preview data

This is not a part of your template and it's used for previewing the content in your template. Here are its components:

preview_transaction.png

  • Transaction: If the user you are previewing with is in a transaction replay segment, the underlying transaction shows up here. For more details on transactions, see Transactions.
  • Sample event: Choose an event payload to preview the data that you can use in an email template. If an event triggered campaign uses the template that you create, then you can use the triggering event's data to personalize the message.  

The email preview gets customized based on the customer that you choose. You can look up one of your customers using any attribute that's available in your account. To get a customized preview, ensure that you select the customer at the top right. 

customer_selector_email.png

In addition, you can also use the toggle in the right side panel to preview the message for various devices sizes. 

preview_panel_data.png

In addition, if the user has the transaction that you are looking for, the preview section shows it and its details. 

 

Test Send

To preview your personalized content, you can send a test email to multiple users from within the Template Editor. Statistics on test send (open, click, etc.) will not be tracked.

mceclip0.png

Engagement

The engagement tab provides a click heat map that shows how your customers interact with different components of your templates. You can use these statistics to gain insight into how customers engage with the messages that you send them using Blueshift. 

mceclip1.png

For more information, see Click heat map.

Interested in learning more? Sign up for our Blueshift Fundamentals course.
This course is designed to teach fundamental concepts of Blueshift followed by hands on exercises in a simulated Blueshift instance. 
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.