Double the Donation Integration
  • 22 Aug 2024
  • 7 minute read
  • Dark
    Light
  • PDF

Double the Donation Integration

  • Dark
    Light
  • PDF

Article summary

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'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:

To customize the Form:

  1. Add JavaScript to the form.

  2. Make sure the required fields exist.

  3. Add hidden form fields.

  4. Add the company search function.

To customize the Confirmation page:

  1. Add the form's GUID as a merge field.

  2. Add styling and JavaScript code to the confirmation page.

Note

You must add the 360MatchPro public key provided by Double the Donation to both the form and the confirmation page. Detailed information regarding the required steps is provided later in this article.

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 360MatchPro platform. 

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 field:

    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.

Sometimes when embedding a form in a website outside your Slate database, a different script is needed to load the Double the Donation search bar. If the search bar does not load using the script provided above, use the following script, which will refresh the form every five milliseconds until the Double the Donation search bar loads on the page.


$(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);
  }  
}
});

Make Sure 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, no additional modifications are required to ensure this field is present. 

Add Hidden Form Fields

Hidden form fields must be added to the form (two are required and one is optional). These 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.

Required Fields

  • 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)

Optional Field

  • First Campaign

    • Label: First Campaign

    • System Field: Leave blank

    • Export Key: campaign

    • Options: Hidden (accessible through script)

When the First Campaign field is used, submitting the giving form automatically inserts the value (if any) from the Gift – Campaign system field into the First Campaign form field. Note that even if a default value has been set for First Campaign, that value will be replaced by the value from the Gift – Campaign field. Also, if a Gift – Campaign system field is not used on the form, or if it has no value, the First Campaign field value will be removed, and it will have a null value.

The script provided in this article accounts for a null value for First Campaign, ensuring that gift information is still sent to Double the Donation even if the First Campaign form field has a null value.

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:

    <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>
  4. Replace YOUR_360MATCHPRO_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.

  6. Click Save.

Modifying the Confirmation Page

The confirmation page must be updated to include 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 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. On the summary page for the form, click Edit Communications. The Communications summary page appears.

  2. Locate the confirmation page and click Edit Mailing.

  3. Click Edit Conditions. An Edit Conditions popup appears.

  4. Click Export.

  5. In the Direct Exports section, select the GUID export for the form and click Continue to return to the Edit Conditions popup.

  6. Change the value for Name to Double the Donation Integration GUID.

  7. Click Save to return to the Edit Conditions popup.

  8. Click Save to return to the form communications page.

Add Styling and JavaScript to the Confirmation Page

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

To add the style and JavaScript code:

  1. On the communications page for the confirmation page, click Edit Message. An Edit Message popup appears.

  2. Click Source at the top of the WYSIWYG editor. A Source popup appears.

  3. Copy the following code and paste it between the and HTML 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>
  4. Copy the following code and paste it between the and HTML tags:

    This code was updated on July 29, 2024 to accommodate the optional First Campaign field.

    <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}}" || "No Campaign Selected",
    "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}}" || "No Campaign Selected";
    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>
  5. Replace the text YOUR_360MATCHPRO_PUBLIC_KEY with the public key provided by Double the Donation. There are two places in this code to replace the key text. 

  6. Click OK to return to the Edit Message popup.

  7. Click Save to return to the communications page for the confirmation page.

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 in the body of the message.

🦈 Slate Bytes Video

Please watch the following Slate Bytes video for more information on this topic!


Was this article helpful?