Articles in this section

Creating the Email Signature using HTML and Adding Merge Fields

Jann DiPaolo
  • Updated
Follow

You can include images and formatted text to an Email Template or Signature. This is commonly used for  an Email Signature. You may find limitations including images and formatted text directly to the Template or Signature in the Editor. In order that the images and formatting are always how you want them presented, it is recommended that you have your Email Signature created outside of FYI as HTML. You can use a third-party consultant or skills internally to create the HTML file.

  • Any images that are included must be hosted on your web server so that images can be accessed.
  • Once you have the HTML file, this is copied into the FYI Email Signature.
  • You can then include the FYI Merge Fields.
  • You can view the HTML code in the FYI Email Signature and copy it. This is useful if you need to make any other adjustments outside of FYI, such as to colours, and then copy the updated HTML back to the FYI Email Signature.

Important Note: If you are using combinations of Merge Fields and formatting, we recommend you add the Merge Fields first and check these are bringing the correct information. Then edit the Template or Signature and add any formatting.

This article contains the following sections:

Example of an Email created in FYI with an Email Signature

The following is an example of an Email that has been created in FYI with an Email Signature that just has Merge Fields for the user's name, and phone number.

1283_Email_no_HTML.gif

The following example shows how to include an HTML file with images and text as the Email Signature and make adjustments to it. The following example shows how to include Merge Fields for the author's name, role, mobile and email.

  1. Create Email Signature refer to Creating Email Templates and Signatures.
    Enter the name, if relevant, set the State to "Active", enter the Filing and checkmark Signature.
    Instead of entering text in the Email Editor, you copy the HTML.

  2. Open the HTML file in a browser.

    1284_Sign_Off_in_HTML_app.gif

  3. In the browser, select all the text and images and copy it (you can use Ctrl+a to select all and then Ctrl+c to copy).

  4. In FYI, in the Email Editor for the Signature, position the cursor where you want the Signature to appear and Paste the HTML. It displays in exactly the same way as via the browser.

    1278_Email_Signature_HTML.gif

  5. To add Merge Fields, select the text that has been copied in from the HTML then select Merge Field. In the following example, this is adding the FYI Merge Field Author Name.

    1279_Email_Signature_HTML_Add_Merge_Field.gif

  6. The following example shows the Merge Fields added for Author Name, Author Role, Author Mobile and Author Email.

    1280_Email_Signature_HTML_Added_Merge_Field.gif

  7. If needed, use the tools to reapply any formatting to the Merge Fields. You can use the formatting tools so set formatting such as bold, fonts, colour. Use the tools to apply any font setting to the text above the signature. This will set the font used for any text in the email. Refer to Formatting and Fonts using the Editor in FYI.

Example of an Email with the Email Signature created with HTML

The following is an example of an email that has been created in FYI for the Email Signature set up with HTML in the example above. In this example, no template has been selected, so only the information brought in from the Email Signature is added to the email.

1285_Sign_Off_from_HTML.gif

Displaying the HTML Code

If you need to, you can display the HTML code from the Email Signature.

  1. Click the More Misc tool
  2. Click Code View.
    2008_Email_Editor_Code_View.gif
    The HTML code displays. If required, change the Email Signature to Full Screen by clicking Full Screen.
    526b_Email_Signature_HTML.gif

    From the Code View, you can copy the HTML code (which includes the correct codes for any Merge Fields that have been added). This will allow anyone with experience with HTML to make any other changes to the HTML and then copy this back into the Email Signature.

In the code, any Merge Fields are included using special characters for the curly brackets, as in AuthorName in this example.

<p>{{ AuthorName }}</p>

Note: When adding or deleting anything in the HTML Code View, always close this to re-display the main Editor pane before closing the Template or Signature. This ensures that any changes made directly to the HTML are saved.

Updating an Email Signature with a New Logo or Image

To update an Email Signature with a new logo or image.

  1. Copy the logo or image from the previous Email Signature or from a Word document using Ctrl+c.
  2. Go to the online Word to HTML converter https://wordtohtml.net/
  3. Paste the image in the Visual Editor pane using Ctrl+v (for information on the Visual Editor refer also to Formatting and Fonts in Email Templates and Signatures).
  4. Adjust the image as required.
  5. Copy the updated image using Ctrl+c.
  6. In FYI, open the Email Signature that you want to update.
  7. In the Editor Pane, paste the copied image using Ctrl+v.

    Note: This will only work if you use Ctrl+c and Ctrl+v when copying and pasting.
    Right-click on the image and then selecting Copy or Paste will not work.

Related articles