Integraties

E-mail versturen vanuit Lovable

Prompt een volledige app, voeg e-maillogica toe via WeSender.

Bouw-tool Prompt

Vereisten

  • Lovable-account met een actief project
  • WeSender-account met geverifieerd domein
  • Supabase-project gekoppeld aan je Lovable-app (voor server-side secrets)

Stap 1: Haal je WeSender API-sleutel op

Ga naar app.wesender.nl, open Instellingen > API-sleutels en kopieer de sleutel. Bewaar hem tijdelijk - je voegt hem zo toe als Supabase-secret.

Stap 2: Sla de sleutel op als Supabase Edge Function Secret

Open je Supabase-dashboard, ga naar Project Settings > Edge Functions en voeg WESENDER_API_KEY toe als secret. De sleutel is nu beschikbaar in je Edge Functions zonder dat hij in de frontend-code staat.

Stap 3: Prompt Lovable om een Edge Function te maken

Open Lovable en typ de volgende prompt: Maak een Supabase Edge Function genaamd 'send-email'. De functie stuurt een e-mail via de WeSender REST API (POST https://api.wesender.nl/v1/emails). Gebruik de omgevingsvariabele WESENDER_API_KEY als Bearer-token. De functie accepteert een JSON-body met de velden 'to', 'subject' en 'html'. Geef een JSON-response terug met het e-mail-id of een foutmelding. Lovable genereert de Edge Function, voegt hem toe aan je Supabase-project en schrijft de aanroepcode in de frontend.

Stap 4: Controleer de gegenereerde code

Open de Edge Function in Lovable of Supabase. Controleer dat de Authorization-header de omgevingsvariabele gebruikt (Deno.env.get('WESENDER_API_KEY')) en niet een hardcoded waarde. Het 'from'-adres moet op je geverifieerde domein staan.

Stap 5: Stuur een testmail via Lovable

Prompt Lovable om een testknop toe te voegen die de Edge Function aanroept met een voorbeeldmail. Klik op de knop in de preview, controleer je inbox en bekijk het bezorgrapport in je WeSender-dashboard.

Volledig voorbeeld

Hier is de volledige implementatie in supabase/functions/send-email/index.ts:

import { serve } from "https://deno.land/std@0.168.0/http/server.ts"

serve(async (req) => {
  if (req.method !== "POST") {
    return new Response("Method not allowed", { status: 405 })
  }

  const { to, subject, html } = await req.json()

  const res = await fetch("https://api.wesender.nl/v1/emails", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${Deno.env.get("WESENDER_API_KEY")}`,
      "Content-Type":  "application/json",
    },
    body: JSON.stringify({
      from:    "noreply@jouwdomein.nl",
      to,
      subject,
      html,
    }),
  })

  const data = await res.json()

  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json" },
    status:  res.status,
  })
})

Veelgestelde vragen

Kan ik de API-sleutel direct in de Lovable-frontend gebruiken?

Nee. Elke sleutel in frontend-code is zichtbaar voor bezoekers van je app. Gebruik altijd een server-side omgeving zoals een Supabase Edge Function om de sleutel veilig te bewaren.

Welk from-adres moet ik gebruiken?

Het from-adres moet op een domein staan dat je in het WeSender-dashboard hebt geverifieerd. Gebruik je een ander domein, dan weigert de API de aanvraag.

Lovable geeft een CORS-fout. Wat nu?

Voeg in de Edge Function een 'Access-Control-Allow-Origin'-header toe en vang OPTIONS-verzoeken op. Prompt Lovable: voeg CORS-headers toe aan de send-email Edge Function zodat aanroepen vanuit de browser werken.

Volgende stappen