🌌 arthurs.dev

Recent Notes

Progressive email templater

5 min read

The following is an app that supports creating and sharing mass email campaigns for getting a message out to legislators and corporate heads.
https://actionnetwork.org/demo/?source=email-tool

Action Network is an open platform that empowers individuals and groups to organize for progressive causes. We encourage responsible activism, and do not support using the platform to take unlawful or other improper action. We do not control or endorse the conduct of users and make no representations of any kind about them.
https://5calls.org/
Another similar app.

https://www.quorum.us/blog/emailing-capitol-hill/
https://www.planning.org/advocacy/toolbox/emails.htm
https://www.publicsource.org/how-to-get-your-congressperson-to-actually-hear-you/
https://guides.lib.berkeley.edu/ContactingOfficials/Tips

While this is great, I find that it has a few flaws. Largely the lack of personalization which ultimately devalues the message as spam. Additionally, these campaigns are far and few between. I propose creating a similar app with the following goals:

  1. Make contacting representatives or corporations more accessible
  2. Add personalization to emails
  3. Reduce the sunk cost of an email tossed aside
  4. Reduce the time cost of smaller efforts that generally aren’t worth the time
  5. Create a straightforward way to create and share these templates with others

Strategies to reduce risk:

  • Consider rate limiting the user to discourage spam
  • Consider limitations on creating campaigns (wait for review)
  • Emails will be sent from the users personal email at their discretion
    • This means a disclaimer is needed
  • Guidelines for responsible use
  • Captcha, no auto-sending
  • Encourage customization

Possible Features

Email preview
Captcha
OAuth vs mailto (Auto Send)
Template selector
Template customization
Selection from multiple versions of the same template
Template builder (with sharing)
Email personalization score (to encourage personalized emails)
Encourage writing a “hook” or summary, both for guiding writing and for displaying
Optional account to save metrics (e.g. emails sent) and allow for things like creating campaigns or being visible on leaderboards
SEO
Attribution for groups that have created a campaign such as university clubs

Using the template

  1. Selecting a template displays the template name and description.
    This may be expanded to include a mandatory template mission (possibly the same thing as description and will guide writing) and optional template instructions (or notes). Additionally, I might like to add an attribution with a link to any organizations or schools that create a template.
  2. One pane will list all of the customization fields.
  3. A separate pane will show a preview of your completed email.

Building a template

Likely just a rich text editor with a plus (+) button to add a new field. This will insert a variable into the text while also creating an entry for the template creator to specify the behavior of that variable.

Proposed entry types:

  • Checkbox - checking will (may) include a default value that can optionally be overwritten.
  • Required - this is the minimum personalization expected by the campaign creator, e.g. the company name and product you are emailing about
  • Free Text - a larger text box to write anything you want, possibly with a description for what to write about and/or some leading text to introduce the statement.
  • Select from list - list of several variations, perhaps with a random button? This could even be part of the previous entry types.

Minimum Viable Product

Template selection list that populates subject/body fields. User populates recipient field. mailto send button.

Technologies

In an attempt to learn React while also limiting the tech stack as much as possible, I will be using React (frontend), Supabase (backend), Tailwind + Free Component Library (styling), and React Router/State Management tools (to pretend like this is Django). I will likely use either draft.js or lexical as a rich text editor that I can export to HTML and make visually appealing.

Scoring

  • List your locality as part of your signature, particularly if you’re emailing your representative or an issue near you.
  • Bonus points for percentage + number of default inputs filled in.
  • Writing a strong, transparent subject line
  • Keep message short and to the point, unless it includes a personal story
    • Personal emails get 7x clicks
  • No hyperlinks, only pasted links at the end of the email

System Design

User Types & Capabilities

FeatureGuest UserEmail UserGoogle/Microsoft User
Send emails via mailto:✅✅✅
Auto-send emails❌❌✅
Create public email templates❌✅✅
Login methodNo loginMagic link/One-time codeOAuth (Google/Microsoft)
Can connect Google/Microsoft❌✅❌ (Already connected)
graph TD
    A[Start] -->|Guest User| B[Send Emails using mailto]
    B --> C[Prompt to Sign Up for More Features]
    
    A -->|Email User Login| D[Enter Email]
    D -->|Send Magic Link/One-Time Code| E[Verify Email]
    E -->|Success| F[Access Dashboard]
    F -->|Send Emails using mailto| G
    F -->|Create Public Templates| H
    F -->|Connect Google/Microsoft Account| I

    I -->|OAuth Authenticated| J[Check if Email Matches]
    J -->|Match| K[Enable Auto-Send]
    J -->|Mismatch| L[Show Error - Use Correct Account]
    K -->|Auto-Send Enabled| M[Confirm Email Source Before Sending]
    K -->|Try to Connect Both Google & Microsoft| N[Error - Can Only Link One Provider]

    A -->|Google/Microsoft Login| O[Authenticate via OAuth]
    O -->|Success| P[Enable Auto-Send & Other Features]
    P -->|Auto-Send Emails| Q
    P -->|Create Public Templates| R
    P -->|Use mailto| S

    P -->|Disconnect Google/Microsoft| T[Revert to Email User]
    T --> U[Warn: Auto-Send Disabled]
    U --> F[Back to Email User Mode]

    P -->|OAuth Token Expires| V[Show Expired Auth Warning]
    V --> W[Prompt User to Reauthorize]

    K -->|User Tries to Auto-Send| X[Check Authorization]
    X -->|Authorized| Y[Send Email from Connected Email]
    X -->|Not Authorized| Z[Prevent & Show Connect Now Prompt]

    style K fill:#90ee90
    style Q fill:#90ee90
    style P fill:#90ee90
    style N fill:#ffcccb
    style L fill:#ffcccb
    style Z fill:#ffcccb

Graph View

Backlinks