Adding detailed headers and footers with html

You can build your own headers/footers using custom HTML/CSS.

Adding custom HTML headers/footers
Including page numbers
Order of priority

Adding custom HTML headers/footers

If you add text that begins with <html> and ends with </html> to any of the footer/header content fields, PDF Potion will automatically interpret it as a custom header/footer.

For example, you can add the below code to either the left/right footer field to get a custom footer with the company's logo, name, address, phone number and email.

<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        
        .contact-info {
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            border-top: 1px solid #e0e0e0;
            font-size: 11px;
            color: #666;
            line-height: 1.4;
            width: 100%;
            height: 50px;
            box-sizing: border-box;
        }
        
        .contact-info strong {
            color: #333;
            font-size: 12px;
        }
        
        .company-logo {
            height: 30px;
            width: auto;
        }
        
        .contact-text {
            text-align: right;
        }
        
        @media print {
            body {
                background-color: white;
                padding: 0;
            }
            .contact-info {
                background-color: white;
            }
        }
    </style>
</head>
<body>
    <div class="contact-info">
        <img src="https://imageurl.com" alt="Company Logo" class="company-logo">
        <div class="contact-text">
            <strong>Company Name</strong><br>
            123 Business Street, London, SW1A 1AA<br>
            Phone: +44 20 1234 5678 | Email: info@yourcompany.com | Web: www.yourcompany.com
        </div>
    </div>
</body>
</html>

We recommend using the Bubble arbitrary text operator to make it easier to see the custom code:

Please note that we've added in dynamic for the img src (which will be the company's logo) and the company's name.

Here's how the footer looks in the output PDF:

LLMs (ChatGPT, Claude) can generate excellent header/footer templates. If you want your own custom header/footer but are not a traditional developer, we recommend trying them out.

Page Numbers

You can include page numbers in your custom HTML header/footer by including the text page-counter anywhere in the HTML.

Order of priority

You can not show both a custom footer and a plain text footer in the same PDF.

If you add a custom footer to the left or right footer content field and ALSO add some plain text to the other footer content field, the custom footer will override the plain text.

The same principle applies to headers.