How to create Headers and Footers

We are introducing a new way to add Headers and Footers to the body of an Email/PDF template.
You will be able to use the below tags that work similarly to the  one:

Each of the tags supports an optional parameter height, if the user does not define it it's set to default 20px. Be wary, that if the defined header/footer height is less than the actual content it may overlap with the main text.
The Default font size inside: font-size: 14px.

To avoid issues with the page break when multiple parts are printed on a PDF and create an additional page we suggest increasing the height parameter in the Header/Footer - try 90px and above for instance.

The content inside the header/footer can be filled in HTML like the rest of the template.

Examples:

How to embed an Image to Header/Footer

Please note that you would need to convert your images to Base64 format to embed them into the Headers and Footers of the templates.

How to display Base64 images in HTML?

Base64 is a widely used method for encoding binary data, such as images, into ASCII text. This enables embedding binary data, such as images, directly into HTML without needing separate image files. In the context of web development, Base64 encoding is often used to improve page performance, security, and compatibility by reducing the number of external HTTP requests.

Components of a Base64 Data URL:

Data Type: Specifies the MIME type of the file. For example, for PNG images, it’s data:image/png.
Encoding Indicator: Specifies that the data is Base64-encoded by appending ;base64.
Base64-Encoded Data: The actual image data encoded in Base64.

Example:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..."/>

The src attribute contains the Base64-encoded data string, which the browser decodes and displays as an image.

Approach:

Displaying Base64 images in HTML involves converting binary image data to a Base64 string and then embedding it into the HTML as a data URL. A data URL is a type of Uniform Resource Identifier (URI) that embeds the image data directly into the source code of a web page. Here’s how you can display a Base64 image in HTML.

Convert the image to Base64 format: You can use an online Base64 encoder to convert the binary image data to a Base64 string. The result will be a string of characters that can be easily embedded into your HTML code.
Create a data URL: The Base64 string must be wrapped in a data URL format. The data URL format consists of three parts: the data type, the Base64 encoded data, and the ending of the URL. For an image, the data type would be “data:image/[format]; base64,” where [format] is the format of the image file (e.g. PNG, JPEG, GIF).
Embed the data URL into your HTML: To display the image, you can use an HTML image tag (<img>) and set the “src” attribute to the data URL.

For example:

<img src="data:image/png;base64,iVBORw0KG..." />

Note: Base64 images can enhance webpage interactivity, but may lead to larger file sizes and slower loading times. Reserve them for small images, while relying on traditional file hosting for larger ones to optimize performance.

How to add Page numbering function into Header/Footer

You can use the below HTML code in the Headers/Footers to create page numbers for each page. The code needs to be added just once and it will be replicated on each page automatically along with the Header/Footer:

<!--footer_start height="50px"-->
  <div style="display: flex; flex-direction:row;">
    <div>Page &nbsp;</div>
    <div class="pageNumber">&nbsp;</div>
    <div>&nbsp; of &nbsp;</div>
    <div class="totalPages">&nbsp;</div>
  </div>
<!--footer_end-->