Replace all marketing placeholder content with real MYeasyCMS content
- Logo: Replace generic Makerkit SVG with MYeasyCMS branded logo (grid icon + styled text) - Blog: Replace 3 SaaS placeholder posts with 5 real articles (Vereinsverwaltung, SEPA, Website, DSGVO, Mitglieder-Tipps) - Changelog: Replace 6 generic entries with real feature announcements (Verbandsverwaltung, Fischerei, Dateien, Kurse, Einladungen, i18n) - Documentation: Rewrite all 20 docs from Makerkit references to MYeasyCMS content - FAQ: Replace 6 generic SaaS questions with 10 real MYeasyCMS questions - Navigation: Replace Changelog link with Contact in main nav - Footer: Reorganize into Product/Company/Legal sections - Translations: Update all EN marketing strings to match real Com.BISS content
This commit is contained in:
Zaid Marzguioui
@@ -1,279 +1,37 @@
|
||||
---
|
||||
title: "Features Overview"
|
||||
description: "Send emails and notifications to your users."
|
||||
title: "E-Mail & Newsletter"
|
||||
description: "Kommunizieren Sie mit Ihren Mitgliedern per E-Mail und Newsletter — direkt aus MYeasyCMS."
|
||||
publishedAt: 2024-04-11
|
||||
order: 0
|
||||
order: 1
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
MYeasyCMS integriert E-Mail-Kommunikation und Newsletter-Versand direkt in die Vereinsverwaltung.
|
||||
|
||||
The application includes email functionality for transactional messages and user notifications.
|
||||
## Newsletter erstellen
|
||||
|
||||
## Email Configuration
|
||||
Erstellen Sie Newsletter mit dem integrierten Editor:
|
||||
|
||||
### Supabase Email (Default)
|
||||
1. **Kampagne anlegen** — Betreff und Absender festlegen
|
||||
2. **Inhalt gestalten** — Text, Bilder und Formatierungen hinzufügen
|
||||
3. **Empfänger wählen** — Alle Mitglieder, einzelne Abteilungen oder manuelle Auswahl
|
||||
4. **Vorschau prüfen** — So sieht der Newsletter im Posteingang aus
|
||||
5. **Versenden** — Sofort oder zu einem geplanten Zeitpunkt
|
||||
|
||||
By default, emails are sent through Supabase:
|
||||
- Authentication emails (sign-up, password reset, magic links)
|
||||
- Email verification
|
||||
- Email change confirmation
|
||||
## Abonnentenverwaltung
|
||||
|
||||
### Custom SMTP
|
||||
- **Anmeldung** — Neue Abonnenten über die Vereinswebsite mit Double-Opt-In
|
||||
- **Abmeldung** — Automatischer Abmeldelink in jeder E-Mail
|
||||
- **Statusverfolgung** — Aktive und inaktive Abonnenten im Überblick
|
||||
|
||||
For transactional emails, configure your own SMTP provider:
|
||||
## Vorlagen
|
||||
|
||||
```bash
|
||||
# .env
|
||||
SMTP_HOST=smtp.example.com
|
||||
SMTP_PORT=587
|
||||
SMTP_USER=your-username
|
||||
SMTP_PASSWORD=your-password
|
||||
SMTP_FROM_EMAIL=noreply@yourdomain.com
|
||||
SMTP_FROM_NAME=Your App Name
|
||||
```
|
||||
Erstellen Sie Vorlagen für wiederkehrende Newsletter — zum Beispiel den monatlichen Vereinsrundbrief oder Einladungen zu Veranstaltungen.
|
||||
|
||||
## Sending Emails
|
||||
## Datenschutz
|
||||
|
||||
### Using the Email Service
|
||||
Der Newsletter-Versand entspricht den DSGVO-Anforderungen:
|
||||
|
||||
```typescript
|
||||
import { sendEmail } from '~/lib/email/send-email';
|
||||
|
||||
await sendEmail({
|
||||
to: 'user@example.com',
|
||||
subject: 'Welcome to Our App',
|
||||
html: '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
|
||||
});
|
||||
```
|
||||
|
||||
### Using Email Templates
|
||||
|
||||
Create reusable email templates:
|
||||
|
||||
```typescript
|
||||
// lib/email/templates/welcome-email.tsx
|
||||
import { EmailTemplate } from '~/lib/email/email-template';
|
||||
|
||||
interface WelcomeEmailProps {
|
||||
name: string;
|
||||
loginUrl: string;
|
||||
}
|
||||
|
||||
export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
|
||||
return (
|
||||
<EmailTemplate>
|
||||
<h1>Welcome, {name}!</h1>
|
||||
<p>We're excited to have you on board.</p>
|
||||
<a href={loginUrl}>Get Started</a>
|
||||
</EmailTemplate>
|
||||
);
|
||||
}
|
||||
|
||||
// Send the email
|
||||
import { render } from '@react-email/render';
|
||||
import { WelcomeEmail } from '~/lib/email/templates/welcome-email';
|
||||
|
||||
const html = render(
|
||||
<WelcomeEmail name="John" loginUrl="https://app.com/login" />
|
||||
);
|
||||
|
||||
await sendEmail({
|
||||
to: 'john@example.com',
|
||||
subject: 'Welcome to Our App',
|
||||
html,
|
||||
});
|
||||
```
|
||||
|
||||
## Email Types
|
||||
|
||||
### Transactional Emails
|
||||
|
||||
Emails triggered by user actions:
|
||||
- Welcome emails
|
||||
- Order confirmations
|
||||
- Password resets
|
||||
- Account notifications
|
||||
- Billing updates
|
||||
|
||||
### Marketing Emails
|
||||
|
||||
Promotional and engagement emails:
|
||||
- Product updates
|
||||
- Feature announcements
|
||||
- Newsletters
|
||||
- Onboarding sequences
|
||||
|
||||
## Email Providers
|
||||
|
||||
### Recommended Providers
|
||||
|
||||
**Resend** - Developer-friendly email API
|
||||
```bash
|
||||
npm install resend
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { Resend } from 'resend';
|
||||
|
||||
const resend = new Resend(process.env.RESEND_API_KEY);
|
||||
|
||||
await resend.emails.send({
|
||||
from: 'noreply@yourdomain.com',
|
||||
to: 'user@example.com',
|
||||
subject: 'Welcome',
|
||||
html: emailHtml,
|
||||
});
|
||||
```
|
||||
|
||||
**SendGrid** - Comprehensive email platform
|
||||
```bash
|
||||
npm install @sendgrid/mail
|
||||
```
|
||||
|
||||
```typescript
|
||||
import sgMail from '@sendgrid/mail';
|
||||
|
||||
sgMail.setApiKey(process.env.SENDGRID_API_KEY);
|
||||
|
||||
await sgMail.send({
|
||||
to: 'user@example.com',
|
||||
from: 'noreply@yourdomain.com',
|
||||
subject: 'Welcome',
|
||||
html: emailHtml,
|
||||
});
|
||||
```
|
||||
|
||||
**Postmark** - Fast transactional email
|
||||
```bash
|
||||
npm install postmark
|
||||
```
|
||||
|
||||
## In-App Notifications
|
||||
|
||||
### Notification System
|
||||
|
||||
Send in-app notifications to users:
|
||||
|
||||
```typescript
|
||||
import { createNotification } from '~/lib/notifications';
|
||||
|
||||
await createNotification({
|
||||
userId: user.id,
|
||||
title: 'New Message',
|
||||
message: 'You have a new message from John',
|
||||
type: 'info',
|
||||
link: '/messages/123',
|
||||
});
|
||||
```
|
||||
|
||||
### Notification Types
|
||||
|
||||
```typescript
|
||||
type NotificationType = 'info' | 'success' | 'warning' | 'error';
|
||||
|
||||
await createNotification({
|
||||
userId: user.id,
|
||||
title: 'Payment Successful',
|
||||
message: 'Your subscription has been renewed',
|
||||
type: 'success',
|
||||
});
|
||||
```
|
||||
|
||||
### Fetching Notifications
|
||||
|
||||
```typescript
|
||||
import { getUserNotifications } from '~/lib/notifications';
|
||||
|
||||
const notifications = await getUserNotifications(userId, {
|
||||
limit: 10,
|
||||
unreadOnly: true,
|
||||
});
|
||||
```
|
||||
|
||||
### Marking as Read
|
||||
|
||||
```typescript
|
||||
import { markNotificationAsRead } from '~/lib/notifications';
|
||||
|
||||
await markNotificationAsRead(notificationId);
|
||||
```
|
||||
|
||||
## Real-time Notifications
|
||||
|
||||
Use Supabase Realtime for instant notifications:
|
||||
|
||||
```typescript
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useSupabase } from '@kit/supabase/hooks/use-supabase';
|
||||
|
||||
export function NotificationListener() {
|
||||
const supabase = useSupabase();
|
||||
|
||||
useEffect(() => {
|
||||
const channel = supabase
|
||||
.channel('notifications')
|
||||
.on(
|
||||
'postgres_changes',
|
||||
{
|
||||
event: 'INSERT',
|
||||
schema: 'public',
|
||||
table: 'notifications',
|
||||
filter: `user_id=eq.${userId}`,
|
||||
},
|
||||
(payload) => {
|
||||
// Show toast notification
|
||||
toast.info(payload.new.title);
|
||||
}
|
||||
)
|
||||
.subscribe();
|
||||
|
||||
return () => {
|
||||
supabase.removeChannel(channel);
|
||||
};
|
||||
}, [supabase]);
|
||||
|
||||
return null;
|
||||
}
|
||||
```
|
||||
|
||||
## Email Templates Best Practices
|
||||
|
||||
1. **Keep it simple** - Plain text and minimal HTML
|
||||
2. **Mobile responsive** - Most emails are read on mobile
|
||||
3. **Clear CTAs** - Make action buttons prominent
|
||||
4. **Personalize** - Use user's name and relevant data
|
||||
5. **Test rendering** - Check across email clients
|
||||
6. **Include plain text** - Always provide text alternative
|
||||
7. **Unsubscribe link** - Required for marketing emails
|
||||
|
||||
## Testing Emails
|
||||
|
||||
### Local Development
|
||||
|
||||
In development, emails are caught by InBucket:
|
||||
|
||||
```
|
||||
http://localhost:54324
|
||||
```
|
||||
|
||||
### Preview Emails
|
||||
|
||||
Use React Email to preview templates:
|
||||
|
||||
```bash
|
||||
npm run email:dev
|
||||
```
|
||||
|
||||
Visit `http://localhost:3001` to see email previews.
|
||||
|
||||
## Deliverability Tips
|
||||
|
||||
1. **Authenticate your domain** - Set up SPF, DKIM, DMARC
|
||||
2. **Warm up your domain** - Start with low volumes
|
||||
3. **Monitor bounce rates** - Keep below 5%
|
||||
4. **Avoid spam triggers** - Don't use all caps, excessive punctuation
|
||||
5. **Provide value** - Only send relevant, useful emails
|
||||
6. **Easy unsubscribe** - Make it one-click simple
|
||||
- Double-Opt-In für die Anmeldung
|
||||
- Dokumentation der Einwilligung
|
||||
- Einfache Abmeldemöglichkeit in jeder E-Mail
|
||||
|
||||
Reference in New Issue
Block a user