Skip to main content

Free For Charity (FFC) Web Developer Training Guide

This guide is designed to help you support a new charity by setting up and managing the suite of online tools that FFC uses. Follow the detailed instructions and use the provided resource links to become proficient with each platform.

Table of Contents

  1. The Current FFC Model: GitHub Pages Static Sites (AI-Built)
  2. FFC Hub by WHMCS (Domain Orders, Client Data, Support Tickets)
  3. Cloudflare (DNS Management & Email Connection)
  4. Microsoft 365 or Google Workspace (Email Hosting)
  5. InterServer Web Hosting with DirectAdmin (Legacy)
  6. DIVI WordPress Theme (Legacy)
  7. WPMUdev WordPress Plugins (Legacy)
  8. Microsoft Clarity (Analytics)
  9. Tawk.to Live Chat (Support)
  10. Azure AI Language (Custom Question Answering)
  11. Final Notes

The Current FFC Model: GitHub Pages Static Sites

FFC now builds every new charity website as a fast, secure static site hosted on GitHub Pages. Sites are developed with AI development agents (Claude and GitHub Copilot), built as a Next.js static export from one of two FFC templates, and deployed automatically through GitHub Actions, with domains managed in Cloudflare. This is the workflow you should follow for all new charity sites. The InterServer / DirectAdmin / WordPress workflow in the later sections is retained only as a legacy reference for sites that have not yet migrated.

The gated journey you are building inside

Every charity site you build sits inside FFC’s gated onboarding journey. The website comes before the domain and email — money is only spent once the site is proven. As the volunteer developer, your work follows this order:

  1. Charity approved: the charity completes onboarding and FFC validates the organization (IRS status, Candid profile). Nothing is built before this approval.
  2. Website application: the charity submits the website application (it requires the approved onboarding) and sends content — logo, photos, mission text, program descriptions.
  3. Build from one of two templates: start from the Single Page Site Template for a charity without a site, or the Footer-Only Template to add the FFC footer and compliance layer to a site the charity already has. Both must meet the same standard.
  4. Validate on GitHub Pages:the site goes live on its free GitHub Pages address and is validated end to end — including the FFC footer standard (generated from the charity’s validated application data) and a Lighthouse accessibility pass. Work through the adoption checklist on FFC Admin before calling a site done.
  5. Domain via WHMCS: only after the site is validated live does the charity order their free .org domain through the FFC Hub — the order form requires the live GitHub Pages URL (that is the funding gate).
  6. Email last: Microsoft 365 or Google Workspace nonprofit email is set up after the domain — both programs require a live website before approving a nonprofit.

How each charity site is structured

  • Repository per charity: Each site lives in its own GitHub repository, named FFC-EX-<domain> (for example FFC-EX-examplecharity.org). All content and configuration are version-controlled in that repo.
  • One of two templates: New sites start from the FFC-IN-FFC_Single_Page_Template repository; charities that already have a designed site get the FFC footer and compliance layer from FFC-IN-Footer_Only_Template. Both converge at the same validation standard.
  • Framework: Sites are built with Next.js (configured for static export) plus React and Tailwind CSS, producing plain static HTML, CSS, and JavaScript with no server to maintain.
  • AI-assisted development: Pages and components are authored with AI development agents — Claude and GitHub Copilot — which deliver professional sites faster and keep quality consistent across every charity.
  • Build & deploy: GitHub Actions runs automated checks and builds the static export, then deploys it to GitHub Pages with automatic HTTPS on every push to the main branch.
  • DNS & domains: Cloudflare manages DNS for each charity domain and points it at the GitHub Pages site, while Microsoft 365 or Google Workspace provides email hosting.

Learning Resources

  1. FFC Hub by WHMCS

WHMCS powers the FFC Hub, which handles domain name orders, client data, billing and support tickets. Below are practical steps and troubleshooting notes for everyday tasks.

1.1. Login URLs

1.2. Main Setup Steps

  • Primary Contact Information: Ensure the account’s primary email is not based on the charity’s domain (e.g. use charityname@outlook.com instead of an address like info@charityname.org.
  • Multiple Contacts: Add at least two administrators to the account to avoid lockouts.
  • Domain Purchase & Configuration: After the charity's website is live and validated on its GitHub Pages address, guide them through ordering their .org domain via WHMCS (the order form requires the live GitHub Pages URL) and confirm the coupon code from their onboarding emails.

1.3. Common Issues & Solutions

  • Incomplete Onboarding Form:
    • Issue: Charity hasnt completed the onboarding form.
    • Solution: Schedule a Teams screen-share or escalate to a Global Admin.
  • Charity Order Flagged as Fraud:
    • Issue: Order flagged by fraud checks.
    • Solution: Confirm order origin (US), billing address match, and escalate when necessary.
  • Domain Transfer Failures:
    • Issue: Incorrect EPP code or privacy enabled.
    • Solution: Disable privacy, verify EPP, and resubmit transfer.

1.4. Learning Resources

Official WHMCS Learning Resources:

External WMHCS Learning Resources:

  1. Cloudflare (DNS Management & Email Connection)

Cloudflare manages the DNS settings for charity domains and is critical for setting up security (including DMARC) and email connectivity.

2.1. Login URLs

2.2. Setup Steps

  • Change Name Servers in FFC Hub: Update the charity’s DNS records in the FFC Hub to use the FFC Cloudflare nameservers.
    • ns1.freeforcharity.org
    • ns2.freeforcharity.org
  • Create a Cloudflare Account: Assist the charity in setting up a Cloudflare account using their organizational email, e.g.,charityname@outlook.com
  • Grant Domain Permissions: In the Cloudflare dashboard, add the charity’s domain and assign the “Domain Admin” role to the organizational account.
  • Set up Cloudflare DMARC Management: Follow Cloudflare’s instructions to configure DMARC records for improved email security.
  • Establish Email Connection to Microsoft 365: Configure the DNS records (MX, SPF, and DKIM) so that emails route correctly to Microsoft 365:
    1. Log in to your FFC Cloudflare admin account and navigate to the charity’s domain.
    2. Click on the DNS section in Cloudflare.
    3. Note the required DNS records provided by Microsoft 365 (these include MX records, SPF configuration, and DKIM keys).
    4. Open the Microsoft 365 Admin Portal.
    5. Navigate to Setup → Domains and select “Add domain.”
    6. Enter the charity’s domain name. Microsoft 365 will detect missing DNS records.
    7. When prompted, choose the option to use your Cloudflare account credentials. Enter your Cloudflare username and password so Microsoft 365 can automatically add the necessary DNS records.
    8. Once the records are added, verify the domain within the Microsoft 365 portal.

2.3. Learning Resources

Official Cloudflare Learning Resources:

External Cloudflare Learning Resources:

  1. Microsoft 365 or Google Workspace (Email Hosting)

Microsoft 365 provides the email hosting solution for charity accounts, ensuring seamless communication and collaboration. Email is the final stage of the gated journey: both Microsoft and Google require a live website before approving a nonprofit for free email, which is why the site is built and validated first and the domain connected before you start this section.

3.1. Setup Process

  • Apply for NonProfit Email Hosting: Visit the Microsoft Nonprofits page to learn about eligibility and application steps.
  • Configure Email Hosting: Once approved, follow the steps in the Microsoft 365 Admin Portal to set up and configure email accounts for your charity. Detailed instructions can be found here: Microsoft 365 Admin Documentation.

3.2. Learning Resources

Official Microsoft 365 Learning Resources:

External Microsoft 365 Learning Resources:

Legacy WordPress Workflow

Sections 4-6 below (InterServer + DirectAdmin, DIVI, and WPMUdev) describe the retired WordPress-based build process. They are retained for reference only, for charities still on the legacy stack. New charity sites use the GitHub Pages static-site model described at the top of this guide.

  1. InterServer Web Hosting with DirectAdmin (Legacy)

InterServer provides the hosting platform for charity websites.

4.1. Setup Process

  • Apply for a Hosting Account: Directly request hosting services for the charity via InterServer:InterServer Support.
  • Configure the Hosting Environment: Use the DirectAdmin panel to set up the website. Detailed guidance and documentation can be found on the DirectAdmin Help site: DirectAdmin Help Site.

4.2. Learning Resources

Official InterServer Resources:

External InterServer / DirectAdmin Learning Resources:

  1. DIVI WordPress Theme (Legacy)

DIVI is used to create visually appealing, responsive, and highly functional websites for charities.

5.1. Installation & Customization Steps

  • Install Divi: Download the Divi theme (typically provided through internal channels such as the FFC Internal Web Developer Microsoft Teams team) and follow the WordPress theme installation process.
  • Customize Divi: Use the built-in visual builder to customize page layouts, modify modules, and apply global design settings.

5.2. Learning Resources

Official DIVI Resources:

External DIVI Resources:

  1. WPMUdev WordPress Plugins (Legacy)

WPMUdev extends your charity’s website functionality with a range of essential WordPress plugins.

6.1. Setup Process

  • Identify Useful Plugins: Install plugins from WPMUdev that boost site performance, security, SEO, and more.
  • Configuration: Follow the installation and configuration instructions provided in the WPMUdev dashboard.

6.2. Learning Resources

WPMUdev provides extensive documentation for each of its pro plugins. Here are the direct links to the documentation for their most popular tools:

For general tutorials and community support, you can also visit the WPMUdev Blogand theirCommunity Forums.

  1. Microsoft Clarity (Analytics)

Microsoft Clarity provides insights into how users interact with the charity website so you can optimize its performance.

7.1. Setup Process

  • Install Plugin or Embed Script: Add the Microsoft Clarity plugin via WordPress or embed the tracking script in the website’s header.
  • Monitor and Analyze User Behavior: Use the dashboard to view heatmaps, session recordings, and other insights.

7.2. Learning Resources

Official Microsoft Clarity Resources:

External Microsoft Clarity Resources:

  1. Tawk.to Live Chat (Support)

8.1. Setup Process

  • Create an account at Tawk.to.
  • Follow the setup wizard to create a property for the charitys website.
  • Install the Tawk.to WordPress plugin or add the provided JavaScript snippet to the websites footer.
  • Customize the chat widgets appearance and settings in the Tawk.to dashboard.

8.2. Learning Resources

  1. Azure AI Language (Custom Question Answering)

Custom Question Answering, a feature of Azure AI Language, is the new version of QnA Maker and is used to build a knowledge base for conversational AI.

9.1. Setup Process

  • Navigate to the Azure Language Studio.
  • Create a new Language resource and ensure the Custom question answering feature is enabled.
  • Create a new project, linking it to existing content sources like FAQs or product manuals to build the knowledge base.
  • Train, test, and deploy the project to get a queryable endpoint for your application or bot.

9.2. Learning Resources

  1. Final Notes

By following the steps in this guide and using the linked resources:

  • You will be able to efficiently support a charity through the gated journey: build and validate their website from one of the two FFC templates, then configure domain management, and finally secure email hosting — in that order, using the tools FFC supports.
  • Whenever you encounter an issue—for example, with domain transfers or DNS configuration—refer to both the official documentation and trusted external tutorials for alternate perspectives and troubleshooting tips.
  • For setting up the email connection in Microsoft 365, remember that Microsoft’s admin portal now allows you to leverage your Cloudflare credentials to automatically insert the required MX, SPF, and DKIM records, streamlining the verification process.

This guide is designed to be both a step-by-step procedural reference and a gateway to deeper learning. As you gain confidence with each tool, you’re encouraged to explore the additional materials provided in the external resources sections.

Happy developing and supporting the charities in their mission!

If you have further questions or need clarification on any of these steps, feel free to ask your fellow team members in the internal channels or consult the provided documentation links.

The current developer training—setting up Claude-driven development and building charity sites—lives on the FFC Admin portal.

Full step-by-step guide on FFC Admin(opens FFC Admin in a new tab)

The WordPress developer workflow below is retained as a labeled legacy reference for existing sites.

Legacy WordPress guide on FFC Admin(opens FFC Admin in a new tab)