Does Double the Donation integrate with Slate (Technolutions)?

This article walks through Double the Donation's integration with Slate.

Step-by-Step: Integrate Double the Donation's 360MatchPro into Slate

Part 1: Add 360MatchPro to your Donation Form

Part 2: Add 360MatchPro to your Confirmation Screen

Slate - Double the Donation FAQs

 

360MatchPro 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 360MatchPro account to activate the matching gift functionality within this partner platform. Not a 360MatchPro client? Schedule a demo at https://360matchpro.com/demo-request/.

Step-by-Step: Integrate Double the Donation's 360MatchPro into Slate

This guide walks through the steps to add 360MatchPro to your existing Slate giving form.

Part 1: Add 360MatchPro 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.

Edit FormClick Edit Scripts/Styles from the menu on the right side of the form builder.

Edit Scripts and Styles

Paste the following script in the Custom Script section of the popup:
Custom Script Blank

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 360MatchPro 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)

Edit Field

Edit Instructions


Hidden


Step 4: Add the company search functionality.

Add an Instructions form field where you want a donor to search for their employer.

Instructions

Click Source within the editor.

Source

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.

Instructions Source-1

Click OK, then Save.

 

Unsure of how to find your API key? Check out this article. 

Part 2: Add 360MatchPro 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 360MatchPro platform.

On the summary page for the form, click Edit Communications. The Communications summary page appears.

Edit Communications

Locate the confirmation page and click Edit Mailing.

Edit Communication - Confirmation Page

Edit Communication - Confirmation Page - Edit Message


Click Edit Conditions. An Edit Conditions popup appears.

Edit Communication- Confirmation Page - Edit Conditions


Click Export.

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

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:

Edit Communication - Confirmation Page - Edit Message -Source

<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}}",

"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>

 

Be sure to replace YOUR_360MATCHPRO_PUBLIC_KEY with the public key provided to you by Double the Donation.

 

You're all set! 360MatchPro will now appear on your donation forms and confirmation pages.

Slate - Double the Donation FAQs

Q: I don’t have a 360MatchPro account. How do I get one?

A: Visit https://360matchpro.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 search tool is not loading, use the following script:

 

$('#birthday-tooltip').hover(function() {
$('#birthday-tooltip-text').show();
}, function() {
$('#birthday-tooltip-text').hide();
}
);
 
$(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);
  }  
}
});

 

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 360MatchPro 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: