--- title: "Double the Donation Integration" slug: "double-the-donation-integration" updated: 2026-04-28T17:10:52Z published: 2026-04-28T17:10:52Z canonical: "knowledge.technolutions.net/double-the-donation-integration" --- > ## Documentation Index > Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt > Use this file to discover all available pages before exploring further. # Double the Donation Integration **Double the Donation** adds a search to your donation form that determines if a donor’s employer provides matching gifts. This solution then provides qualifying donors with actionable matching gift next steps, making it easy for donors to immediately double their donation. The search details, including any applicable gift information, are sent to Double the Donation for further management of any expected matching gifts. > [!NOTE] > 🔑You’ll need a Double the Donation account to activate this integration. > > Not a Double the Donation client? Schedule a demo at [https://doublethedonation.com/get-a-demo/](https://doublethedonation.com/get-a-demo/) Adding this integration to an existing giving form involves several steps, including the customization of both the **form** and the **confirmation page.** Each step in this process is critical to the integration. It is recommended that you follow along with this video and the written instructions below. [Embedded content](https://www.youtube.com/embed/4EnuvwuHmlk) ## Modifying the Giving Form Adding the matching gift search capability from Double the Donation requires several modifications to a giving form. The ultimate goal of these modifications is to capture the company information selected by a donor, store it on the form, and pass it through to both the confirmation page and the Double the Donation platform. ### Step 1: Add JavaScript to the Form The first modification involves adding JavaScript code to the form. To add the code: 1. Starting on the form summary page, click **Edit Form**. The **Edit Form** page appears. 2. Click **Edit Scripts / Styles**. An **Edit Scripts / Styles** popup appears. 3. Copy the following script and paste it into the popup **Custom Scripts** field: ```javascript if (window.doublethedonation) { //Load the search into a DOM element with id="dd-company-name-input" doublethedonation.plugin.load_streamlined_input(); } $(document).ready(function(){ form.ValidateInternal = form.Validate; form.Validate = function (silent) { var selectedCompanyID = document.getElementsByName("doublethedonation_company_id")[0].value; var selectedCompanyName = document.getElementsByName("doublethedonation_company_name")[0].value; form.getElement('company-id').val(selectedCompanyID); form.getElement('company-name').val(selectedCompanyName); form.setValue("campaign", $("div[data-export='sys:gift:campaign']:first").find("option:selected").text()); return (form.ValidateInternal(silent)); }; }); ``` 4. Click **Save**. > [!WARNING] > 📝 Note > > Custom CSS in this section can effect the functionality of the Double the Donation company search bar, which is covered in the next step. After you complete this process, if the company search bar does not load, replace the above script with the following, which will refresh the form every five milliseconds until the company search bar loads on the page. ```javascript $(document).ready(function(){ form.ValidateInternal = form.Validate; form.Validate = function (silent) { var selectedCompanyID = document.getElementsByName("doublethedonation_company_id")[0].value; var selectedCompanyName = document.getElementsByName("doublethedonation_company_name")[0].value; form.getElement('company-id').val(selectedCompanyID); form.getElement('company-name').val(selectedCompanyName); form.setValue("campaign", $("div[data-export='sys:gift:campaign']:first").find("option:selected").text()); return (form.ValidateInternal(silent)); }; var DTDTimer = window.setInterval(LoadDTD, 5); var num = 0; function LoadDTD() { if (window.doublethedonation) { //Load the search into a DOM element with id="dd-company-name-input" doublethedonation.plugin.load_streamlined_input(); window.clearInterval(DTDTimer); } } }); ``` ### Step 2: Add the company search function The search function takes place within an *Instructions* form field. To add the search: 1. Add an ***Instructions*** form field where you want a donor to search for their employer. An **Edit Field** popup appears. 2. Click ***Source*** at the top of the WYSIWYG editor. A **Source** popup appears. 3. Copy the following JavaScript code and paste it into the source popup: ```xml
``` 4. Replace `YOUR_PUBLIC_KEY` with the public key provided to you by Double the Donation, making sure the public key is between the quotation marks. 5. Click **OK** to return to the **Edit Field** popup. The text box will appear empty - this is fine. 6. Click **Save**. 7. *Optional*: Add an additional **Instructions** form field to add context for the donor. E.g., *You may be able to double your donation! Search to see if your employer contributes matching gifts.* ### Step 3: Add required form fields The following **system fields** are required and are used to send donor and gift information to the Double the Donation platform: - First Name `{{sys-first}}` - Last Name `{{sys-last}}` - Donor Email `{{sys-email}}` A Slate Payments [Payment Form widget](/v1/docs/form-payment-widget) is also required and will automatically populate the `{{Form-Payment-Receipt.amount}}`and `{{Form-Recurring-Payment.amount}}`as needed. The following **hidden fields** capture and store the details of the company searched for by the donor. The export value for these fields must exactly match to be appropriately processed by the JavaScript function. Add each of these fields as a **text box**. > [!CAUTION] > 🔔 Important! > > Do not place the hidden fields in a [replicate block](/v1/docs/replicate-blocks). **Company ID** (*Required*) - **Label:** Company ID - **System Field:** Leave blank - **Export Key:** company-id - **Options:** Hidden (accessible through script) **Company Name** (*Required*) - **Label:** Company Name - **System Field:** Leave blank - **Export Key:** company-name - **Options:** Hidden (accessible through script) **First Campaign** (*Optional*) - **Label:** First Campaign - **System Field:** Leave blank - **Export Key:** campaign - **Options:** Hidden (accessible through script) > [!NOTE] > 💡Information about First Campaign > > - This optional field allows Double the Donation to attribute a match to the correct fundraising initiative. > - When used, the form automatically pulls the value from the `{{sys:gift:campaign}}` system field into **First Campaign** upon submission. > - Any default value will be overridden by the Gift – Campaign value. > - If no Gift – Campaign field is present or it has no value, **First Campaign** will be null. The provided script accounts for null values, ensuring gift data is still sent to Double the Donation even if no campaign is set. This completes modification to the form. Add other desired fields to your form as usual. ## Modifying the confirmation page The confirmation page must be updated to display the matching gift details for the company selected on the form. The confirmation page also serves as the mechanism to send the donation and employer details to the Double the Donation platform through the use of JavaScript. ### Step 1: Add styling and JavaScript to the confirmation page 1. On the summary page for the form, click **Edit Communications**. 2. Locate the confirmation page (or create a new one) and click **Edit Mailing**. 3. On the communications page, click **Edit Message**. 4. Click **Source** at the top of the WYSIWYG editor. 5. Copy the following code and paste it between the tags: ```xml ``` 6. Copy the following code and paste it inside the tags: > [!NOTE] > 📝 This code was updated on July 29, 2024 to accommodate the optional **First Campaign** field. ```xml