Designing a HTML Template

Using the HTML Wizard

The HTML Wizard is a built in function within PPS to allow you to construct basic HTML formatted emails. It can be accessed by opening a new or existing activity template through Tools >> Activity Templates. On the Email tab there is a button labelled ‘HTML Wizard’ that will launch the HTML Wizard.

At the bottom of the HTML Wizard window, there is a button labelled ‘Autopreview’, highlighted in orange below. If you ensure that this is selected, then you will be able to see the changes you make as you make them.

The HTML Wizard gives you three customisable sections; the header, the body and the footer. There is also the option to include a border around the email, which defaults to a black with a width of 700. We recommend leaving the width between 500 and 750. To change the colour, click on the black rectangle to the right of the ‘Border Colour’ and this will give you the option to select a new colour, or to remove it completely by selecting ‘cancel’.

Editing the Email Header

The header section of the HTML Wizard allows you to select an image to display at the very top of the email. You will need to make sure that the image is the correct size before inserting it into the template. Once you have the image you require, you can select it by clicking on the button to the right of the Header Graphics File box, as highlighted here

This will open the ‘select image’ box, in which you will be able to see a list of all images currently held in the Graphics folder in your PPS database. If nothing has ever been saved to this folder, then the list will appear to be empty

If the image you need is in the list, then you can click on the ‘select’ button. If not, choose ‘select an image from another location’ and this will show the ‘open picture’ box. Within here, you can locate the image you wish to appear at the top of the HTML email, and once found click on ‘select’.  Once an image has been selected, you have the option to either right, left or centre justify the image using the options to the right of the header graphics file, and will be able to see how it looks in the preview window.

Note for Hosted users: As you are connecting via our server, you will need to make certain that you select one of your local drives. The ‘desktop’ and ‘documents’ listed on the look in dropdown will not be the ones on your machine. To locate your own desktop, you will need to select your C drive from the list, and then select ‘users’, find your profile, and this will then show your desktop folder.
Editing the Message Body

The message body is where your main email text will go. Type the text that you wish to be displayed here.  Please be aware that text cannot be copied from programs that use "rich text" formatting as this will conflict with the HTML formatting required.

This example shows a mixture of text and merge fields. A merge field will always be bracketed by two sets of chevrons. In this, the <<CLIENTNAME> > merge field will pull through the name of the client that the email is going to, and the <<CURRENTUSER> > merge field will show the name of the person who is sending it, based on which user account they are logged into PPS with. These are just two example of the many available merge fields that can be used in a similar way.

To add in a merge field, you will need to click on the ‘merge field’ button at the top of the message body box. This will give you a dropdown menu which has a top section of actual merge fields, and a bottom section which contains sub-menus. Clicking on these will give you more merge fields that you can use, as shown here with ‘appointments…’ selected;

When you click on one of the merge fields, the dropdown box will vanish, and the merge field you have selected will be added to your clipboard on your computer. Clicking into the message body box and pressing ‘ctrl’ and ‘V’ will paste the merge field into the message body.

You also have a certain amount of formatting available for the text, which can be controlled from the formatting box just above the message body;

The options are as follows;

F – this allows you to set the font that will be used in the HTML email. By highlighting a section of text and clicking this button, you can set the font, the style and the size for that selection.

B, U and I – these set the highlighted section of text to bold, underlined or italics respectively.

A – this allows you to change the font colour.

You can also right, left and centre justify your highlighted text using the justification buttons. A combination of all of these can be used throughout the template.

Creating the Email footer

The top section of the footer works in the same way as the header; you can select the image that you require, if any, and this will appear at the very bottom of your HTML email. This can again be positioned to the left, right or middle.

Alternatively, if you have a snippet of HTML code that you wish to include here, you can select the ‘HTML code snippet’ option for the footer style and select the file containing the code in place of the image;

The footer also gives you the option to include further text below the footer image in the ‘message footer’ box, which can be formatted using the same options available in the main message body section, as explained above. If you are using a border and do not have it set to ‘none’, then this will display the footer text at the very bottom of the email with a line above it. Setting the border colour to ‘none’, as discussed earlier in the guide, will remove this line.

Once you have completed the email and are happy with the layout, you can then click on ‘close’. The Wizard will automatically save the changes that you have made as you have made them, and you will see that there is now an HTML document listed in the HTML style email section of the activity template;

You can now save this and it will be ready to send out. It is advised to test this by sending a test email to yourself using the template prior to sending it to clients, to ensure that you are happy that it is all working correctly.


Related Articles
PPS Reports
Viewed 1800 times since Tue, Apr 5, 2011