Skip to main content

Configure text and merge fields in HTML templates

Zuora

Configure text and merge fields in HTML 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.

After an HTML template is created, you can configure texts and merge fields through the Zuora UI. 

This tutorial takes invoices as an example; the configuration procedure is similar for credit memos and debit memos.

Add text to HTML templates

To add text into an HTML template through the Zuora UI, perform the following steps:

  1. In the HTML template, click one Row block, and then click Add Content in the block.
    The Content tab is displayed in the right panel.

  2. In the Content tab, drag the Text component into the HTML template.
    A Text block is displayed in the HTML template.

  3. In the Text block, enter the text that you want to display in the billing document.
    For example, if you want to add a merge field to display the invoice number, enter Invoice Number: in the Text block before adding the merge field.

  4. Click the Text block in the HTML template.
    The Content panel is displayed on the right of the template editor, and the displayed toolbar is displayed next to the Text block. 

  5. In the displayed toolbar, select the font, font size, and other styles to apply to the Text block. 
  6. In the Content panel, configure the text color, text alignment, line height, link style, and container padding to apply to the Text block.
  7. Click Save to save the configurations.

Configure merge fields in HTML templates

You can configure merge fields in HTML templates in any of the following approaches:

  • Using the Merge Field component
  • Typing merge field codes

Configure merge fields by using the Merge Field component

In the HTML template editor, you can configure merge fields by using the predefined Merge Field component. The merge fields configured by using the Merge Field component are displayed in a compact manner in the template.

To configure merge fields in an HTML template by using the Merge Field component through the Zuora UI, perform the following steps:

  1. In the HTML template, click one Row block where you want to add a merge field, and then click Add Content in the block.
    The Content tab is displayed in the right panel.

  2. In the Content tab, drag the Merge Field component into the HTML template.
    A Merge Field block is displayed in the HTML template.

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

  4. In the Merge Field section of the Content panel, configure merge fields.

    1. Configure a simple merge field of the base Invoice object.

      1. From the Merge Field list, select a field of the Invoice object. 
        A corresponding merge field is displayed in the Merge Field block of the HTML invoice template. For example, if you want to add a merge field to display the invoice balance, select Balance from the Merge Field list. Then, the merge field is displayed as {{Invoice.Balance}} in the Merge Field block. 

      2. In the Function field, enter the functions that you want to decorate the merge field with.
        For example, if you want to localize the merge field based on the local profile, enter Localise. Then, the merge field is displayed as {{Invoice.Balance}}|Localise}} in the Merge Field block.

      3. Optional: Configure the font family, font size, formatting, text color, background color, and content alignment for the merge field.

    2. Configure a merge field of a child or grandchild object of the base Invoice object. 
      For example, if you want to add a merge field to display the Bill To Contact's first name of the account that invoices are issued for, perform the following steps:

      1. From the Merge Field list, select Account: Account.

      2. From the displayed drop-down list, select BillTo: Contact.

      3. From the displayed drop-down list, select FirstName.
        The merge field is displayed as {{Invoice.Account.BillTo.FirstName}} in the Merge Field block.
        HTML_invoice_template_multilayer_merge_field.png

      4. Optional: Configure the font family, font size, formatting, text color, background color, and content alignment for the merge field.

    3. If you want to define complex merge fields, set Advanced Options to on, and then type the code for customized merge fields in the text box.
      For example, if you want to add merge fields to display the Bill To Contact's first name and last name of the account that invoices are issued for, type {{Invoice.Account.BillTo.FirstName}} {{Invoice.Account.BillTo.LastName}} in the text box. Then, the merge fields configured by using the Merge Field component are displayed in a compact manner in the Merge Field block of the template.HTML_invoice_template_Advanced_Options_merge_fields.png

    4. Optional: Configure the font family, font size, formatting, text color, background color, and content alignment for the merge field.

  5. In the General section, configure container paddings for the merge field.

  6. Click Save to save the configurations.

Configure merge fields by typing merge field codes 

To configure a merge field in an HTML template by typing merge field codes through the Zuora UI, perform the following steps:

  1. In the HTML  template, click one Row block, and then click Add Content in the block.
    The Content tab is displayed in the right panel.

  2. In the Content tab, drag the Text component into the HTML template.
    A Text block is displayed in the HTML template.

  3. Click the Text block in the HTML template.
    The Content panel is displayed on the right of the template editor, and a toolbar is displayed next to the Text block. 

  4. In the Text block, enter double curly braces, an object name, and a dot. For example, if you want to add a merge field to display the invoice balance, enter {{Invoice. in the Text block.

  5. In the displayed toolbar, click Merge Fields to expand the objects and fields tree. 

  6. Scroll down to Invoice and its nested fields, and select one nested field from the list.
    The field name is appended to the merge field. For example, if you click Invoice > Balance, and it shows {{Invoice.Balance in the Text block.

  7. Input }} to enclose the merge field.
    The merge field is displayed as {{Invoice.Balance}} in the Text block.

  8. If you want to customize the style of the merge field, click the merge field in the Text block, and use the displayed toolbar to configure its styles, including the text color, font, size, and so on.

  9. Click Save to save the configurations.

For more information about merge field syntax, see Merge field syntax for HTML templates.