Examples of e-mail notification templates

Applies to version: 2020.1.3.x; author: Konrad Wojtycza

Introduction

WEBCON BPS allows you to send notifications about tasks assigned to users. You can send the standard notifications which are automatically generated based on the instance content and sent after going through the next step, as well as custom notifications, that are tailored to the business needs and prepared based on the local template. In both cases, the content is based on the Global e-mail template – the additional elements and information can be added in the case of custom notifications. This article describes the example of global e-mail templates that can be used in WEBCON BPS processes.

For more information about global and local templates see E-mails and templates in WEBCON BPS.

Global e-mail template

The global e-mail template is used in all standard e-mail notifications in a given environment. In the case of custom notifications, the global template is used by default, unless a dedicated template was used in the process.  

You can configure the global template in System settings -> E-mail notifications -> Global e-mail template. On the “Message content” tab, you can add the HTML code.

Fig. 1. The HTML code of the global form template

To freely edit the template, you should know the HTML markup language and the CSS stylesheet language. Remember, that the mail programs such as Outlook, Gmail, Thunderbird etc. do not support some CSS styles, so an e-mail template tested in a web browser may look completely different when displayed in an e-mail program. A common practice when creating e-mail templates is to use a table for formatting, which allows for high compatibility with most e-mail clients. The templates included in this article contain comments that indicate which elements of the template correspond to each code fragment.

To edit the template, we use the free-source Brackets editor with a license allowing free commercial use.

Examples of templates

All presented templates were attached to the article in HTML format -> you can download them. 

a) Template with a logo on the right (Template 1)

This template is built based on the tables. Deciding which of the table boundaries will be visible allows you to create visible lines on the template. Invisible table boundaries organize the space on the template and keep the images and text in place (Fig. 2).

Fig. 2. Global e-mail template – logo on the right

The “Go to element” tile requires additional configuration. In the “Global constants” tab, add a new constant that stores information about the URL Portal address.

Fig. 3. The new constant

This constant should be used in the fragment of the global template containing the link to the instance.  

The URL structure:

{Portal URL}/db/{database ID}/app/{application ID}/instance/{ID instance}

where:

• Portal URL – the WEBCON BPS URL address -> http://URLaddress/
• Database ID – the WEBCON BPS Portal database ID (usually it will be number 1)
• Application ID – the application ID where the instance will be opened
• Instance ID – the instance ID to which the address directs

After adding the global constant with the URL address, complete the address in the template by using Editor – select Global constant from the Values tab, and application ID from the Objects tab.

Fig. 4. The editor

b) Template with a logo on the left (Template 2)

Fig. 5. Global e-mail template – logo on the left

c) Form template with changed colors (Template 3)

Changing the template color requires editing most of the styles included in the template code. The colors of the fonts, template background, line separating the message header from its content, as well as the colors of the tiles, have been set. When changing the color of the template, it is necessary to consider the issue of the mutual contrast of the selected colors so that the presented text is legible (Fig. 6).

Fig. 6. The form template with changed colors

Summary

Editing the global template allows you to adjust the appearance of notifications sent as part of WEBCON BPS to the corporate visual identification rules. To edit global templates, you must have at least basic knowledge of the HTML markup language and the CSS stylesheet language. When editing, you should take into account the limitations resulting from the lack of support for some CSS styles by email programs.

Presented templates  -> click here