System som Klaviyo kostar skjortan och det går att bygga mycket av funktionaliteten själv. Med MailerSend, Supabase och AI som skriver innehållet via API har vi byggt en epostautomation på gratisversionen av en ESP som är helt under vår kontroll.
Vad vi ville uppnå
Quizplattformen på quiz.flocken.info är ett eget byggprojekt som vi återkommer till, men den har börjat dra trafik. Hundägare gör ett quiz, ser sina resultat och lämnar. Det enda som saknades var ett sätt att ta vara på den uppmärksamheten innan den försvann.
Lösningen var enkel att beskriva: en ruta där besökaren lämnar sin mejladress och direkt får ett bonusquiz som välkomstmejl.
En epostlista ger en direktkanal som inte är beroende av algoritmerna på Meta eller Google. När vi väl har epostadressen tar vi kontroll över framtida kontaktpunkter som blir mer eller mindre gratis.
Ett välkomstmejl som skickas omedelbart bygger en vana hos mottagaren att öppna mejl från oss, vilket är avgörande för leveransbarhet på sikt.
Att bygga en epostlista kan tyckas förlegat. Men faktum är att det fortfarande är en viktig kanal eftersom alla har minst en mejladress de använder aktivt. Rätt använd kan den bli en värdefull tillgång.
Hur vi tänkte
Det första beslutet var om vi skulle använda ett färdigt verktyg som Mailchimp eller bygga något eget ovanpå MailerSend och Supabase. Svaret var enkelt: vi har redan båda. MailerSend används i ett annat projekt, Supabase likaså. Att lägga till en ny tabell i ett befintligt projekt kostar ingenting. Att skaffa ett nytt SaaS-konto kostar både pengar och tid.
Det andra beslutet gällde epostmallen. MailerSend har en drag-and-drop-editor, men problemet är att nästa gång vi vill uppdatera ett mejl sitter vi i ett webbgränssnitt istället för i kod. Jag ville att alla mallar ska leva i repot, versionshanteras med git och kunna uppdateras av Claude utan att vi behöver logga in i ett externt system. Det kräver att HTML-innehållet skrivs i kod och skickas direkt via API, utan att använda MailerSends template-motor.
Det tredje beslutet var om lead magnet. Eftersom besökaren uppenbarligen gillar quiz tog jag snabbt fram ett nytt quiz som man får direkt efter att man fyllt i sin epostadress.
Nästa tröskel
När quizproduktionen är automatiserad kan nya quiz genereras och läggas direkt i mejlkön utan manuellt arbete. Ett flöde där AI skapar innehållet efter en gedigen och faktakontrollerad research. Sedan schemaläggs utskicket och följer upp resultatet enligt instruktion utan ytterligare handpåläggning.
Det är en fullt realistisk vision, men kräver en genomarbetad skrivguide för quizen med guard rails för att undvika faktafel.
Systemet består av fyra delar som hänger ihop.
Formulärkomponenten visas på alla quiz-resultatsidor utom kända hundar. Den har en hero-bild från quizet, ett e-postfält och en knapp. Fyra statuslägen hanteras: väntar, laddar, klart och "redan registrerad". Det sista är viktigt för att inte ge ett felmeddelande till någon som faktiskt gjort rätt sak.
Innehållet i mejlet lever i en enda TypeScript-fil, templates.ts, som bygger upp HTML och plaintext direkt i kod. Ämnesrad, brödtext och CTA-knapp är funktioner som anropas när mejlet ska skickas.
Det betyder att Claude kan skriva om innehållet direkt i repot utan att någon behöver logga in i ett externt system. Vill vi byta ton, ändra erbjudandet eller lägga till en ny sekvens är det en filredigering, inte en session i ett webbgränssnitt.
Flödet är enkelt: formuläret skickar adressen till en API-route som sparar i Supabase, bygger mejlet via buildWelcomeEmail() och skickar det via MailerSend. Tre filer, ett flöde.
Supabase fick två nya tabeller i det befintliga projektet: en för prenumeranter och en för framtida schemalagda utskick. Det senare möjliggör e-postsekvenser utan ett externt automation-verktyg. Dag 3, dag 7, dag 14 kan läggas i kön och skickas via ett Vercel Cron Job.
MailerSend hanterar själva utskicket. Avsändardomain är email.flocken.info, vilket krävde DNS-poster i Vercel. Mailutskicket sker via direkt API-anrop med HTML-innehållet inbäddat, inte via MailerSends template-system.
Resultat och lärdomar
Systemet fungerar. Formuläret tar emot adresser, Supabase lagrar dem och välkomstmejlet landar inom sekunder.
Det som tog längst tid var inte koden, utan infrastrukturen runt om. DNS-verifieringen tar tid på sin gång, och miljövariabler som bara finns i .env.local ⓘ hamnar inte automatiskt i Vercel.
Det sistnämnda är ett klassiskt misstag som kostar onödig felsökning i produktion. Lösningen är att alltid konfigurera Vercel-variabler direkt efter att de är tillagda lokalt.
Beslutet att skriva HTML i kod visade sig vara rätt av en anledning vi inte hade tänkt på från början: det tvingar oss att hålla mallarnas design enkel. MailerSends editor uppmuntrar till komplexa layouter som sedan inte renderar rätt i Outlook. En textdominerad HTML-mall som skrivs för hand är mer robust och levereras bättre.
Att dela Supabase-projekt med andra interna tjänster sparade en hel databaskostnad. Konventionen att prefixa tabeller med flocken_ håller separationen tydlig, och vi undvek en extra månadskostnad för ett separat databasprojekt.
Hur vi går vidare
Närmaste steget är att fylla mejlkön med planerade utskick. Dag 3 kan innehålla ett annat quiz, dag 7 ett tips om Flocken-appen. Det är en e-postsekvens byggd på vår egen infrastruktur, utan ett externt automation-verktyg.
På längre sikt vill vi tracka öppningsfrekvens och klick via MailerSends webhook-API och lagra det i BigQuery. Det ger möjligheten att koppla mejlengagemang till app-installationer och se om epostlistan faktiskt driver nedladdningar.
Verktyg i den här processen
- MailerSend – E-postleverantör. Hanterar utskick, domänverifiering och leveransbarhet.
- Supabase – Backend-databas. Lagrar prenumeranter och mejlkö. Delat projekt för att undvika onödiga kostnader.
- Next.js API Routes – Serverlogik för att ta emot formulärdata, validera och trigga utskick.
- Vercel – Hosting och miljövariabler. DNS-hantering för
email.flocken.info. - Cursor / Claude Sonnet – Skrev koden för komponenter, API-route, HTML-mallar och SQL. Genererade även mejlinnehållet.
- ChatGPT – Tog fram bildprompt för välkomstmejlets hero-bild.
- Nano Banana Pro – Genererade hero-bilden i mejlet utifrån ChatGPT:s prompt.