Accounting and Reports

Articles in this section

See more

Creating a Clickable Button using the PayOnlineLink tag in an Invoice Email Communication Template

  • Updated
Follow

Best Suited for:

  • Back Office administrators
  • Back Office users participating in financial management activities

Important Information:

  • The color of the button can be customized within the source code of the "Email Communication Template"
  • Some email providers do not allow the button to appear within the email body
    • Add this wording and the link to your Invoice Templates: If you do not see the above button, please click here to view and pay your invoice online.

Adding the Link to Pay Invoices Online.

Process Description:

  1. Navigate to My Office > Company Preferences
  2. Toggle the setting: "Allow customers to pay their own invoices online (if payment gateway is enabled)" to Yes
  3. Save Changes within "Company Preferences"
  4. Navigate to My Office > Communication Templates
  5. Click the drop-down arrow beside "Invoice"
  6. Select the Invoice Template(s) you want to add the button to
  7. Click the source code icon
  8. Copy the source code from this article
  9. Paste the source code into the "HTML source code" preview window
  10. Press Ok within the "HTML source code" preview window to save the changes
  11. Preview the template and verify that the link works.
  12. Save Template to save the changes

Step-by-Step Instruction:

Navigate to My Office > Company Preferences and toggle the setting "Allow customers to pay their own invoices online (if payment gateway is enabled)" to Yes and Save Changes.

Navigate to My Office > Communication Templates and click the drop-down arrow beside "Invoice".


Once on the specific Email Communication Template, click the source code icon:mceclip0.png

Copy the below source code:

<!--[if mso]>
 <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{Invoice:ViewOnlineURL}" style="height:36px;v-text-anchor:middle;width:250px;" arcsize="5%" strokecolor="#ff2b33" fillcolor="#ff2b33">
 <w:anchorlock></w:anchorlock>
 <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">View & Pay Invoice Online →</center>
 </v:roundrect>
 <![endif]-->
 <a href="{Invoice:ViewOnlineURL}" style="background-color:#ff2b33;border:1px solid #ff2b33;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;mso-hide:all;">View &amp; Pay Invoice Online →</a>


Paste the source code into the "HTML source code" preview window and place the button in the desired location within the email and press Ok to save the changes.

The "View & Pay Invoice Online" button will look like this in the email:

Updating the colors of the "View & Pay Invoice Online" button

Do not make any other changes within the source code, when updating the colors as it may have un-intended results.

You can change the colors of the button (the default is a red background with white font). In order to change the background and font colors, you will need to know the hex code of the color you prefer (or utilize the hex code for your specific company's preferred color) and replace the hex code within the source code outlined below:

Please click the above image to enlarge

 

Related articles