webideas24/help-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - Help Service for Coolify

Browse Source
This commit is contained in:
Joseph Kisler
2025-12-17 10:08:16 +01:00
commit a998c47132
57 changed files with 7104 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

338
content/email_templates.md Normal file
View File

@@ -0,0 +1,338 @@
---
id: email_templates
title: E-Mail Vorlagen
icon: file-earmark-text
description: Vorlagen fuer automatische E-Mails gestalten und anpassen
section: E-Mail System
tags: [E-Mail, Vorlagen, Templates, Styling, Design]
related: [emails, email-platzhalter, booking, general]
order: 31
---
# E-Mail Vorlagen
## Verfuegbare Vorlagen
| Vorlage | Wird gesendet bei |
|---------|-------------------|
| **Buchungsbestaetigung** | Neue Buchung eingegangen |
| **Zahlungsbestaetigung** | Zahlung erhalten |
| **Stornierungsbestaetigung** | Buchung storniert |
| **Erinnerung** | X Tage vor Kursbeginn |
| **Video-Zugang** | Nach Freischaltung (Produktart C/D) |
| **Admin-Benachrichtigung** | Neue Buchung (an Admin) |
---
## Automatischer Header & Footer
Alle E-Mails erhalten automatisch einen professionellen Header und Footer.
### Header (automatisch)
Der Header zeigt Ihr **Firmenlogo** zentriert an. Das Logo wird in dieser Reihenfolge gesucht:
1. **E-Mail Logo** - Einstellungen > Allgemein > E-Mail Logo
2. **Firmenlogo** - Einstellungen > Allgemein > Firmenlogo
3. **WordPress Logo** - Theme-Customizer > Website-Identitaet > Logo
> **Tipp:** Fuer beste Ergebnisse nutzen Sie ein Logo mit transparentem Hintergrund (PNG) in mindestens 400px Breite.
### Footer (automatisch)
Der Footer enthaelt automatisch:
- Firmenname
- E-Mail-Adresse
- Telefonnummer (falls hinterlegt)
- Copyright mit aktuellem Jahr
Diese Daten werden aus **Einstellungen > Allgemein** bezogen.
---
## E-Mail Struktur
Jede E-Mail hat folgenden Aufbau:
```
+----------------------------------+
| [LOGO] | <- Automatischer Header
+----------------------------------+
| |
| Ihr E-Mail-Inhalt | <- Vorlage-Editor
| (frei gestaltbar) |
| |
+----------------------------------+
| Firmenname | kontakt@email.de | <- Automatischer Footer
| (c) 2025 |
+----------------------------------+
```
---
## HTML-Styling im Editor
### Erlaubte HTML-Elemente
Sie koennen folgende HTML-Tags im Vorlagen-Editor verwenden:
| Kategorie | Tags |
|-----------|------|
| **Text** | `<p>`, `<br>`, `<strong>`, `<b>`, `<em>`, `<i>`, `<u>`, `<s>` |
| **Ueberschriften** | `<h1>`, `<h2>`, `<h3>`, `<h4>` |
| **Listen** | `<ul>`, `<ol>`, `<li>` |
| **Links** | `<a href="...">` |
| **Bilder** | `<img src="..." alt="...">` |
| **Tabellen** | `<table>`, `<tr>`, `<td>`, `<th>`, `<thead>`, `<tbody>` |
| **Container** | `<div>`, `<span>` |
| **Trennlinien** | `<hr>` |
### Inline-Styles verwenden
E-Mail-Clients unterstuetzen **keine externen CSS-Dateien**. Nutzen Sie daher immer Inline-Styles:
```html
<!-- RICHTIG: Inline-Style -->
<p style="color: #333; font-size: 16px;">
Ihr Text hier
</p>
<!-- FALSCH: CSS-Klasse (wird ignoriert) -->
<p class="text-gray">
Ihr Text hier
</p>
```
---
## Styling-Beispiele
### Hervorgehobene Box
```html
<div style="background-color: #f0f7ff; border-left: 4px solid #0066cc; padding: 15px; margin: 20px 0;">
<strong>Wichtig:</strong> Bitte bringen Sie bequeme Kleidung mit.
</div>
```
**Ergebnis:**
> Blaue Info-Box mit linkem Rand
### Tabelle fuer Buchungsdetails
```html
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
<tr style="background-color: #f5f5f5;">
<td style="padding: 10px; border: 1px solid #ddd;"><strong>Kurs</strong></td>
<td style="padding: 10px; border: 1px solid #ddd;">{kurs_titel}</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #ddd;"><strong>Datum</strong></td>
<td style="padding: 10px; border: 1px solid #ddd;">{kurs_datum}</td>
</tr>
<tr style="background-color: #f5f5f5;">
<td style="padding: 10px; border: 1px solid #ddd;"><strong>Preis</strong></td>
<td style="padding: 10px; border: 1px solid #ddd;">{gesamtpreis}</td>
</tr>
</table>
```
### Button-Link
```html
<p style="text-align: center; margin: 30px 0;">
<a href="{bestaetigung_link}"
style="background-color: #0066cc; color: #ffffff; padding: 12px 30px;
text-decoration: none; border-radius: 5px; display: inline-block;">
Buchung bestaetigen
</a>
</p>
```
### Farbige Ueberschrift
```html
<h2 style="color: #0066cc; border-bottom: 2px solid #0066cc; padding-bottom: 10px;">
Ihre Buchungsbestaetigung
</h2>
```
---
## Best Practices
### Allgemeine Regeln
| Regel | Empfehlung |
|-------|------------|
| **Breite** | Max. 600px (wird automatisch gesetzt) |
| **Schriftgroesse** | Min. 14px fuer Fliesstext |
| **Zeilenhoehe** | 1.5 bis 1.6 fuer bessere Lesbarkeit |
| **Farben** | Ausreichend Kontrast (dunkel auf hell) |
| **Bilder** | Immer `alt`-Text angeben |
### Empfohlene Farbpalette
| Verwendung | Farbe | Code |
|------------|-------|------|
| **Primaer** | Blau | `#0066cc` |
| **Erfolg** | Gruen | `#28a745` |
| **Warnung** | Gelb | `#ffc107` |
| **Fehler** | Rot | `#dc3545` |
| **Text** | Dunkelgrau | `#333333` |
| **Hintergrund** | Hellgrau | `#f5f5f5` |
### Schriftarten
Nutzen Sie **websichere Schriftarten**, da individuelle Fonts nicht geladen werden:
```html
<p style="font-family: Arial, Helvetica, sans-serif;">
Ihr Text
</p>
```
**Empfohlene Fonts:**
- Arial, Helvetica, sans-serif
- Georgia, Times New Roman, serif
- Verdana, Geneva, sans-serif
---
## Komplettes Beispiel-Template
```html
<h2 style="color: #0066cc; margin-bottom: 20px;">
Hallo {vorname},
</h2>
<p style="font-size: 16px; line-height: 1.6; color: #333;">
vielen Dank fuer Ihre Buchung! Hier sind Ihre Details:
</p>
<table style="width: 100%; border-collapse: collapse; margin: 25px 0;">
<tr style="background-color: #0066cc; color: #ffffff;">
<th style="padding: 12px; text-align: left;" colspan="2">
Buchungsdetails
</th>
</tr>
<tr>
<td style="padding: 10px; border-bottom: 1px solid #eee; width: 40%;">
<strong>Kurs:</strong>
</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;">
{kurs_titel}
</td>
</tr>
<tr>
<td style="padding: 10px; border-bottom: 1px solid #eee;">
<strong>Datum:</strong>
</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;">
{kurs_datum}
</td>
</tr>
<tr>
<td style="padding: 10px; border-bottom: 1px solid #eee;">
<strong>Uhrzeit:</strong>
</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;">
{kurs_zeit}
</td>
</tr>
<tr>
<td style="padding: 10px; border-bottom: 1px solid #eee;">
<strong>Ort:</strong>
</td>
<td style="padding: 10px; border-bottom: 1px solid #eee;">
{kurs_ort}
</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td style="padding: 10px;">
<strong>Gesamtpreis:</strong>
</td>
<td style="padding: 10px; font-size: 18px; color: #0066cc;">
<strong>{gesamtpreis}</strong>
</td>
</tr>
</table>
<div style="background-color: #fff3cd; border: 1px solid #ffc107;
padding: 15px; border-radius: 5px; margin: 20px 0;">
<strong>Hinweis:</strong> Bitte bestaetigen Sie Ihre Buchung
innerhalb von 48 Stunden.
</div>
<p style="text-align: center; margin: 30px 0;">
<a href="{bestaetigung_link}"
style="background-color: #28a745; color: #ffffff;
padding: 15px 40px; text-decoration: none;
border-radius: 5px; font-size: 16px; display: inline-block;">
Jetzt bestaetigen
</a>
</p>
<p style="font-size: 14px; color: #666; margin-top: 30px;">
Bei Fragen stehen wir Ihnen gerne zur Verfuegung.
</p>
<p style="font-size: 16px; color: #333;">
Mit freundlichen Gruessen<br>
<strong>{firma}</strong>
</p>
```
---
## Haeufige Probleme
### Styles werden nicht angezeigt
**Problem:** Formatierungen erscheinen nicht in der E-Mail.
**Loesung:** Pruefen Sie, ob Sie Inline-Styles verwenden. CSS-Klassen funktionieren nicht.
### Bilder werden nicht geladen
**Problem:** Eingefuegte Bilder erscheinen nicht.
**Loesungen:**
1. Verwenden Sie **vollstaendige URLs** (https://...)
2. Bilder muessen oeffentlich zugaenglich sein
3. Fuegen Sie immer einen `alt`-Text hinzu
### Layout ist verschoben
**Problem:** Spalten/Tabellen sehen falsch aus.
**Loesung:** Nutzen Sie feste Pixelwerte statt Prozent und testen Sie in verschiedenen E-Mail-Clients.
---
## Platzhalter verwenden
In allen Vorlagen koennen Sie Platzhalter nutzen:
```
Hallo {vorname} {nachname},
Ihre Buchung fuer "{kurs_titel}" am {kurs_datum} wurde bestaetigt.
Mit freundlichen Gruessen
{firma}
```
> **Siehe auch:** [E-Mail Platzhalter](/topic/email-platzhalter) fuer eine vollstaendige Liste aller verfuegbaren Platzhalter.
---
## Testen
Testen Sie Ihre Vorlagen vor dem Live-Einsatz:
1. Erstellen Sie eine **Test-Buchung** mit Ihrer eigenen E-Mail
2. Pruefen Sie die E-Mail in verschiedenen Clients (Gmail, Outlook, Apple Mail)
3. Testen Sie auch die **mobile Ansicht**