Realtime Marketing-Gamification Platform

How to create an Email Resource?

By using Smartico you can avoid sending bulk emails, and instead send personalized messages to the right users in the right time.

The Email creation interface is packed with intuitive features like Drag & Drop Editor to create block based templates, dynamic images, personalized images based on tags, Raw HTML templating, link personalization with tags and Smart Preview – that enables you to test your email template with all it’s variations and tag replacements with different types of audiences without actually sending the mail.
All you have to do is just change the conditions in the preview and the email will dynamically change all tag placeholders.

Configure From & Reply To

Actually this part is done from the Campaign/Journey creator itself, when dragging an Email action into your flow builder canvas, you will have the option to choose from the different ESP integrated with your label and choosing the From & Reply to configured in the Label settings and they are set as below.

Please note that when using the Smartico Multi-Brand solution, the From and Reply To will be automatically selected by Smartico clever brand management according to the brand name.

You can use unlimited “From” and unlimited “Reply To” by adding them to the JSON. You should add the name and the email address that you would like your users to receive the mail from.
We suggest to use a name that will be easily recognized by your users and they will be able to identify your emails as “friendly”. 

Please note; the above configuration is done by Smartico according to the operator needs and requirements.

Drag and drop the Email action item into the canvas of your campaign and a lightbox will popup asking you to configure the mail resource, the activity hour and From & Reply To

Creating the Email Body

You can create the email in 2 ways according to your needs, you can build a Custom HTML from Scratch with the Raw HTML Builder or you can use the drag & drop editor.

Let’s go through the message creation the step-by-step:

  1. Pick a Name for your Email, this is for internal use only
  2. Add Subject Line
    You can personalize the Subject Line to each user by adding the relevant tags and custom event attribute as a placeholder to the text. For example, you can use the user first name and his last deposited amount, or last mission completed.
  3. Pick a Responsive Template from our Ready-to-use Library & Customize It as per Your Needs
  4. You can use tags to use for filtering better your email templates
Open Email Editor

In the email editor you will be able to use the Drag & Drop feature, or the MJML editor.
MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up the development time and lightens the email codebase.

You can choose from Smartico ready-made templates or from your own templates that were created by your team.
Templates can be created to be used by multiple emails based on such template for similar campaigns where you don’t need to create a new layout.

Creating a template is very similar to creating a regular email with the drag & drop editor, you can upload a thumbnail picture to recognize that template when selecting which one to use next time you create an email.

Drag & Drop Editor

This email editor plugin is fully responsive and works in the system of Rows, Columns, and Content Blocks.
Each Row can include several Columns and each Column includes an element like text, image, link, button and so on.

Open the  “Settings” tab to access the higher level of settings/css for your email, such as but not limited to:

  • Total Width
  • Background color
  • Link colors
  • Font settings (H1, H2, paragraph etc)
  • Line spacing
  • Preview text (Email Preheader)

You can add Text blocks, Rows, Images, Videos to your email, or whatever you need for your email, just treat your email as a big table where you can organize your content in rows and columns.

The blocks can be Duplicated, Moved and Deleted;
Click the duplicate icon to clone the block, to move the block just drag it to wherever you want, and click on the bin icon to delete the block.

You can customize each block separately and give different styling from the “Content” tab on the right panel as described below.

Text block editing:
Change the text/background color, alignment of the text, line spacing, padding from all sides and in case you want hide the element on different types of screens.

Image block editing:
You can choose to upload the image from:

  • From your local machine
  • From a Source URL (http://….)
  • Dynamic image (Dynamic image src can use Smartico Label tags. The image will change according to the tags provided by the configuration of the label tags setup in the backoffice, for example different image for different brands, or different countries or VIP levels etc.

Align the image to right/left/center, change padding, image size and insert Alt text.

Button block editing:
The button text supports HTML tags so you can use tags like H1, U, I, B etc.
Choose the color of the button and the color of the text, the size can be full width of the block or the size that will contain your text, considering the configured button padding and inner block padding.

The button can also have a border for which you can fully configure the styling.

Social block editing:
Choose the styling on the Social account buttons from the drop down, align them to the right/center/left of the block and set the size or padding.

Click on the edit icon of each Social account button to configure the account which will be connected with the button.
You can remove and add accounts as you wish.

HTML block editing:
You can add an HTML snippet block in your email and edit the HTML within the editor as shown below.

GIF block editing:
You can add an GIF into your email and choose a gif directly from “Gifhy” service through the search field, or insert your own Source URL of the Gif.
Choose alignment, size, margin and the link where your Gif will redirect.

Email Structure editing:
As mentioned above, the email editor works in the system of columns and rows. So use the “Structure” tab to drag & drop items into your email canvas, and build the layout for your email.

Each row can contain columns and each column can contain different type of content.

Each row can be edited separately and can be configured as to number of columns, background color, background image, border, stacking up columns in mobile etc, shown below.

Raw HTML templates

You can create emails without using a template and simply upload HTML or use our HTML editor.

Choose mail editor type “Plain HTML” and open editor to start creating your email or paste/upload one from external source.

Preview your email

From the email editor you can test your emails and preview the predicted results for any of the segments and conditions you configured for the label tags.

There are 2 ways you can preview your email template;

  1. Send a Test Preview to one of the emails configured as a test for previews. This will allow you to view the email’s body for an actual user from your label by populating it with data from his user profile, as per the tags and elements of personalization you added to the message.

    Step 1: Enter the Email you wish to test preview

    Step 2: Insert a user ID/login name to test with. The preview will take that user attributes into the email, so preferably you can use a user that belongs to the population you are targeting this email to.
    Step 3: Choose where to send the test to. You can add email addresses to this drop-down from the Label Settings -> Email.
    Step 4: Choose the Email Gateway/Provider to be used for the test.

  1. Use Preview Config to visualize the HTML code output with the raw message and attributes with Label tags, as added by you. For example, in the visual below, the personalization of the description of the bonus {{label.welcome_description}}, has been rendered in the preview as it is configured for that specific segment by the operator

Click on the “Preview Config” choose the conditions you want to preview by, and click on Preview button. You can change the conditions as you go and view the HTML in all it’s variations.

Please notice that tags on the user profile level (state. tags) will not be populated as this preview is not in the context of a specific user. Example values such as First name=Christopher will appear just for the Look & Feel.

Create Email Variations

You can create different variations of the same Email template, for different type of users, different languages, different VIP levels etc.
Different from the using of the Label tags, the Content Variations are changing their fixed content which is not influenced by the label tags.

For example: Hey {{state.user_first_name}}
A variation can be an Italian version of the greeting; Ciao {{state.user_first_name}}

Step 1: Choose the Email you want to make variations for
Step 2: Go to “Content Variation” tab
Step 3: Click on Create
Step 4: Choose a name for the variation
For example: Double trouble VIP Bronze
Step 5: Click on the variation you created and choose the criteria of the users that will get this variation.
Step 6: Choose the variation rules, Language, Brand, VIP level, Currency etc.
Step 7: 
When you are finished, click on “open editor” and start editing your content variation.