Does Double the Donation Integrate with NationBuilder?

Step-by-Step: Integrate Double the Donation Matching into NationBuilder

NationBuilder - Double the Donation FAQs

 

Step-by-Step: Integrate Double the Donation Matching into NationBuilder

Add the employer search field to your donation page

Step 1 — Open the Donation Page

In NationBuilder:

1. Navigate to Website.

2. Open the donation page you want to update.
   

 

Step 2 — Edit the Template

1. Click Template on the donation page.

2. Switch to code view to edit the page template.

 

<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 Double the Donation Public API key, found in your Double the Donation account settings.

Recommended placement: Directly below the billing address fields

<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 Double the Donation Public API key, found in your Double the Donation account settings.

 

 

Step 4 — Load the Double the Donation Script and Styles

Add the following anywhere on the page template:

<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 — Create a Confirmation Page

1. Navigate to Website → New Page.

2. Create a Basic Page (this will be your donation confirmation page).

Step 2 — Update Donation Settings

On the donation page:

1. Go to Donation Settings → Advanced.

2. Set “After donating, what page should they land on next?” to the slug of your new confirmation page.

3. (Optional) Disable social share prompts to ensure donors see the matching-gift content.

Step 3 — Edit the Confirmation Page Template

1. Open the confirmation page.

2. Click Template.

3. Insert the following code below the page content:

<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 4 — Add the Confirmation Page Script

At the bottom of the confirmation page template, add the JavaScript below and replace all instances of the placeholder with your 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>
 

 

Result

• Donations are sent to Double the Donation Matching

• Matching-gift instructions appear on the confirmation page

NationBuilder - Double the Donation FAQs