NOTE: The following instructions describe how to edit the code of your NationBuilder donation page to work with Double the Donation in order to identify whether donors are eligible for donation matching from their employers. Before implementing this, you should set up an account with Double the Donation.
These instructions require you to edit the code in the template of your donation page. If you are not comfortable doing this, the NationBuilder team would be happy to implement these changes for you. For assistance with this, please send an email to Brian Palmer at [email protected].
Add the employer search field to your donation page
Step 1: In your NationBuilder account, navigate to Website then 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" />
Set up a donation confirmation page
In order for the integration to work, donors must land on a basic page after their donation processes. This can be called a donation confirmation page, a thank you page or something along those lines.
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.
These instructions require you to edit the code in the template of your donation page. If you are not comfortable doing this, the NationBuilder team would be happy to implement these changes for you. For assistance with this, please send an email to Brian Palmer at [email protected].