---
title: "Adding \"Pay Online\" Buttons to Autotask Invoices & Emails"
description: This article explains how to setup a payment link in the Autotask PDF invoice. Before you begin please ensure that Cloud Depot RPS is setup.
---

[Skip to content](https://kb.clouddepot.com/knowledge/creating-a-payment-link-in-the-autotask-invoice#main-content)

English

Show submenu for translations

![CoudDepot\_LOGO\_RGB.png\]](https://kb.clouddepot.com/hs-fs/hubfs/CoudDepot_LOGO_RGB.png?height=40&name=CoudDepot_LOGO_RGB.png)

- [Read Our Blog](https://blog.clouddepot.com/)

Open main navigation

Close main navigation

- [Read Our Blog](https://blog.clouddepot.com/)
- English
  
  Show submenu for translations
- [Go to clouddepot.com](https://www.clouddepot.com/)

[Go to clouddepot.com](https://www.clouddepot.com/)

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Cloud Depot Knowledge Base](https://kb.clouddepot.com/knowledge?hsLang=en)
2. [Product - Recurring Payment Service (RPS)](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en)
3. [Customer Portal](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en#customer-portal)

# Adding "Pay Online" Buttons to Autotask Invoices & Emails

## With Cloud Depot RPS, you can embed dynamic payment links directly into your Autotask PDF invoices and email templates. This allows your customers to click a button and pay their invoices instantly online.

### Prerequisites

**Before you begin, ensure that:**

1. Cloud Depot RPS (Recurring Payment Service) is fully configured.
2. You have access to administrative settings in Autotask PSA.

### Step 1: Setup PDF Autotask Template

Autotask's template editor can be difficult to navigate. Using a temporary "placeholder text" makes finding the exact insertion point in the raw HTML much easier.

1\. Log into Autotask and navigate to **Admin \> Features & Settings \> Finance, E-Commerce, & Billing \> Invoice Templates**.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-09-00-3812-PM.png?width=594&height=140&name=image-png-May-26-2026-10-09-00-3812-PM.png)

2\. Open the invoice template you wish to update.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-09-37-9609-PM.png?width=398&height=144&name=image-png-May-26-2026-10-09-37-9609-PM.png)

 3. Go to the **Bottom of Invoice** (or your preferred section) and click **Edit**.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-10-32-6181-PM.png?width=581&height=212&name=image-png-May-26-2026-10-10-32-6181-PM.png)

4\. In the standard visual editor, click where you want the button to appear (e.g., right below the "Invoice Notes").

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-11-09-0536-PM.png?width=518&height=265&name=image-png-May-26-2026-10-11-09-0536-PM.png)

5\. Type a unique placeholder sequence like `!!!!!!!` (seven exclamation marks). This will act as a beacon in the code block.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-11-39-6951-PM.png?width=365&height=189&name=image-png-May-26-2026-10-11-39-6951-PM.png)

### Step 3: Insert the Code into the HTML Editor

1\. Log back into Cloud Depot and navigate to **Recurring Payments \> Configuration \>Customer Portal \> Autotask Payment Details (Tab)**

2\. Chose between Option 1 (Payment URL link) or Option 2 (Payment Button). In this example we have opted to use the Payment button. Copy the entire contents of the option you have selected.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-11-03-07-0488-PM.png?width=573&height=158&name=image-png-May-26-2026-11-03-07-0488-PM.png)

 

3\. Switch your Autotask editor from the "Design" view to the **HTML** view (look for the raw source code button).

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-13-10-5140-PM.png?width=462&height=287&name=image-png-May-26-2026-10-13-10-5140-PM.png)

4\. Use `Ctrl + F` (or `Cmd + F` on Mac) to search for your placeholder sequence: `!!!!!!!`.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-13-48-1011-PM.png?width=259&height=109&name=image-png-May-26-2026-10-13-48-1011-PM.png)

5\. Highlight the exclamation marks, and **paste** the HTML code you copied from Cloud Depot directly over them.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-14-44-5201-PM.png?width=509&height=193&name=image-png-May-26-2026-10-14-44-5201-PM.png)

6\. Switch back to the **Design** window to verify the visual layout.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-15-21-1497-PM.png?width=514&height=223&name=image-png-May-26-2026-10-15-21-1497-PM.png)

1. - *Tip: If you are comfortable with HTML/CSS, you can tweak the margins or padding settings around the code snippet to perfectly match your brand design.*
    7.  Click **Save** to apply the changes to your template.

### Step 2: Setup Email Template

**⚠️** Caution: Ensure you select Autotask Email Templates Option - Not PDF Invoices.

1\. Log back into Cloud Depot and navigate to **Recurring Payments \> Configuration \>Customer Portal \> Autotask Payment Details (Tab)**

2\. Scroll to the bottom of the page and find the drop down option 'Autotask Email Templates' from here select the format that your Autotask CRM uses to describe Companies (Accounts, Company or Organization)

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-11-09-08-1832-PM.png?width=579&height=116&name=image-png-May-26-2026-11-09-08-1832-PM.png)

3\. Chose between Option 1 (Payment URL link) or Option 2 (Payment Button). In this example we have opted to use the Payment button. Copy the entire contents of the option you have selected.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-11-09-51-1164-PM.png?width=473&height=121&name=image-png-May-26-2026-11-09-51-1164-PM.png)

4\. Log into Autotask and navigate to **Admin \> Features & Settings \> Finance, E-Commerce, & Billing \> Invoice Email Messages**

2\. Select your Email Template and click Edit

**![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-21-08-9965-PM.png?width=272&height=106&name=image-png-May-26-2026-10-21-08-9965-PM.png)**

 

**![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-51-39-8130-PM.png?width=341&height=182&name=image-png-May-26-2026-10-51-39-8130-PM.png)**

3\. Type a unique placeholder sequence like `!!!!!!!` (seven exclamation marks). This will act as a beacon in the code block.

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-55-27-2381-PM.png?width=330&height=124&name=image-png-May-26-2026-10-55-27-2381-PM.png)

4.  Switch your Autotask editor from the "Design" view to the **HTML** view (look for the raw source code button).

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-10-56-36-4302-PM.png?width=292&height=245&name=image-png-May-26-2026-10-56-36-4302-PM.png)

 

5.  Highlight the exclamation marks, and **paste** the HTML code you copied from Cloud Depot directly over them.![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-11-10-47-1626-PM.png?width=535&height=195&name=image-png-May-26-2026-11-10-47-1626-PM.png)

6.  Switch back to 'Design' mode and view the outcome, when you are happy click 'Save & Close'

![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-26-2026-11-11-46-0469-PM.png?width=428&height=243&name=image-png-May-26-2026-11-11-46-0469-PM.png)

 

### Free Branded Invoice Templates

If you don't feel comfortable editing raw HTML, our support team can provide a pre-built, beautifully formatted invoice layout template customized for Cloud Depot. These templates are provided "as-is" at no extra cost.

| ![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-Apr-22-2026-01-56-27-1122-AM.png?width=328&height=412&name=image-png-Apr-22-2026-01-56-27-1122-AM.png) | ![](https://kb.clouddepot.com/hs-fs/hubfs/image-png-May-09-2025-03-32-18-5787-AM.png?width=670&height=555&name=image-png-May-09-2025-03-32-18-5787-AM.png) |
| --- | --- |

 

 

- [Product - Autotask to Xero](https://kb.clouddepot.com/knowledge/product-autotask-to-xero?hsLang=en#main-content)

    - [Getting Started](https://kb.clouddepot.com/knowledge/product-autotask-to-xero?hsLang=en#getting-started)
    - [Setup](https://kb.clouddepot.com/knowledge/product-autotask-to-xero?hsLang=en#setup)
    - [Troubleshooting](https://kb.clouddepot.com/knowledge/product-autotask-to-xero?hsLang=en#troubleshooting)
- [Product - Recurring Payment Service (RPS)](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en#main-content)

    - [Getting Started](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en#getting-started)
    - [Customers & Invoices](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en#customers-invoices)
    - [Payment Rules & Auto Pay](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en#payment-rules-auto-pay)
    - [Customer Portal](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en#customer-portal)
    - [Surcharges](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en#surcharges)
    - [Payment Gateways](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en#payment-gateways)
    - [Troubleshooting](https://kb.clouddepot.com/knowledge/product-recurring-payment-service-rps?hsLang=en#troubleshooting)
- [Product - HostedPay](https://kb.clouddepot.com/knowledge/product-hostedpay?hsLang=en)
- [Integrations](https://kb.clouddepot.com/knowledge/integrations?hsLang=en#main-content)

    - [Xero](https://kb.clouddepot.com/knowledge/integrations?hsLang=en#xero)
    - [Autotask](https://kb.clouddepot.com/knowledge/integrations?hsLang=en#autotask)
    - [HaloPSA](https://kb.clouddepot.com/knowledge/integrations?hsLang=en#halopsa)
- [Support, security & updates](https://kb.clouddepot.com/knowledge/support-security-updates?hsLang=en)
- [Billing and Accounting](https://kb.clouddepot.com/knowledge/billing-and-accounting?hsLang=en)
- [Setting up Cloud Depot](https://kb.clouddepot.com/knowledge/setting-up-cloud-depot?hsLang=en)
- [Cloud Depot Status and Contacting Support](https://kb.clouddepot.com/knowledge/cloud-depot-status-and-contacting-support?hsLang=en#main-content)

    - [View Service Status](https://kb.clouddepot.com/knowledge/cloud-depot-status-and-contacting-support?hsLang=en#view-service-status)
    - [Support](https://kb.clouddepot.com/knowledge/cloud-depot-status-and-contacting-support?hsLang=en#support)
- [Sync Customization Documentation](https://kb.clouddepot.com/knowledge/sync-customization-documentation?hsLang=en)

- [Read Our Blog](https://blog.clouddepot.com/)

# Cloud Depot

Cloud Depot Help Center

Copyright © 2026, Cloud Depot