--- title: "Del 8: Én ekte integrasjon: MailerLite · Snarveien" description: "Påmelding som lander i listen du eier — API, gruppe og det som må virke." url: "https://snarveien.holisti.no/stien/skjema" --- - [Digitalt kompass](/) [Snarveien](/stien) [Brevet](/brevet) [Om](/om) [Start Snarveien](/#start) Snarveien · Del 8 av 12 · 10 min # Én ekte integrasjon: MailerLite Påmelding som lander i listen du eier — API, gruppe og det som må virke. Live side uten liste er fortsatt et skilt. Jeg ble ferdig med «kontakt meg senere» da første påmelding landet i *min* gruppe, ikke i et skjemaverktøy jeg ikke eide. Sti-notatet ditt Du har live URL (eller konkret plan for den). Denne delen legger til: **MailerLite-gruppe-id**, **API-nøkkel som hemmelighet**, og **ett skjema** som viser suksess eller feil ærlig. Testet med din egen e-post. Mangler live host? Du kan teste lokalt mot samme API-rute (npm run dev + .env). Målet er likevel at knappen på den publiserte siden funker når du er klar. ## Historie Jeg limte inn et innebygd skjema fra e-postverktøyet. Det virket. Til jeg ville endre teksten, stilen og hva som skjedde etterpå. Da satt jeg fast i noen andres boks. Det som fungerte, var enklere: et lite skjema på min side, én rute på serveren (/api/subscribe), og MailerLite bakom. Nøkkelen bodde som hemmelighet hos hosten, ikke i frontend-koden. Gruppen hadde et id jeg kunne peke på. Første gang jeg meldte meg på selv og så raden i listen, pustet jeg ut. Da visste jeg at byttet ikke var teater. ## Prinsipp Én integrasjon som lander i listen du eier, slår ti halvferdige widgets. Du trenger ikke CRM. Du trenger e-post inn, ærlig beskjed ut, og avmelding som finnes. Listen er eiendelen. Skjemaet er døren. ## Hvordan Én sti: **skjema på din side → POST /api/subscribe → MailerLite-gruppe**. Ikke tre verktøy samtidig. **Gruppe i MailerLite** — Subscribers → Groups (eller tilsvarende) → opprett gruppen for dette prosjektet. Åpne gruppen. **Gruppe-id** er ofte synlig i URL-en eller under gruppeinformasjon (langt tall). Noter den i sti-notatet. - **API-nøkkel** — MailerLite → Integrations / API → Generate new token (eller tilsvarende). Kopier nøkkelen *én gang* til et trygt sted. - **Hemmeligheter hos hosten, ikke i React** — lokalt: .env med MAILERLITE_API_KEY og MAILERLITE_GROUP_ID (se .env.example). På Cloudflare Worker: Settings → Variables and Secrets (samme navn). Aldri commit nøkkelen. Aldri lim den inn i frontend-kode. - **Skjema på siden** — e-postfelt, knapp, kort bytte ved siden av (hva de får, hvor ofte, avmeld når de vil). Frontend poster JSON med e-postfeltet (nøkkel email) til /api/subscribe. - **Rute som snakker med API** — Vite-dev kan bruke middleware; produksjon bruker Worker. Begge kaller MailerLite med nøkkelen fra miljøet. - **Tilstander** — suksess: «Du er på». Ugyldig e-post: rolig 422. Mangler nøkkel / serverfeil: «Noe gikk galt, prøv igjen» (ærlig 500), uten å skylde på brukeren. **Ende-til-ende-test:** klikk knappen på *din* side → meld på med egen adresse → åpne gruppen i MailerLite → se at du ligger der. Forklar mer Nøkkel, gruppe-id og hygiene **Hvorfor ikke nøkkel i frontend?** Alt i nettleserkoden kan kopieres. En API-nøkkel der er en nøkkel på gata. Nettleseren skal bare sende e-post til *din* rute. Hemmeligheten blir hos serveren. **Gruppe-id** er adressen innsiden av MailerLite: hvilken liste påmeldingen skal lande i. Uten den (eller med feil id) blir folk usynlige for deg. **Uten nøkkel i miljøet:** gyldige kall skal feile ærlig. Falsk «Du er på» er verre enn en rolig feilmelding. Se forskjellen i praksis: Teater-skjema Knapp som sier «Meld meg på» uten liste bak Ekte påmelding Klikk → rad i *din* MailerLite-gruppe (og gjerne bekreftelse i innboksen) Vanlig felle Å samle e-post uten ærlig bytte. «Hold deg oppdatert» er tomt. Skriv hva de får (f.eks. første steg på e-post), omtrent hvor ofte, og at de kan melde seg av. Tillit bygges der, ikke i designet på knappen. ## Slik så det ut hos meg - Egen gruppe per prosjekt. Gruppe-id i env. - MAILERLITE_API_KEY som Worker-secret (og i lokal .env til npm run dev). - Én SubscribeForm som poster til /api/subscribe. Samme subscribe-funksjon i Vite-dev og Worker. - Test: egen e-post → rad i gruppen. Uten nøkkel: ærlig «Noe gikk galt». **Resultatet hos meg:** påmelding jeg kunne teste ende til ende, med liste jeg faktisk eide. ## Med AI Be om hjelp til å koble, ikke til å skrive salgstekst. Lim inn: Tekst du kan lime inn i AI Jeg har en live (eller lokal) Vite/React-side og MailerLite. Jeg skal ha ÉTT påmeldingsskjema → POST /api/subscribe → MailerLite-gruppe. Hjelp meg med: 1) hvor i MailerLite jeg henter API-token og gruppe-id (steg, ikke essay) 2) env-variabler: MAILERLITE_API_KEY + MAILERLITE_GROUP_ID (lokal .env + Worker secrets) 3) hva frontend skal sende (JSON med email) 4) suksess- og feilmeldinger på rolig norsk 5) ende-til-ende-sjekkliste (melde meg på selv) Ikke foreslå flere integrasjoner. Ikke legg API-nøkkel i frontend. Tone: rolig, ærlig, ingen hype. Du limer inn hemmeligheter bare der de hører hjemme (host/env), ikke i chatten hvis du kan unngå det. I dag (under 20 min) Opprett eller velg gruppen. Sett nøkkel og gruppe-id som secrets/env. Koble skjemaet. Melde deg på med egen e-post. Skriv i sti-notatet: «Påmelding OK» pluss gruppenavn (eller gruppe-id), eller hva som feilet så du vet neste grep. Har du bare tid til gruppen og bytte-teksten i dag? Gjør det. Koble API i morgen. Det er greit. Sjekk før du går videre - **Nå:** fungerende påmelding (testet med deg selv) - **Neste (Del 9):** synlighet, så Google og AI kan lese det du allerede har Listen er i gang. Neste steg er ikke keyword-jakt. Det er å gjøre landing og artikler lesbare for bots: prerender, sitemap, Search Console. Så det du eier, også kan bli funnet. Neste steg, når du er klar: [Del 9 — Synlig for Google og AI →](/stien/synlig) [← Del 7**Publiser: domene, DNS, Cloudflare** ](/stien/publiser) [Del 9 →**Synlig for Google og AI** ](/stien/synlig) ## Fortsett Snarveien på e-post Fem korte mailer inn i maskinen. Deretter Ukens brev — med lenke hit når neste verktøy-steg passer. Serien er den videregående oppskriften. E-postadresse Start Snarveien Snarveien: 5 mailer inn i maskinen, deretter Ukens brev. Videregående oppskrift på nettet. Uten betaling. Avmeld når du vil. [Personvern](/personvern) Digitalt kompass · Snarveien ut med AI [HoliSti by Pedersen ENK](https://holisti.no) · Org.nr. [937 311 036](https://data.brreg.no/enhetsregisteret/oppslag/enheter/937311036) Kilhusveien 160B, 9402 Harstad · [E-post](/kontakt) [Snarveien](/stien) [Brevet](/brevet) [Om](/om) [Kontakt](/kontakt) [Personvern](/personvern) [Stien ut](https://stienut.holisti.no) [For AI](/llms.txt)