Article Preview
Learn how to integrate Mailgun with your Lovable application to send transactional and marketing emails. This guide uses Lovable Cloud as your primary backend (the default for new Lovable projects).
What is Mailgun?
Mailgun is a developer-centric email API focused on high deliverability, robust analytics, and flexible integration for both transactional and marketing emails. Mailgun provides domain verification, webhook tracking, and detailed delivery reports—making it ideal for applications that need reliable email delivery.
Want to skip the process? Check out the end-result here and remix it for yourself!
https://studio404.lovable.app/
Part 1: MVP – Basic App with Email Sending
Get a working app with Mailgun email integration in minutes.
NOTE: On the Lovable free plan you’ll be able to get the MVP working but to go further you’ll need a paid account (or wait for your credits to be refreshed).
Step 1: Create a Landing Page with a Contact Form
Instructions:
- Start a new Lovable project with the following prompt (feel free to add your own brand and design style):
Create a modern landing page with a hero section, value proposition, and a contact form that collects name, email, and message. Include validation. - Test the form in the Preview tab to ensure it works.
Step 2: Set Up Mailgun Credentials
Instructions:
- Sign up for Mailgun at mailgun.com.
- Free tier: 100 emails/day, 1 custom domain.
- Verify your sender domain by adding DNS TXT and MX records as instructed.
- Get your credentials:
- Go to Settings > API Security, create and a private API key (we’ll need this in the next step).
- Note your verified domain (e.g., mg.yourdomain.com).
Step 3: Send Confirmation Emails
Instructions:
- Prompt Lovable to Send Confirmation Email via Mailgun:
When someone submits the contact form, automatically send them a confirmation email via Mailgun. The email should:
- Have a friendly message thanking them for reaching out
- Come from MAILGUN_FROM_EMAIL using MAILGUN_DOMAIN (ask for these)
- Show a success message to the user. - Click ‘Allow’ to enable Lovable Cloud (or use Supabase).
- Provide your Mailgun API key, Domain and from address in the prompt (these will be securely stored as secrets in Lovable Cloud).
Test by submitting the form with your own email and verify the confirmation email arrives.
🎉 MVP Complete!
You've built a working app that:
- Collects contact submissions
- Sends confirmation emails via Mailgun
This is a complete, functional app. Publish it and test it with real users.
BONUS Step – Use Mailgun Validate to check for real emails
- Prompt Lovable to Validate Emails before sending
Add Email address verification using Mailgun Validate to ensure we don't send to invalid emails.
- Show the user a friendly error message for invalid emails and clearly mark the Email form field as invalid
- Never “throw” or log errors for invalid emails.
NOTE: Mailgun free accounts have a limited number of validations, if you want to deploy your app to production, check out Mailgun Pricing & Plans.
Part 2: Add Database Storage & Admin Features
Ready to turn your MVP into a real app? Add database storage, admin dashboard, and email replies.
Step 4: Set Up Database Storage in Lovable Cloud
Instructions:
- Prompt Lovable to Create Contacts Table:
Create a contacts table for the Contact Form with:
- id (UUID, primary key)
- name (text, required)
- email (text, required)
- message (text)
- created_at (timestamp, auto-set to now)
Then save contact form submissions to the contacts table. Keep the email sending working as before. - Confirm the schema is created by submitting the form and checking Cloud > Database (or click View Saved Contacts).
Step 5: Build Admin Dashboard with Authentication
Instructions:
- Prompt Lovable to setup Authentication:
Add email/password authentication to the app with:
- A login page accessible at /admin
- Logged in users see a placeholder page at /admin (to be created in the next step)
I will manually create admin users so no need for registration yet. - In Cloud > Users & Auth, manually add a test admin account.
- Prompt Lovable to create the admin dashboard:
Add email/password authentication to the app and create a /admin page that:
1. Prompts for login if not signed in (no sign up needed)
2. Is only accessible to authenticated users
3. Shows a table of all contacts with: name, email, message preview, submission date
4. Allows clicking a contact to see full message details
5. Has a logout button
Test by logging in and viewing the contacts you created in Step 4.
Step 6: Enable Admin Email Replies
Instructions:
- Prompt Lovable to Create a replies table:
Create a table called admin_replies with:
- id (UUID, primary key)
- contact_id (foreign key to contacts)
- subject (text)
- body (text)
- sent_at (timestamp)
- Prompt Lovable to Add reply UI to contact details:
In the contact detail view, add:
- Subject input field
- Body text area
- Reply templates dropdown with options like: "Thanks for reaching out!", "Quick question for you", "Let's schedule a call"
- Send button
- List of previously sent replies to this contact
- Prompt Lovable to Send Admin Reply:
Create an Edge Function called send_admin_reply that:
1. Receives contact_id, subject, and body as input
2. Fetches the contact's email
3. Sends an email via Mailgun with the subject and body
4. Saves the reply to admin_replies table with timestamp
5. Returns success/error
Wire the send button to call this function with loading and success indicators.
Test by sending a reply from the admin dashboard and verifying it arrives in your email.
Part 3: Add a Newsletter
Build a newsletter system with subscriber management and broadcast capability.
Step 7: Add Newsletter Signup
Instructions:
- Prompt Lovable to add signup section to landing page:
Add a newsletter signup section to the landing page with:
- An email input field
- A subscribe button
- Friendly copy encouraging signups - Prompt Lovable to Create subscribers table:
Create a subscribers table with:
- id (UUID, primary key)
- email (text, unique, required)
- subscribed_at (timestamp, auto-set to now)
- opted_in (boolean, default: false) - Prompt Lovable to Wire signup to send confirmation:
Create an Edge Function called send_newsletter_optin_email that:
1. Receives email as input
2. Adds email to subscribers table with opted_in = false
3. Sends a confirmation email to that address
4. Include a link to /confirm-newsletter?email=[email]
5. Returns success/error
Wire the newsletter form to call this function and show: "Check your email to confirm."
Test by signing up for the newsletter and confirming via the email link.
Step 8: Send Newsletter Broadcasts
Instructions:
- Prompt Lovable to Create newsletter admin page:
Create an /admin/newsletter page accessible only to authenticated admins with:
- Subject input
- Body text area
- Button showing "Send to X opted-in subscribers"
- Send button with confirmation dialog
- History table of sent newsletters
- Prompt Lovable to Create newsletter function:
Create an Edge Function called send_newsletter_broadcast that:
1. Receives subject and body as input
2. Fetches all subscribers where opted_in = true
3. Sends the email to each via Mailgun
4. Logs the broadcast (date, subject, count sent)
5. Returns summary: "Sent to X subscribers"
Wire the send button to call this function with a confirmation dialog, progress indicator, and final summary message.
Test by sending a newsletter and verifying opted-in subscribers receive it.
🚀 Full App Complete!
You've built a complete app with:
- Contact form with database storage
- Automated email confirmations
- Admin dashboard with authentication
- Admin email replies
- Newsletter signup with confirmation
- Newsletter broadcast capability
- Full email tracking via Mailgun
Best Practices & Deployment
Email Best Practices
- Always include a plain-text version of emails.
- Send from a recognizable address (e.g., support@yourdomain.com).
- Include unsubscribe links in newsletters.
- Monitor Mailgun dashboard for bounce rates and delivery issues.
Domain Setup
- Use a dedicated subdomain (e.g., mail.yourdomain.com) for email.
- Ensure SPF/DKIM/DMARC records are added to DNS.
- Verify domain status in Mailgun dashboard.
Security
- Store Mailgun API keys only in Cloud Secrets, never in code.
- Use authentication to protect admin pages.
- Restrict user signup by domain or manual approval.
Want to Go Further?
- Add email scheduling (send at specific times).
- Track email opens and clicks via Mailgun webhooks.
- Create email automation workflows.
- Build analytics dashboard showing email performance metrics.
- Add SMS as additional communication channel.
- Implement custom email templates.
FAQ
Do I need a paid Mailgun plan?
No. Mailgun's free tier (100 emails/day) is sufficient for this tutorial and testing. Upgrade to a paid plan when you exceed the limit.
How do I verify my domain in Mailgun?
- In Mailgun dashboard, go to Domains > Add New Domain.
- Enter your domain (e.g., mail.yourdomain.com).
- Add the DNS records (TXT, MX) provided by Mailgun to your DNS provider.
- Click Verify in Mailgun. Takes 5–30 minutes.
Why are my emails going to spam?
- Domain not verified in Mailgun.
- Missing plain-text version of email.
- Sending from unrecognizable address.
- No unsubscribe link in marketing emails.
- High bounce rates (check Mailgun dashboard for fixes).
Can I send marketing and transactional emails?
Yes. This tutorial covers both: transactional (confirmations, admin replies) and marketing (newsletters). Mailgun handles both automatically.
How do I manage newsletter unsubscribes?
Mailgun automatically tracks unsubscribes when users click the unsubscribe link. You can handle Mailgun webhooks to update your subscribers table, or manually manage it.
Can I schedule emails to send later?
Yes. Prompt Lovable to add scheduled sending via background jobs or cron-like functions. This is covered in "Want to Go Further" section.
How do I track email opens and clicks?
Mailgun provides webhook support. Prompt Lovable to create webhook handlers that listen for open/click events from Mailgun and log them to a tracking table. View metrics on an analytics dashboard.
Can I customize email content?
Yes. In each Edge Function (send_confirmation_email, send_admin_reply, etc.), you can customize the subject, body, and sender. Prompt Lovable to adjust email text as needed.
How do I test emails without sending?
Send test emails to your own address first. Check Mailgun logs to see all send attempts. This tutorial includes all the tools you need for testing.
What if I exceed the free tier limit?
Mailgun stops sending until the next day or you upgrade to a paid plan. For production apps, plan for paid tier usage.
Can I use this guide with Supabase directly instead of Lovable Cloud?
Yes. The database and authentication setup works with any Supabase project. Instead of using Lovable Cloud, you can connect a Supabase project directly via the integration settings. The Mailgun integration and Edge Functions remain the same.
Troubleshooting
"Failed to send email" error
- Check MAILGUN_API_KEY and MAILGUN_DOMAIN are set correctly in Cloud > Secrets.
- Verify your domain is verified in Mailgun dashboard.
- Check Mailgun Logs for detailed error messages.
- Ensure the recipient email is valid.
Emails going to spam
- Verify SPF/DKIM/DMARC records in your DNS.
- Include plain-text version.
- Use recognizable sender address.
- Check Mailgun's Deliverability Insights for tips.
Resources
- Mailgun Docs: https://documentation.mailgun.com
- Lovable Cloud Docs: https://docs.lovable.dev/features/cloud
- Lovable Docs: https://docs.lovable.dev
Need Support?
Our Support Team here at Sinch Mailgun is happy to help! Reach out to us in the Support page of your Mailgun Control Panel, and we'll be with you shortly!