Skip to main content

Configure images in HTML invoice templates

Zuora

Configure images in HTML invoice templates

The HTML Templates feature is in the Early Adopter phase for invoices. We are actively soliciting feedback from a small set of early adopters before releasing it as generally available. If you want to join this early adopter program, submit a request at Zuora Global Support.

After an HTML invoice template is created, you can configure images in the HTML template in the following approaches:

  • Directly using images from the Internet.

  • Uploading local images and adding them to the template.

Add images from the Internet to HTML invoice template

To directly use images from the Internet in an HTML invoice template through the Zuora UI, perform the following steps:

  1. In the HTML template, click the Row block that you want to add an image to.

  2. In the Content tab, drag and drop the Image component into the HTML template.

  3. In the HTML template, click the Image block.
    The Content panel is displayed on the right of the template editor

  4. In the Images section, configure the following information:

    • In the Image URL field, enter the URL of an image from the Internet. Note that the image URL must be publicly available.

    • Optional: Configure the width, alignment, and alternative text for the image.

  5. In the Action section, configure the image opening mode.

    • In the URL field, enter the URL to display in the address bar for the image.

    • From the Target list, select Same Tab or New Tab to determine whether the image is displayed in the existing tab or in a new tab after being clicked.

  6. In the General section, configure the container padding for the image.

  7. In the HTML template editor, click Save to save the HTML invoice template.

You can also use merge fields to construct a dynamic image URL and enter it in the Image URL field. For example, www.yourcompany.com/images/invoices/{{Invoice.InvoiceNumber}}.png. If the invoice number is INV0009, it will construct a URL www.yourcompany.com/images/invoices/INV0009.png, and load the image file during the generation of the corresponding invoice PDF file.

Upload local images to HTML invoice templates

To upload local images to an HTML invoice template through the Zuora UI, perform the following steps:

  1. In the HTML template, click the Row block that you want to add an image to.

  2. In the Content tab, drag and drop the Image component into the HTML template.

  3. Click the Image block in the HTML template.
    The Content panel is displayed on the right of the template editor.

  4. In the Images section, configure the following information:

    1. Click Upload Image, navigate to the location of a local image, and click Open.
      The selected image is displayed in the Image block.
      You can also click Select image to choose uploaded images. In the Select Image dialog that displays all the images already uploaded into the HTML template editor, select an image and click Use to add the image to the HTML template. An uploaded image can be used across multiple HTML templates in the same tenant.

    2. Optional: Configure the width, alignment, and alternative text for the image.

  5. You can also select uploaded images by clicking Select image. It lists all uploaded images. You can pick an image and click the Use button to use the image in the HTML template. Note: an image can be used across multiple HTML templates.

  6. In the Action section, configure the image opening mode.

    1. In the URL field, enter the URL to display in the address bar for the image.

    2. From the Target list, select Same Tab or New Tab to determine whether the image is displayed in the same tab as the template or in a new tab after being clicked.

  7. In the General section, configure the container padding for the image.

  8. In the HTML template editor, click Save to save the HTML invoice template.

Delete uploaded images from HTML invoice templates

If an image is no longer used, you can delete it from uploaded images. The deletion of an uploaded image does not impact the templates that are using the image. The reason is that the image is embedded as part of the HTML template.

To delete an upload local image from the HTML invoice template editor through the Zuora UI, perform the following steps:

  1. In the HTML template, click an existing Image block.
    The Content panel is displayed on the right of the template editor.

  2. In the Images section, click Select image

  3. In the Select Image dialog that displays all the images uploaded into the HTML template editor, select an image and click Delete to delete the image. 

  4. In the HTML template editor, click Save to save the HTML invoice template.