Quick Newsletter Setup for status.health® Blog

Quick Newsletter Setup for status.health® Blog

Immediate Solution (No Backend Required)

Since you’re using GitHub Pages (static hosting), here are three options to get email notifications at newsletter@status.health when someone signs up:

Option 1: Formspree (Recommended - 5 minute setup)

1. Sign up at formspree.io
   • Use newsletter@status.health as your account email
2. Create a new form
   • Name it “blog.status.health newsletter”
   • Set notification email to newsletter@status.health
3. Get your form ID
   • It will look like: https://formspree.io/f/xyzabc
4. Update the blog code:

   // In assets/js/newsletter-gdpr.js, replace:
   'https://formspree.io/f/YOUR_FORM_ID'
   // with:
   'https://formspree.io/f/xyzabc' // your actual form ID
   

5. Add the GDPR script to your layout:

   <!-- In _layouts/default.html, before closing </body> -->
   <script src="/assets/js/newsletter-gdpr.js"></script>
   

Option 2: ConvertKit (Best for growth)

1. Sign up at convertkit.com
2. Create a form with these settings:
   • Double opt-in: Enabled
   • Email notifications: newsletter@status.health
   • GDPR fields: Enabled
3. Update _config.yml:

   newsletter_provider: convertkit
   newsletter_form_id: YOUR_ACTUAL_FORM_ID
   

Option 3: Zapier (Most flexible)

1. Create a Zapier webhook
2. Set up this Zap:
   • Trigger: Webhooks by Zapier (Catch Hook)
   • Action: Send Email (Gmail/Outlook)
   • To: newsletter@status.health
   • Include: Email, timestamp, consent confirmation

Testing Your Setup

1. Add test script to your blog:

<!-- Create test-newsletter.html -->
---
layout: page
title: Newsletter Test
permalink: /test-newsletter/
---

<h2>Test Newsletter Signup</h2>

<div class="newsletter-test">
  <p>This page tests the newsletter notification system.</p>
  
  <form class="newsletter-form" id="test-form">
    <div class="form-group">
      <input type="email" name="email" placeholder="test@example.com" required>
      <button type="submit" class="btn btn-rainbow">Test Subscribe</button>
    </div>
    <div class="form-message"></div>
  </form>
  
  <div id="test-results" style="margin-top: 2rem; padding: 1rem; background: var(--color-bg-secondary); border-radius: 8px; display: none;">
    <h3>Test Results:</h3>
    <pre id="results-content"></pre>
  </div>
</div>

<script src="/assets/js/newsletter-gdpr.js"></script>
<script>
document.getElementById('test-form').addEventListener('submit', function(e) {
  const results = document.getElementById('test-results');
  const content = document.getElementById('results-content');
  results.style.display = 'block';
  content.textContent = 'Subscription attempted at: ' + new Date().toISOString() + '\nCheck newsletter@status.health for notification email.';
});
</script>

2. Run the test:

1. Visit /test-newsletter/ on your blog
2. Enter a test email (e.g., test+@status.health)
3. Submit the form
4. Check newsletter@status.health inbox

GDPR Compliance Checklist

• Explicit consent checkbox (added by newsletter-gdpr.js)
• Link to privacy policy
• Timestamp of consent
• Double opt-in email (handled by email provider)
• Unsubscribe link (added by email provider)
• Data export process (document this)
• Deletion process (document this)

What Happens When Someone Signs Up

1. User fills form with email and checks consent
2. JavaScript validates consent and email format
3. Notification sent to newsletter@status.health via chosen method
4. Consent recorded with timestamp
5. Success message shown to user
6. Double opt-in email sent (if using ConvertKit/Mailchimp)
7. User confirms via email link
8. Welcome email sent automatically

Data Flow Diagram

User Submits Form
       ↓
JavaScript Validation
       ↓
Send to Service ––––→ Email to newsletter@status.health
       ↓
Record Consent
       ↓
Show Success Message
       ↓
Service Sends Double Opt-in
       ↓
User Confirms
       ↓
Added to Newsletter List

Quick Start Commands

# 1. Add GDPR script to default layout
echo '<script src="/assets/js/newsletter-gdpr.js"></script>' >> _layouts/default.html

# 2. Commit changes
git add .
git commit -m "Add GDPR-compliant newsletter with email notifications"
git push

# 3. Sign up for Formspree (or other service)
# 4. Update form ID in newsletter-gdpr.js
# 5. Test with test-newsletter.html

Environment Variables (for future backend)

When you move to a backend solution, you’ll need:

NEWSLETTER_NOTIFICATION_EMAIL=newsletter@status.health
SMTP_FROM=noreply@status.health
PRIVACY_POLICY_URL=https://status.health/privacy
UNSUBSCRIBE_URL=https://status.health/unsubscribe

Support & Troubleshooting

1. Not receiving emails?
   • Check spam folder
   • Verify form ID is correct
   • Test with different email providers
2. Form not working?
   • Check browser console for errors
   • Ensure JavaScript is enabled
   • Verify CORS settings
3. GDPR concerns?
   • Document your data processing
   • Keep consent records
   • Respond to requests within 30 days

Ready to test? The quickest setup is Formspree - you’ll be receiving notifications in under 5 minutes!