Open Sourced: Crowdfundr for NationBuilder-powered crowdfunding campaigns

We want you to win your people-powered campaigns, so we built a CrowdFundr plugin for your NationBuilder website to help make it easier to run the campaigns you want.

This how-to includes a setup kit .zip that you can download the implement.

To begin with, you will need a custom mobile-responsive template (i.e. cloned off of Aware Theme v2 or Presence).

The CrowdFundr Plugin for NationBuilder will be built upon your existing site structure, but first you’ll have to access your Theme Files by going to your Website’s control panel, clicking the Theme tab and Files and upload the following files:

Pages_show_moneybomb.html
_updates.html
_backers.html
_crowdfunding.scss
Crowdfunder_donation.js
Tabs.js

These files are provided in the setup kit >> Download here.

When you upload files, the changes might not reflect immediately. In that case, there will be a “Publish” button that will appear at the top-right. Click it to ensure that the files have propagated.

Then, find “themes.scss” and click on it. Once the code editor loads, navigate to the very bottom of it, and copy and paste the following:

@import "crowdfunding";

Click Save & Publish.

Now, you’re ready to create your landing page where your supporters can donate.
Create a new page for your website to create your main crowdfunding page. This will be a Moneybomb page type and has to be published. It can be named anything.

Once your new page has been created, navigate to the page's Settings tab and, on the right-hand side, make sure the "Show Sidebar" checkbox is unchecked.

At this point, you can customize a few other options for your campaign:

• Choose to allow comments
• Customize the email share message in the Default Post text field

Navigate to the "Moneybomb settings" tab and plug in the end date of your campaign in the “When will the moneybomb happen” field. To add some content to the page, navigate to Moneybomb settings > Intro and add any copy. If you want to add a video, paste the YouTube link straight into the WYSIWYG.

***FYI: None of the other settings on the MoneyBomb page will have any impact on the crowdfunding plugin. You will have the opportunity to make further customizations from the custom donation page you will create.

Now, time to create your subpages and donation levels: Click the "Subpages" tab

And then you will have to create the following pages:

An FAQ page type
This page will inform your donation amounts. Create a new subpage and make it an FAQ page type and name it whatever you want. Uncheck “Include in top nav” and “Include in supporter nav” then create the page. Once created, every new question you create under this FAQ page type will be an amount that users can donate towards your crowdfunding goal.

To create these, click “Questions & subpages” tab and then click “New Question”

In the Header: type out the dollar amount. Don’t put any currency signs, text or white space. Just a number.

The slug will auto populate.

In the Question detail field: you can put any introduction you have to this dollar amount or what this dollar amount corresponds to. Perhaps you’re a super-champion if you donate $5 a month.

In the Answer field: you can put the perks. What do you gain from donating $5 a month and being a super-champion?

A blog page type that will inform the Updates tab

Navigate back to the subpages section of the Crowdfunding page you created and create a new subpage. Make this subpage a blog page type and call it whatever you want. Again, ensure you uncheck this page from being included in the top and supporter nav before creating the page.

Under this new page, you can post blog posts with updates on your campaign or any new information.
In case you want to feature images or videos in your blog post, please follow these steps:

• Go to your blog post and click the Files tab
• Upload the images you’d like to feature
• Open the image(s) you just uploaded by right-clicking them and open them in a new tab
• Copy the image URL
• Go to your blog post > click on Content and paste the image URL into one of the content fields.
• Go back to your content field and click the image icon to open the image editor
• Paste the image URL into the image editor field that says Image URL
• For videos, just paste the YouTube or vimeo URL into the content field of the blog

And a donation page type

Create a new subpage under your moneybomb page. This page will be a donation page type and ensure that it is not included in the top nav.

On the new Donation page, click on the Template subnav item and copy and paste the contents in the "crowdfunding_custom_donate_template.html" file provided in this kit directly into the editor. Click "Save and Publish". (We recommend opening this using Sublime Text or open on a web browser so you don't lose some of the divs and consequently, the formatting.)

Go to the Donation Settings subnav item. Here you need to customize a number of items for your campaign:

• The "Default Donation Amounts" text field MUST contain EXACTLY the same values as the FAQ questions you created for your crowdfunding levels. Comma separated.
• You must set a fundraising goal for your campaign by putting in a value greater than 0 in the "Goal for amount raised" textfield.
• Optional: To set the number of donors goal for this campaign, put in a value greater than 0 in the "Goal for number of donors" textfield. Sometimes, even if you don't set a goal it'll set 0 as the denominator. In that case, just go to back to the Template tab and remove the following line of code: 

  
  Goal: {{ page.donation.amount_goal_format }}

  {% elsif page.donation.has_donor_goal? %}
  {% if page.donations_count < 2 %}
• Customize the rest of the fields as you like for your donations to be processed.

Also, this system is built to feature one crowdfunding page on one site. If you expect to publish multiple crowdfunding pages, then you might have to go in and tweak some of the files. This is because right now the main crowdfunding page only pulls the page with the slug "updates" to populate the Updates tab, and of course your site can't have two pages with the same slug.

When you're ready to go live, make sure all pages are published.

Good luck!