Skip to main content

How to add watermarks to HTML invoice templates

Zuora

How to add watermarks to HTML invoice templates

The HTML Templates feature is generally available for invoices as of Zuora Release 2022.02.R2, and for credit and debit memos as of Zuora Release 2022.05.R1.

In the HTML template editor, you can use the HTML component to add watermarks to generated invoice PDF files, for example, adding a big red watermark named "TESTING". 

  • You can use any text as a watermark.
  • You can customize the color, text size, rotate of a watermark.
  • You can select to display the watermark conditionally, for example, displaying the watermark only for invoices in Draft status.

To add a watermark to invoice PDF files, perform the following steps:

  1. In the Content tab of the HTML template editor, drag and drop the Columns component into the HTML template.
    A Column block is displayed in the HTML template. It is best practice to add it to the middle of the template.
  2. In the HTML template, click the Row block where you want to add the watermark code.
  3. In the Content tab, drag and drop the HTML component into the HTML template. 
  4. In the HTML template, click the HTML block.
    The Content panel is displayed on the right of the template editor.

  5. In the HTML section, input the following HTML code in the HTML editor.
    Additionally, you can set the container padding to 0, so that the Row block does not take up space.
    <div style="position: fixed; 
                bottom: 500px; 
                left: 200px;
                z-index: 10000;
                font-size:100px; 
                color: red; 
                transform:rotate(-30deg);
                opacity: 0.6;">
      TESTING
    </div>
    
  6. View the template in Edit mode, as shown in the following image.
    You can edit the HTML source to change the text, font size, font color, rotation, and opacity.
  7. Click Preview, and select an account and an invoice in the Preview Settings section to preview the corresponding PDF file. 
    If a PDF file has multiple pages, every page displays the same watermark. The following image shows an invoice PDF file displayed with the TESTING watermark:
  8. If you want to display the watermark only for invoices in Draft status, use the following HTML codes instead:
    {{#Invoice.Status|EqualToVal(Draft)}}
    <div style="position: fixed; 
                bottom: 500px; 
                left: 200px;
                z-index: 10000;
                font-size:100px; 
                color: red; 
                transform:rotate(-30deg);
                opacity: 0.6;">
      DRAFT
    </div>
    {{/Invoice.Status|EqualToVal(Draft)}}