Create your own email template

In this tutorial you will learn how to create a responsive email template. You can upload it to Friendly Automate and use it to create emails for your campaigns.

You will learn in this tutorial:

• how to create an email in MJML
• how to convert this email into an email theme
• and how to upload and use your email theme in Friendly Automate.

Let's get started!

Create an email in MJML format

For your email theme in Friendly Automate, you first need an email in MJML.

You have several options to create your MJML email:

• Use our Email Editor directly in Friendly Automate (you can find a tutorial here).
• Or you can use any other platform where you can create emails in MJML. We recommend the editor on the official MJML website. All information about the MJML standard, many example templates and extensive documentation can be found at mjml.io.

This is what an email might look like that you create in the Email Editor in Friendly Automate:

How to use custom fonts in your email template

You can use custom fonts (like Google Fonts) in your templates. Do do this, you have to first add them to the header of your email.

{{ getAssetUrl('themes/'~template~'/assets/fontname.css', null, null, true) }}

The header of an MJML email starts with the <mj-head> tag and ends with the </mj-head> tag. If these tags do not exist in your template yet, just add them after the opening <mjml> tag and before the opening <mj-body> tag.

Inside the head tag, you can then provide a custom font.

Example with externally loaded font (not recommended for privacy reasons):

<mjml>
  <mj-head>
    <mj-font name="Comforter" href="https://fonts.googleapis.com/css2?family=Comforter"/>
 
  </mj-head>

	<mj-body>
	
	Here you'll find the visible content of an email.

	</mj-body>
</mjml>

Example with self-hosted font (recommended):

<mjml>
  <mj-head>
    <mj-font name="CustomFont" href="{{ getAssetUrl('themes/'~template~'/assets/fontname.css', null, null, true) }}"/>
 
  </mj-head>

	<mj-body>
	
	Here you'll find the visible content of an email.

	</mj-body>
</mjml>

Custom fonts can then be chosen in the mj-text blocks:

<mj-text align="center" color="#fff" font-family="CustomFont, sans-serif" font-size="12px">
		  This is some text rendered in a fancy Google Font
</mj-text>

The “safe” fonts that are supported by most email clients are:

• Arial (sans-serif)
• Verdana (sans-serif)
• Helvetica (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Courier New (monospace)
• Brush Script MT (cursive)

When you are using a custom font, please make sure that you always provide one of the safe fonts as fallback font. For example, don’t use this:

<mj-text font-family="SomeFancyGoogleFont">
		  Some text
</mj-text>

Instead, provide one or more fallback fonts for all the email clients that don’t support custom fonts:

<mj-text font-family="SomeFancyGoogleFont, Times New Roman, serif">
		  Some text
</mj-text>

Turn your email into an email theme

Now, in order to create your Friendly Automate email theme, first download and unzip this zip file:

In the file you will find two folders, "assets" and "html", and two files "config.json" and "thumbnail.png".

Here's what you do with it:

assets

In the assets folder you will put all the images you used in your email, of course with the identical file names. It's a good idea to reduce the image size – generally 600px is enough – and choose a suitable file format, usually JPG for photos and PNG for logos or graphics.

config.json

In the config file you will find the metadata of your email theme. Open it with a simple text editor (e.g. Notepad or Textedit):

Customize the entries as follows:

• "name": Enter the name of your theme here.
• "author": Enter the name (or company) of the author of the theme here. This information is only visible internally, but is helpful for keeping track of your own themes in Friendly Automate.
• "authorUrl": Enter your website or that of your company here.
• "builder": You don't need to modify anything here. "grapesjsbuilder" is the name of the email editor in Friendly Automate.

This is what the customized config.json would look like for the sample Paul Klee newsletter:

html

In this folder you will find four files:

Open the file "email.mjml.twig" with a simple text editor (e.g. Notepad or Textedit). Delete the sample text in the file and copy the MJML code of your email into the file instead. If you created your email in the Email Editor in Friendly Automate, you can find the email code here:

Then modify the links for all the images:

The link so far is:

src="https://kathrin.friendlyautomate.io/media/images/grapesjs/logo.jpeg"

Change the link as follows:

src="{{ getAssetUrl('themes/'~template~'/assets/logo.jpeg', null, null, true) }}"

Of course you insert the correct filename of each image again. Do this step for all images in your email.

Now copy all the code from this file and paste it identically into the "email.html.twig" file. Save both files.

You don't have to do anything with the other two files in the folder (base.html.twig and message.html.twig).

thumbnail.png

Replace this file with a screenshot of your email. It is the image that is displayed in the email theme selection screen. To do this, follow the steps below:

• Take a screenshot of your email.
• Resize the screenshot to about 400x600px (the exact size is not essential).
• Make sure that the file format is "png" or adjust it if necessary.
• Rename your screenshot to "thumbnail.png" and replace the sample file in the theme folder with this file.

Compress files

Finally, create a zip file again from all the files in the theme.

Integrate your email theme into Friendly Automate

In Friendly Automate, click the gear wheel in the upper right corner and then click on "Themes".

Now you will see all the email themes that are already available. Click on "Select file" in the upper right corner, find the zip file and click on "Install".

Your theme should now be available in the email theme selection. You can get there by clicking on "Channels" and then "Emails" on the left, and then on the "New" button on the top right.

This is how the preview for the sample newsletter theme would look like:

You have successfully installed your own email theme! You can now use it for your email campaigns.

Do you have any questions? We are happy to help you via 📧 email, ☎️ phone and 👩‍💻 video calls.

Click here to go back to the main help page:

Friendly Automate