See all tutorials

Tutorials » How to write a simple email template

Web applications that send emails to their customers will need a way to generate dynamic content for email subject, email body or email attachments. Webpagebytes CMS is a great framework to generate dynamic content and so it can be used to create content to be sent via emails. All the features of Webpagebytes CMS can be used in the generated content for emails: real time editing of the content, images management, Freemarker scripting, page modules, localization and so on.

In order to generate a simple dynamic email body take the following tasks

Create a site page with the body template

Step 1

Writing an email template in Webpagebytes CMS it's simple as writing a web page, with the mention that there will be no site url to link to the email template site page. The email template is an internal resource that the web application will not want to expose via a site url.

In Webpagebytes CMS administration interface navigate to 'Site pages' section and create a new site page with the below HTML content.

Show html code 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .header { padding: 30px 0px 5px; background-color: #FAFAFA; }
        .header .title { font-size: 1.4em;}
        .header .detail { color: #A7C942;}
        .footer { margin: 30px 0px; border-top: 1px solid #A7C942;}
        .footer a { color: #777777; font-size: 0.8em; text-decoration:none;}
        p { padding: 0px; margin: 10px 0px;}
    </style>
</head>
<body>
    <div class="header"> <span class="title">Webpagebytes CMS </span> <span class="detail"> Sample dynamic email template </span> </div>
    <#assign basePath=wpbRequest["WPB_GLOBAL_BASE_URL"] userName=wpbAppModel["userName"] confirmEmailRandom=wpbAppModel["confirmLink"] />
    <p> Hi ${userName} </p>
    <p> Your account was created with success. </p>
    <#assign confirmLink=(basePath+"/confirmEmail?code=" + confirmEmailRandom) >
    <p> Please confirm your email by clicking the following link <a href="${confirmLink?url}" target="_blank" > ${confirmLink?html} </a> </p>
    <p> Best regards, <br>
           COMPANY NAME
    </p>
    <div class="footer"> <a href=""> Privacy policy </a> </div>
</body>
</html>

The code in bold represent the Freemarker script that will generate the dynamic data in the content. The dynamic data values are taken from the application model via wpbAppModel key.

Add dynamic data to the application model

Step 2

The email will have to be sent from a server backend plugin (controller), which will have to populate the model with the dynamic data. The following code fragment can be an example for the current email template.

Show java code 
...
public void handleRequest(HttpServletRequest request,
                          HttpServletResponse response, 
                          WPBModel model, 
                          WPBForward forward) throws WPBException 
{
    ...
    String userName = getUserName(); 
    model.getCmsApplicationModel().put("userName", userName);
    model.getCmsApplicationModel().put("confirmLink", UUID.randomUUID().toString());
    ...
}
...

Fetch the body content and send it via email

Step 3

At this step the server controller will fetch the email subject content and will sent it via an email server. Webpagebytes CMS does not include an email server and so the web application will have to use an external email server (either hosted in house or hosted on a 3rd party provider).
The following code fragment is an example of the email body fetch operation.

Show java code 
...
@Override
public void handleRequest(HttpServletRequest request,
                          HttpServletResponse response, 
                          WPBModel model, 
                          WPBForward forward) throws WPBException 
{
...    
    String emailBodyGuid = model.getCmsModel().get(WPBModel.URI_PARAMETERS_KEY).get("emailBodyGuid");
    ByteArrayOutputStream bos = new ByteArrayOutputStream(1000);
    contentProvider.writePageContent(emailBodyGuid, model, bos);
    String emailBody = bos.toString();
    ... // use the emailBody in the email server API        
}
...

The email body template site page is taken from a customization parameter named 'emailBodyGuid'.

The users will see the following email
Email template with Webpagebytes CMS

Fork me on GitHub