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 actionable matching gift next steps, making it simple for donors to immediately double their donation. The details of the search, including any applicable gift information, are sent to Double the Donation's 360MatchPro Platform for further management of any expected matching gifts. 

Adding this integration to an existing giving form involves several steps, including the customization of both the form and the confirmation page:

Modifications to the form will include:

  1. Add JavaScript to the form
  2. Ensuring the required fields exist
  3. Add three hidden form fields
  4. Add the company search functionality

Modifications to the confirmation page will include:

  1. Add the form's GUID as a merge field
  2. Add styling and JavaScript to the confirmation page

Important

On both the form and on the confirmation page, you will need to add the 360MatchPro public key that was provided to you by Double the Donation.

Modifying the Giving Form

The addition of the matching gift search functionality 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 360MatchPro platform. 

Add JavaScript to the Form

The first modification involves adding JavaScript to the form. To add the JavaScript:

  1. Click Edit Form
  2. Click Edit Scripts / Styles from the menu on the right side of the form builder
  3. Paste the below script in the Custom Script section of the popup
  4. Click Save
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));
};
});
Ensure the Required Fields Exist

The following fields are required for the integration to work as expected and are used to send donor and gift information to the 360 MatchPro platform:

  • First Name {{sys-first}}
  • Last Name {{sys-last}}
  • Phone {{sys-phone}}
  • Donor Email {{sys-email}}
  • Payment Amount {{Form-Payment-Receipt.amount}}
  • Company ID {{company-id}}
  • Company Name {{company-name}}

The Payment Amount field is the amount that is calculated within the payment widget. As long as the payment widget is on the form, there are not any additional modifications needed to ensure this field is present. 

Add Three Hidden Form Fields

Three hidden form fields must be added to the form. These fields capture and store the details of the company searched for by the donor. The export value for these fields must match exactly to be appropriately processed by the JavaScript.

Add a Text Box field for:

  • Company ID
    • Label: Company ID
    • System Field: Leave blank
    • Export Key: company-id
    • Options: Hidden (accessible through script)
  • Company Name
    • Label (Company Name)
    • System Field: Leave blank
    • Export Key: company-name
    • Options: Hidden (accessible through script)
  • First Campaign
    • Label: First Campaign
    • System Field: Leave blank
    • Export Key: campaign
    • Options: Hidden (accessible through script)
Add the Company Search Functionality

The search functionality will take 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
  2. Click Source within the editor
  3. Paste the JavaScript below into the source
  4. Replace YOUR_360MATCHPRO_PUBLIC_KEY with the public key provided to you by Double the Donation, ensuring it is between the quotes
  5. Click OK, then Save
<script src="https://doublethedonation.com/api/js/ddplugin.js" /><link href="https://doublethedonation.com/api/css/ddplugin.css" rel="stylesheet" /><div id="dd-company-name-input" /><script>
// Insert your "360matchpro_public_key" below
var DDCONF = {API_KEY: "YOUR_360MATCHPRO_PUBLIC_KEY"};

</script>

Modifying the Confirmation Page

The confirmation page will need to be updated to include the matching gift details of the company selected on the form. The confirmation page also serves as the mechanism to send the donation and employer details to the 360MatchPro platform. 

Add the Form's GUID as a Merge Field

The confirmation page must include the GUID of the form. This unique ID serves as a donation identifier with the 360MatchPro platform. To add the GUID:

  1. Click Edit Conditions on the confirmation page
  2. Click Export 
  3. In the Direct Exports section, select the GUID export for the form and click Continue
  4. Double-click the export to re-name it. 
  5. Re-name the export: Double the Donation Integration GUID
  6. Click Save
Add Styling and JavaScript to the Confirmation Page

The confirmation page requires updating to display the matching gift details of the company selected on the form. JavaScript must also be added to send the donation to the 360MatchPro platform. 

To add the style and JavaScript:

  1. Select Edit Message on the confirmation page
  2. Click Source within the editor
  3. Paste the code below within the <head></head> tags
  4. Paste the code below within the <body></body> tags
  5. Replace the text YOUR_360MATCHPRO_PUBLIC_KEY with the public key provided by Double the Donation. There are two places within this code to add your key. 
  6. Click OK, then Save

Paste the code below within the <head></head> tags

<script src="https://doublethedonation.com/api/js/ddplugin.js"></script>
<style type="text/css"><link href="https://doublethedonation.com/api/css/ddplugin.css" rel="stylesheet" />
</style>

Paste the code below within the <body></body> tags

<script>

// ***IMPORTANT***
// The following script has been developed to integrate directly with Double the Donation's 360MatchPro platform. Only modify script below when adding your public key.
// Additional modifications may negatively impact the connection to Double the Donation.
// Also, the <div id="dd-container"> below is required, as it's where the Double the Donation content is rendered.


$(function() {

if (window.doublethedonation) {
// Don't break your page if the DD plugin doesn't load for any reason
doublethedonation.integrations.core.register_donation({
"360matchpro_public_key": "YOUR_360MATCHPRO_PUBLIC_KEY", // Your "360matchpro_public_key"
"partner_identifier": "TECHN-o6cMgAqsuHzMK0FQ", // Do not change the partner_identifer. This is for Technolutions.
"campaign": "{{campaign}}",
"donation_identifier": "{{Double-the-Donation-Integration-GUID}}",
"donation_amount": {{Form-Payment-Receipt.amount}}{{Form-Recurring-Payment.amount}},
"donor_first_name": "{{sys-first}}",
"donor_last_name": "{{sys-last}}",
"donor_email": "{{sys-email}}",
"donor_phone": "{{sys-phone}}",
"doublethedonation_company_id": "{{company-id}}",
"doublethedonation_entered_text": "{{company-name}}"
});
};
});

var campaign = "{{campaign}}";
var donation_id = "{{Double-the-Donation-Integration-GUID}}";


var dtd_selected_company = "{{company-id}}";
// Your "360matchpro_public_key"
var DDCONF = {API_KEY: "YOUR_360MATCHPRO_PUBLIC_KEY", COMPANY: dtd_selected_company};
if (window.doublethedonation) { // Don't break your page if our plugin doesn't load for any reason
doublethedonation.plugin.load_config();
doublethedonation.plugin.set_donation_identifier(donation_id);
doublethedonation.plugin.set_donation_campaign(campaign);
if (dtd_selected_company) {
doublethedonation.plugin.set_company(dtd_selected_company);
} else {
var email = "{{sys-email}}";
var domain = doublethedonation.integrations.core.strip_domain(email) ;
doublethedonation.plugin.email_domain( domain ); // Checks for a company based on the email address.
}
doublethedonation.plugin.load_plugin();
}
</script>

<div id="dd-container">
</div>

<div id="dd-company-name-input">
</div>

Warning

The confirmation page will display a couple of pre-flight check warnings and an error message stating that the message body contains <script> tags, which may result in the message being blocked. These messages can be safely ignored and the confirmation page will work as intended.

Adding Additional Text

If you wish to add personalized text to the confirmation page, include it before the <script> tag within the body of the message.

 

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.