Does Double the Donation Integrate with NationBuilder?

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

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

NationBuilder - Double the Donation FAQs

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

Add the employer search field to your donation page

Step 2: Navigate to Template to begin editing the code.

Step 3: Insert the following div element in the form where the streamlined search field should appear. Ensure that it is placed within the form tag of the donation form.

<div id='dd-company-name-input'></div> 
<script>var DDCONF = {API_KEY: "360MATCHPRO_PUBLIC_KEY"};</script> 

You should replace 360MATCHPRO_PUBLIC_KEY with your actual 360MatchPro Public API key, found in your Double the Donation account settings.

We recommend placing this below the billing address fields, like so:

<div class="form-group col-md-6">
 <div class="float-label">
 <label for="donation_last_name">{{ t_forms_last_name }}</label>
 {% text_field "last_name", class:"form-control" %}
 </div>
 </div>
 </div>
 <div class="form-row">
 <div class="form-group col-md-6">
 <div class="float-label">
 <label for="donation_email">{{ t_forms_email }}</label>
 {% email_field "email", class:"form-control" %}
 </div>
 </div>
 <div class="form-group col-md-6">
 <div class="float-label">
 <label for="donation_billing_address_phone_number">{{ t_forms_phone }}</label>
 {% phone_field "billing_address.phone_number", class:"form-control" %}
 </div>
 </div>
 </div>

 {% include "donation_billing_address_inputs" %}
 <div id='dd-company-name-input'></div>
<script>var DDCONF = {API_KEY: "360MATCHPRO_PUBLIC_KEY"};</script>
 

You should replace 360MATCHPRO_PUBLIC_KEY with your actual 360MatchPro Public API key, found in your Double the Donation account settings.

Step 4: Include the following CSS and JavaScript somewhere on the page:

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

Add the matching gift plugin to your confirmation page

Step 1: In your NationBuilder account, navigate to Website and click New Page. This new page should be a basic page.

Step 2: Adjust the donation settings of your donation page (Donation Settings > Advanced) so that the "After donating, what page should they land on next?" field is populated with the slug of the new confirmation page.

You may also want to turn off the social share prompt via the Social Media settings tab to make sure that users engage with the confirmation page to complete the matching process.

Step 3: Access the code for your confirmation page by navigating to the Template tab of that page.

Step 4: Include the following HTML code in the page template where you would like the employer matching prompt to show up:

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

It is recommended to place this code directly below the {{ page.basic.content }} liquid tag, like so:

 
{% if page.basic.content.size > 0 %}
 <div class="page-content">
 {{ page.basic.content }}
 <div id="dd-container"></div>
 </div>
 {% endif %}
 

NOTE: The if/then liquid conditional statement in the example above means that the added code will only work if there is some content in the page's content editor. Thus, you should either add some content to the WYSIWYG editor (e.g. "Thank you for contributing!") or remove the liquid "if" and "endif" tags that surround the page-content div.

Step 5: Add the following JavaScript code to the bottom of the confirmation page template, replacing the two instances of 360MATCHPRO_PUBLIC_KEY with your actual 360MatchPro Public API Key:

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

<script>

const dtd = localStorage.getItem('doublethedonation');
const obj = JSON.parse(dtd);
const companyId = obj.doublethedonation_company_id;
const enteredText = obj.doublethedonation_entered_text;

 if (window.doublethedonation) {
 doublethedonation.integrations.core.register_donation({
 "360matchpro_public_key": "360MATCHPRO_PUBLIC_KEY",
 "partner_identifier": "NATIO-3EJAQWTM1IY6vJsi",
 "campaign": "{{ request.current_signup.last_donation.tracking_code_slug }}",
 "donation_identifier": "{{ request.current_signup.last_donation.id }}",
 "donation_amount": {{ request.current_signup.last_donation.amount_format | remove:'$' }},
 "donor_first_name": "{{ request.current_signup.first_name }}",
 "donor_last_name": "{{ request.current_signup.last_name }}",
 "donor_email": "{{ request.current_signup.email }}",
 "donor_address": {"zip": {{ request.current_signup.billing_address.zip }},
 "city": "{{ request.current_signup.billing_address.city }}",
 "state": "{{ request.current_signup.billing_address.state }}",
 "address1": "{{ request.current_signup.billing_address.address1 }}",
 "address2": "{{ request.current_signup.billing_address.address2 }}",
 "country": "{{ request.current_signup.billing_address.country_code }}"},
 "donor_phone": "{{ request.current_signup.phone }}",
 "donation_datetime": "{{ request.current_signup.last_donation.succeeded_at | date:'%Y-%m-%dT%H:%M:%S%z' }}",
 "anonymous": "{{ request.current_signup.last_donation.is_private? }}",
 "recurring": "{{ request.current_signup.last_donation.is_recurring? }}", 
 "doublethedonation_company_id": companyId,
 "doublethedonation_entered_text": enteredText
 });
 };


var dtd_selected_company = companyId;
var DDCONF = {API_KEY: "360MATCHPRO_PUBLIC_KEY", COMPANY: dtd_selected_company};
if (window.doublethedonation) { 
 doublethedonation.plugin.load_config();
 doublethedonation.plugin.set_donation_identifier("{{ request.current_signup.last_donation.id }}");
 doublethedonation.plugin.set_donation_campaign("{{ request.current_signup.last_donation.tracking_code_slug }}");
 if (dtd_selected_company) {
 doublethedonation.plugin.set_company(dtd_selected_company);
 } else {
 var domain = doublethedonation.integrations.core.strip_domain("{{ request.current_signup.email }}") ; 
 doublethedonation.plugin.email_domain( domain );
 }
}
</script>
 

That's it! Your donations will now be sent to your Double the Donation account and donors will be provided with instructions for employer donation matching when applicable.

NationBuilder - Double the Donation FAQs