Add Approve/Reject "Buttons" to Email Templates

Overview

Using HTML, you can add actionable “buttons” to an email template. This can provide a quick and easy way for users to perform specific actions upon a record. The font and background colors can be customized as required.

ButtonsEmailTemplate
Square approve and reject buttons.

emailtemplate2
Single rounded button

Steps

Open the desired email template

  1. Open the email template that you wish to add the button to.

  2. On the left-hand side of the Content section, click the arrow next to HTML to open the drop down list and select Source HTML.
    HTMLselect

  3. In a new line, insert the HTML that corresponds to the button type you want. This HTML is listed below.

  4. In the HTML, replace INSERT ENCRYPTED HOTLINK HERE with a hotlink you have configured to complete your desired action. Note: you should always encrypt your hotlink using the Encrypt Hotlink feature (Setup>Access>Automatic Login Hotlinks). For more information, refer to the Hyperlink section of the wiki.

Source HTML

Use the HTML that corresponds to the desired button type. Note that, from a technical standpoint, these are not true buttons. Instead, they are tables that contain hotlinks that are configured to look like buttons.

Square Approve and Reject buttons

<!--Approve button starts --> 

<table style="" cellpadding="0" cellspacing="0"> 

<tbody><tr><td style="font-size:16px;font-family:LucidaGrande,tahoma,verdana,arial,sans-serif;padding-left:25px;"> 

<table style="border-collapse:collapse;" cellpadding="0" cellspacing="0" height="30" width="100"> 

<tbody><tr><td style="border-width: 1px;border-style: solid;border-color: #009933;background-color: #009933;"> 

<table style="border-collapse:collapse;" cellpadding="0" cellspacing="0" height="30" width="100"> 

<tbody><tr><td style="text-align:center; vertical-align:middle; line-height:30px; font-size:16px; font-family:LucidaGrande,tahoma,verdana,arial,sans-serif; padding:2px 6px 4px; border-top:1px solid #AEC7DD; border-left:1px solid #AEC7DD; border-right:1px solid #000000; border-bottom:1px solid #000000; text-decoration: none" valign="middle"> 

<a href="INSERT ENCRYPTED HOTLINK HERE"> 

<span style="text-decoration:none;font-weight:bold;white-space:nowrap;color:#fff;font-size:16px;">Approve</span></a></td></tr> 

</tbody></table> 

</td></tr></tbody></table> 

<!--Approve button ends--> 

</td><td style="font-size:16px;font-family:LucidaGrande,tahoma,verdana,arial,sans-serif;padding-left:10px;"> 

<!--Reject button starts --> 

<table style="border-collapse:collapse" cellpadding="0" cellspacing="0" height="30" width="100"> 

<tbody><tr><td style="border-width: 1px;border-style: solid;border-color: #CD0000;background-color: #CD0000;"> 

<table style="border-collapse:collapse" cellpadding="0" cellspacing="0" height="30" width="100"> 

<tbody><tr><td style="text-align: center; vertical-align:middle; line-height:30px; font-size:16px; font-family:LucidaGrande,tahoma,verdana,arial,sans-serif; padding:2px 6px 4px; border-top:1px solid #AEC7DD; border-left:1px solid #AEC7DD; border-right:1px solid #000000; border-bottom:1px solid #000000; text-decoration:none" valign="middle"> 

<a href="INSERT ENCRYPTED HOTLINK HERE"> 

<span style="text-decoration:none;font-weight:bold;white-space:nowrap;color:#fff;font-size:16px;">Reject</span></a></td></tr> 

</tbody></table> 

</td></tr></tbody></table> 

<!--Reject button ends--> 

</td></tr></tbody></table> 

<br> 

Single rounded button

<table border="0" cellpadding="10" cellspacing="0" width="150"> 

        <tr> 

            <td align="center" style="background: #2fbf6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border-bottom: 2px solid #03883e !important;" valign="top"> 

                <a href="INSERT ENCRYPTED HOTLINK HERE" style="color: #FFFFFF; display: block; font-size: 16px; font-weight: bold; text-align: center; text-decoration: none; text-transform: uppercase; font-family:Arial, Helvetica, sans-serif;">Email Button</a> 

            </td> 

        </tr> 

    </table>