Follow slides online here:

Who are we?

2. Joachim (also a web developer)

1. Corey (a web developer)

3. Viviana (a designer AND developer)

About Code Nation

  • Digital agency of designers & developers
  • Specialising in NationBuilder since 2014 - Launching an organising tool to empower local group leaders - movement representing 1.5 million

 Viviana joining us in Australia in 2018

Recent Highlights:

  1. Create your own campaign website using NationBuilder
  2. Add a call to action page (i.e. petition, donate, signup)
  3. Embed third-party tools on your website
  4. Connect with your supporters (via email blast)

Ultimate goal

World domination with your own robot army

Creating a website

What do CMS and CRM mean?

CMS = Content Management System

CRM = Customer Relationship Management

What is NationBuilder?

Both a CRM & CMS

Navigating NationBuilder

Accessing your nations

Login Details:



Check your inbox for the account activation email you received yesterday afternoon

NationBuilder Key Concepts

1. Site Level Settings
  - Theme & style
  - Logo & footer content

2. Action Pages
  - Action Chains
  - Tags, point person, paths

3. Autoresponse emails

NationBuilder Page Types

  1. "Basic" content pages
  2. Blogs & blog posts
  3. Calendars & events
  4. Signup pages & volunteer signup pages
  5. Petitions
  6. Donation pages

Almost 30 options

See the full list

Adding content to pages

Using the content editor, or WYSIWYG:

What You See Is What You Get

(pronounced "Wiziwig")

Adding content to pages


3. You can use multimedia via

1. The WYSIWYG editor converts your content to the HTML format the webpage needs

Adding content to pages

Using embedly for multimedia content

Youtube Videos

Facebook posts





Simply include the URL on its own line unlinked without any styles

Website Exercise 1.

Quick demo:


- Theme, logo, favicon and footer

- Adding a featured image

- Creating a new "basic" page

- Uploading images & video

- Adding your page to the top nav

Website Exercise 1.

1. Customise your site

   a) Choose a theme and colour styles,
   b) Upload your logo

 2. Edit your homepage

   a) Add your campaign content to the homepage
   b) Add a featured image to your homepage 


3. Create at least one other "basic" content page

   a) Upload an image to the page content

   b) Add a Youtube or Vimeo video using

   c) Include the page in the top nav

Website Exercise 2.

1. Create a new action page

   a) Create a petition, event or signup page so supporters can take action

   b) Add text, image and video content

   c) Include it in the top nav

2. Configure your action page

  a) Tags - set a tag given to supporters that take your action

  b) Landing page - set a landing page for after the action
  c) Autoresponder - create an email sent to the supporter


3. Feature your action on the website homepage

   a) Simply add the "homepage" tag to your action page



Embed a third-party widget

Why is this useful?

  1. You will sometimes need extra action types not supported by NationBuilder (e.g. email your MP)
  2. You might want to show special content, e.g.
    • A social media widget

Embed a third-party widget

Handy NationBuilder Integrations

  1. For direct email actions (e.g. "email your MP" forms or submissions to government inquiries)
    • DoGooder
    • CampaignNow
  2. The full list of NationBuilder integrations


Embed a third-party widget

Step 1: Get the embed code

What do we mean by embed code?

Three common examples:

  1. <iframe src="" height="600">
  2. <script src=""></script>
  3. <form action="">...</form>

Embed a third-party widget

Step 2: Create a custom page template

  1. Create a new basic page
  2. Click the "Template" tab
  3. Click the "Create a custom template" button
  4. You can now paste your special embed content into the code for this page.
    • Exactly where depends on your theme
    • Generally just below {{ page.basic.content }}

Website Exercise 2.

Embed a third-party widget onto your website homepage

  1. Twitter
  2. Facebook:
    • Click "Get code", then choose the "iFrame" option


Exercise 3

  1. Click the "Communications" link in the sidebar
  2. Create a new email blast
  3. Add content to your new email blast
  4. Use the "Control panel users" filter for your targeted recipients
  5. Add the content of your email
 Advanced issues found

Sending a targeted email


Code Nation - NationBuilder Workship @ Progress Digital Bootcamp 2019

By Code Nation

Code Nation - NationBuilder Workship @ Progress Digital Bootcamp 2019

  • 14
Loading comments...

More from Code Nation