Service statusLog in

Upload your ready-to-use HTML template

Uploading an HTML email template into Batch requires careful attention to detail. It is essential to review a few key elements to ensure everything looks and functions as expected. This final check helps you deliver a polished and professional email that matches your original design and renders properly across all inboxes.

By following this step-by-step guide, you’ll catch any small issues before going live — giving your template the best chance to perform and engage your audience effectively.

Let’s dive in and get your campaign ready for success 🚀

Introduction and prerequisites

Which tool should you use?

To modify the HTML of your emails, we recommend using a code editor of your choice, such as:

  • Visual Studio Code (download here)

  • Sublime text (download here)

  • Any other tool of your preference 🔧

These tools allow you to visualize your code more clearly using color coding and save your changes in HTML format.

Find your HTML poorly structured? Go to Small DevTool to make it more intelligible.

Prerequisites

Before uploading your template to Batch, make sure you’ve completed the following steps:

  • Save your HTML file as index.html or mail.html (max size: 512 KB).

  • Place all images used in your email inside a folder named images.

👉 Once these two steps are done, you’re ready to start editing the HTML to make it Batch-compatible. Need more guidance? Check out our article How to upload my email templates?

HTML modification

Add a pre-header

A pre-header is the short line of text that appears right after the subject line in the inbox preview. It’s a great opportunity to grab attention and increase your open rate.

To add one, simply insert a hidden element at the very top of your HTML email, just after the opening <body> tag:

<div style="display: none; max-height: 0px; overflow: hidden;"> YOUR PREHEADER TEXT </div>

This text won’t be visible in the email body, but it will show up in the inbox preview. Choose something catchy and relevant to encourage your user to open your email!

Mirror link management

Mirror links (“View this email in your browser”) are not supported and must be removed from your HTML template:

To do this, search your HTML for phrases such as "View this email in your browser" or "view online". Once located, delete the entire block of code that includes the mirror link.

Don’t forget to remove both the opening and closing tags of the block to avoid any display issues.

Manage your links

When an email campaign is sent, all redirection links are automatically rewritten to enable click tracking. That is why it is crucial to ensure that the links in your HTML accurately reflect your original URLs. Search for all href attributes in your HTML:

  • Replace each one with your original redirect link, including any tracking parameters from your analytics platform (e.g., xtor for Piano, utm for Google Analytics, etc.).

This ensures both proper tracking and a seamless user experience.

Manage images and gifs

When uploading your email template as a .zip file to the Batch dashboard, it must contain two essential components:

  1. An HTML file named index.html

  2. A folder named images that includes all visuals used in the email (images, GIFs, etc.)

To ensure images display properly in the final email, all image links in your HTML must reference this images folder.

How to do it:

  1. In your HTML file, search for all src= attributes.

  2. Update each image path to follow this format:

src="images/image-name"

This step is key to making sure your visuals render correctly when the email is sent.

  1. To speed things up, there is a function that allows you to replace one word with another:

  2. on your html tool, once you're in the html file of your e-mail, press ctrl + F

  3. A pop-up window will appear at the top right of the screen

  1. Once you have entered the new value, click on "Replace all".

Adding the unsubscribe link

When a user clicks the unsubscribe link in your email, this action must be properly tracked by Batch to ensure they are no longer targeted in future campaigns.

To do this, your HTML must include two key elements in the unsubscribe section:

  1. The unsubscribe variable – This allows Batch to register the user's unsubscription in real time.

  2. The unsubscribe confirmation page – On clicking on "Unsubscribe": the user will be sent to a landing page indicating that their request has been taken into account.

You can find all the links to Batch unsubscribe landing pages by following this link: How to add an unsubscribe link to your email template

Personalization

Personalizing with user attributes

You can personalize your message using user attributes — a common use case is displaying the recipient’s first name.

Insert the recipient's first name dynamically

👉 Head over to our complete personalization guide for more details and best practices.

Dynamic images

You can display dynamic images using IF conditional blocks in your HTML. Here’s how to do it:

  • Use the attribute name exactly as it is sent to Batch (e.g. subscription_end_date).

  • Adjust the src= value for each condition to show a different image depending on the user's data. Example: 

{% if user_gender == 'female' %}
  <img src="images/female.png">
{% else %}
  <img src="images/male.png">
{% endif %}

Use the src keyword in your code editor to quickly locate image links in your HTML.

Dynamic links

If your email has dynamic links or if the links contain customization, here are the steps to follow in order to make them effective:

Dynamic redirect link

Here is the Batch structure to use:

https://drive.google.com/{{ triggerEventAttr('attribut') }}

If you want the user to be redirected to a specific page related to actions they have previously carried out when they click on the link.

Link with customization

Here is the Batch structure to use:

https://nom-entreprise.typeform.com/to/xxxx#email={{attribut1}};user_id={{attribut2}};language={{attribut3}}

If you want to collect a some information about your users (e.g. first name, email, language, etc.) when the link is clicked.

To find redirection links in your HTML, search for href.

Final checks

Once you have made all the changes required to migrate your template to Batch, we invite you to test its appearance in Batch and then in your inboxes 🪄

PreviousDesign your template with the Email ComposerNextSMS

Last updated

Was this helpful?