Email Templates

In this article: 

• Overview 
• Creating a template 
• Editing and customizing templates 
• Template integration - Email API/SMTP 
• Template integration - Email Testing 
• List of templates and user permissions 

Overview 

Email Templates allow you to design, edit, and host HTML email templates on Mailtrap Email Delivery Platform and reference them via API.

You don’t need to save the template in your code; you can upload HTML or use one of the ready-made templates. Then, you can call the template via API, send it to your recipients with Mailtrap Email API/SMTP, or inspect it in your virtual inbox with Mailtrap Email Testing. You can also use Templates for Mailtrap Email Marketing.  

Note: You should have both Email Testing and Email API/SMTP accounts set up to use Email Templates for testing. This doesn’t apply to sending. 

By storing the template on Mailtrap platform and calling it via API, you can easily change the template code without committing to your codebase. 

Additionally, Email Templates support Variables, and Mailtrap uses Handlebars as a template engine. 

You can put {{user_name}} into your template and pass “John” as the “user_name” value via API. Afterward, Mailtrap renders the rest of the HTML and replaces the variable with the value. Handlebars also support more logic operators. For more information, check our article on using Handlebars syntax with Mailtrap.

Email Templates are available for all Mailtrap users. Each email sent using templates counts towards your monthly quota. Each account can have up to 100 email templates. If you need more - please contact Support.

Creating a template 

To create a template, you need to add a sending domain in advance. Check our Sending Domain Setup guide if you need any help with that.  

Important Note: To be able to send emails using email templates in production, your domain needs to be verified. Verification isn’t necessary to send email templates to your Email Testing inbox. 

To create a template, follow the steps below: 

1. Navigate to the Templates menu.

2. Click the Create New Template button. 

3. Click the drop-down menu to select one of your domains, enter the Template name, Subject, and Category, and click Continue. 

4. Choose the Drag & Drop Editor to build the template without coding, or select HTML Editor if you prefer to write/modify the code. 

5. Create/modify the design and click Finish. 

• The main Templates menu features all your saved templates. To quickly access a saved template, just click on it within the main menu.

Editing and customizing templates 

Mailtrap gives you a few options to ensure templates perfectly fit your needs. Here’s what you can do. 

Details tab

Each template must have a name, subject, category, and assigned domain. The subject also supports variables. 

Adding an Email category to a template is beneficial because you’ll see the performance stats in Email API/SMTP for each template under Email Categories, where each category equals a template. 

For example, you create a template for a welcome email and name it Welcome Email, then use the same naming for the template category.

Reminder: To save changes to your template, click the Save button. Otherwise, the changes won’t be applied.

Code Editor

Code Editor allows you to edit the HTML or Text content, depending on the emails you want to send. 

The editor supports Find and Replace options, and you can use Cmd+F or Win+F as a hotkey to reveal a quick search bar.

If your template has an error, Handlebars cannot render it. You’ll see an error message in the Preview tab, and the RAW code with an error will be highlighted in the Editor. 

You can’t save a template with errors, either. Remember that we don’t validate HTML.

Uploading an image

You can also use and host your images within our platform. To simplify things, you can upload images from the Code Editor and get a public URL to reference an image in the template under the <img> tag. Here’s a quick guide.

1. Click Upload image in the upper right corner of the Code Editor. 

2. Hit the Upload New button in the following menu and choose an image from your local drive (Supported formats are JPG, PNG, and GIF, and the maximum file size is 2 MB).

3. Once the image is uploaded, you will receive a confirmation notification. If the file format is unsupported or the image is too big, you will receive the corresponding error message. 

4. Click the Copy URL button to copy the image URL to your clipboard, then click Template to return to the editing menu.

5. Proceed to add the image to the template body under the <img> tag. You can preview it in the template as soon as the asset is added. 

You can delete image assets by clicking on the trashcan icon at the far right of the image. This action can’t be undone, and the templates featuring the image will no longer display the asset.

You can filter the uploads using search. All assets are available within your account and the templates themselves. 

Tip: Use logical names in image filenames. For example - Logo.png, not 1232.png.

Test Data

Code Editor automatically parses your template and shows all the variables found. The Test Data tab helps you preview the object variables, which you pass via the Mailtrap Email Sending API, Mailtrap Bulk Sending API, or Mailtrap Email Testing API to send your email in production or test it in staging.

By default, as a value, we put a variable name and add the “Test_” prefix.

You can change the values, and that’s reflected in the email Preview. However, these changes are not saved even if you click the Save Template button. When you leave the page, we prefill values again with “Test_” values.

Drag & Drop Editor

The drag-and-drop editor allows you to design templates without any coding. You can use different types of content blocks, add buttons and links, upload images, optimize the template for desktop and mobile views, and preview the design. 

Note: Device previews are emulations. 

Send test

If you’re using email templates in production, you can send a test email to the account owner's email address to run basic tests. Simply press the Send Test button. 

Important Notes:

• Send Test feature isn’t the same as testing email templates with Email Testing. 
• To send a successful test email, save your template first and make sure it has no Handlebars errors. 
• Your domain should be verified to send a test. 
• Each test email is billed over your quota.

Template integration - Email API/SMTP 

1. Navigate to Templates in the menu on the left. 

2. Click the template you want to call using the API. 

3. Open the Integration tab. 

4. With Email API/SMTP toggled on, click Integrate under Transactional Stream or Bulk Stream. 

5. Copy the necessary credentials such as Host, API Token, and Template UUID. 

6. Alternatively, under Code Samples, choose the desired language and copy the sample configuration already containing the necessary credentials. Mailtrap’s official SDKs (Node.js, Python, PHP, and Ruby) also support the templates feature. 
7. Paste the code into your project and customize it if needed. Then, run the code to send an email to the email address you indicated in your script. 

For more details, open the API docs and go to Email Sending API → Emails → Send email (including template) for transactional stream and Bulk Sending API → Emails → Send email (including template) for bulk stream. Under Body, click the dropdown menu, and choose EmailFromTemplate. 

Template integration - Email Testing 

1. Navigate to Templates in the menu on the left. 

2. Click the template you want to call using the API. 

3. Open the Integration tab. 

4. Toggle the switch to Email Testing. 

5. And click Integrate. 

6. Select the desired inbox from the dropdown menu to reveal its credentials. Copy the Host, API Token, Template UUID, and Inbox ID. 

7. Alternatively, under Code Samples, choose the desired language and copy the sample configuration already containing the necessary credentials.
8. Paste the code into your project and customize it if needed. Then, run the code to send an email to the selected Email Testing inbox.
9. Finally, check the inbox you specified in the script to inspect your email template. 

• The Tech Info tab contains the link to the template you tested and lists all the variables used in the template.

For more details, open the API docs and go to Email Testing API → Test Emails → Send email (including templates). Under Body, click the dropdown menu, and choose EmailFromTemplate. 

List of templates and user permissions

Clicking on Templates in the side menu lists all the templates you can access.

Access to templates is managed on a domain level. You need to have Admin access to a domain to manipulate the templates. In case you don’t have Edit rights, you can’t change the template.

Reminder: You can delete a template. However, this action is irreversible, so be sure to change the sending/testing code after deletion. When the template is deleted, the UUID is also deleted, and Mailtrap won’t be able to render it.