Header & footer templates

The header_template and footer_template parameters insert HTML into the top and bottom margins of every page in the rendered PDF. They’re most commonly used for page numbers, the document title, the date, or a small branding strip.

Two things to set up

1. Provide the template. Pass header_template, footer_template, or both, as HTML strings in the request body.
2. Reserve the space. Set a large enough margin_top (for headers) or margin_bottom (for footers). If you don’t, the page content overlaps and hides your header or footer.

Dynamic value tokens

Add one of these classes to an element inside your template and Chromium replaces its text content at render time:

Class	Replaced with
pageNumber	Current page number
totalPages	Total pages in the document
date	Render date
title	Page <title>
url	Source URL

Example template

<div style="margin: auto; font-size: 10px; text-align: center; font-family: Roboto;">
  Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>

Example request

{
  "url": "https://en.wikipedia.org/wiki/Airplane",
  "footer_template": "<div style='margin: auto; font-size: 10px; text-align: center;'>Page <span class='pageNumber'></span> of <span class='totalPages'></span></div>",
  "margin_bottom": "2cm"
}

Things to know

• CSS from the source page does NOT cascade into the template. Set every style inline on the template element itself, including font-size, font-family, and color. The default font size is tiny.
• Templates render in an isolated context. No JavaScript, no external requests, no access to the source page DOM. Inline CSS only.
• Keep templates simple. They run on every page, so a complex template can add real time to long documents.
• margin_top and header_template go together; margin_bottom and footer_template go together. Setting a template without the corresponding margin leaves no room for it to appear.