Embed DonorBox form on /littlehelpers page

[anthonybailey]

Parent: #2

Goal

Build /littlehelpers as an embedded donation page with DonorBox form. This replaces the current 302 redirect to the DonorBox hosted page.

Phase 1: Standard DonorBox Embed (This Issue)

Get DonorBox form embedded on /littlehelpers page - standard embed, no matching manipulation yet.

Files to Create/Modify

1. src/lib/redirects.ts - Remove /littlehelpers from TEMPORARY_REDIRECTS

2. src/routes/littlehelpers/+page.svelte - New page with DonorBox embed

3. src/routes/littlehelpers/meta.ts - Page metadata

4. src/lib/components/DonorBoxEmbed.svelte - Reusable DonorBox embed component

   • Follow TallyEmbed.svelte pattern for reference
   • Props: campaignId, height
   • Script injection via onMount

DonorBox Embed Structure

<script src="https://donorbox.org/widget.js" paypalExpress="true"></script>
<iframe
  src="https://donorbox.org/embed/pauseai-s-little-helpers"
  height="685px"
  width="100%"
  style="max-width:500px; min-width:310px;"
  seamless="seamless"
  name="donorbox"
  frameborder="0"
  scrolling="no"
  allowpaymentrequest
></iframe>

Page Content

• Title: "Little Helpers Campaign" (or similar)
• Campaign messaging (pull from DonorBox campaign description)
• DonorBox form embed
• Note for large donors: "For donations of €1000+, contact us to minimize fees"

Phase 2: Matching-Aware Progress Display (Future Issue)

Approach: Client-side JS manipulation of DonorBox widget numbers

Matching Logic

• Challenge matchers double donations up to €11K donated (€22K matched total)
• Display: displayed = Math.min(actual * 2, 22000)
• After €11K donated, further donations no longer doubled

Implementation

• Wait for DonorBox iframe to load
• Access progress meter elements via DOM/postMessage
• Parse the displayed "raised" amount
• Apply matching formula and update displayed text
• Add matching badge/note

Reference Files

• src/lib/components/TallyEmbed.svelte - Similar embed pattern
• src/lib/redirects.ts - Current redirect config
• src/routes/pdoom/+page.svelte - Simple page example

Documentation

• DonorBox Donation Widget
• Embed Donation Meter

[anthonybailey]

Phase 1 Implementation Ready

Deploy preview: https://deploy-preview-569--pauseai.netlify.app/littlehelpers

PR: PauseAI/pauseai-website#569

What's included:

• DonorBox form embedded on /littlehelpers page
• DonorBox meter hidden (for future custom matching meter)
• Locale passed to DonorBox (language=en)
• Campaign text matching DonorBox page content
• Reusable DonorBoxEmbed.svelte component

Dashboard changes made:

• Newsletter subscription toggle disabled

Phase 2 (future):

• Custom matching-aware progress meter via DonorBox API