This article walks through Double the Donation's integration with Slate.
Step-by-Step: Integrate Double the Donation Matching into Slate
Part 1: Add Double the Donation Matching to your Donation Form
Part 2: Add Double the Donation Matching to your Confirmation Screen
Slate - Double the Donation FAQs
Double the Donation is the industry-leading matching gifts automation solution for nonprofits and educational institutions to identify more matching gift revenue opportunities and drive more matches to completion. You’ll need a Double the Donation account to activate the matching gift functionality within this partner platform. Not a Double the Donation client? Schedule a demo at https://doublethedonation.com/demo-request/.
Step-by-Step: Integrate Double the Donation Matching into Slate
This guide walks through the steps to add Double the Donation Matching to your existing Slate giving form.
Part 1: Add Double the Donation Matching to your Donation Form
Modifications to the form include:
Step 1. Add JavaScript to the form
Step 2. Ensuring the required fields exist
Step 3. Add three hidden form fields
Step 4. Add the company search functionality
All steps must be completed in order for the integration to work.
Step 1: Add JavaScript to the form.
Click Edit Form.
Click Edit Scripts/Styles from the menu on the right side of the form builder.
Paste the following script in the Custom Script section of the popup:
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));
};
});
Be sure to click save.
Step 2: 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 your Double the Donation Matching dashboard:
- 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}}
Step 3: Add three hidden form fields.
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)
-
Step 4: Add the company search functionality.
Add an Instructions form field where you want a donor to search for their employer.
Click Source within the editor.
Paste the following JavaScript below into the source:
<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>
Be sure to replace YOUR_360MATCHPRO_PUBLIC_KEY with the public key provided to you by Double the Donation, ensuring it is between the quotation marks.
Click OK, then Save.
Unsure of how to find your API key? Check out this article.
Part 2: Add Double the Donation Matching to your Confirmation Screen
Modifications to the confirmation page include:
Step 1. Add the form's GUID as a merge field
Step 2. Add styling and JavaScript to the confirmation page
All steps must be completed in order for the integration to work.
Step 1: 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 Double the Donation platform.
On the summary page for the form, click Edit Communications. The Communications summary page appears.
Locate the confirmation page and click Edit Mailing.
Click Edit Conditions. An Edit Conditions popup appears.
Click Export.
In the Direct Exports section, select the GUID export for the online giving form you are integrating with Double the Donation Matching and click Continue to return to the Edit Conditions popup.
Note: Ensure you select the GUID for the online giving form you are adding the integration to. You can search for "GUID" to ensure you've selected the correct GUID before changing the name.
Change the value for Name to Double the Donation Integration GUID.
Click Save to return to the Edit Conditions popup.
Click Save to return to the form communications page.
Step 2: Add Styling and JavaScript to the confirmation page.
Select Edit Message on the confirmation page. Click Source within the editor.
Paste the following code 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 following code within the <body></body> tags:
<script>
$(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>
Be sure to replace YOUR_360MATCHPRO_PUBLIC_KEY with the public key provided to you by Double the Donation.
You're all set! Double the Donation Matching will now appear on your donation forms and confirmation pages.
Slate - Double the Donation FAQs
Q: I don’t have a Double the Donation account. How do I get one?
A: Visit https://doublethedonation.com/demo-request/ to request a demo! Make sure you mention that you use Slate in your demo request form.
Q: Can I use the search tool on a form that I plan to embed on another page?
A: Yes, but it may require a different script. If you embed your form and the Double the Donation Matching search tool is not loading, use the following script:
Q: Where can I embed Double the Donation's matching gift search plugin?
A: We recommend that you incorporate Double the Donation's matching gift search tool across your broader fundraising. To install the search tool anywhere on your website, simply copy and paste the Embed Code from your Double the Donation portal.
We recommend that you create a dedicated matching gift page where you can explain what matching gift programs are and provide donors with a chance to look up their employer's program forms, guidelines, and instructions. This page can be used as a resource to be included in emails, newsletters, and direct messages.
Take a look at an example from the Cat Rescue Club: