SaaS · E-Mail-Marketing
Einbettbarer E-Mail-Editor: KI-generierte Templates, visueller Editor und Render-Pipeline in einem Produkt
Ein Drag-and-Drop-E-Mail-Editor, den Softwareplattformen in ihr eigenes Produkt einbetten. Die KI entwirft einen Layoutplan, ein fester Compiler baut die E-Mail aus markengerechten Sektionen, ein Render-Service liefert clientsicheres HTML.
- Branche
- SaaS · E-Mail-Marketing
- Technologien
- Laravel 11 · PostgreSQL 16 with row-level security · Redis
Ausgangslage
Ein Anbieter von Marketing-Software wollte einen eigenen E-Mail-Builder, statt einen zu lizenzieren: einen Editor, den seine Kunden direkt im Produkt nutzen, den andere SaaS-Plattformen unter ihrer eigenen Marke einbetten können und der mit KI einen brauchbaren ersten Entwurf liefert. Zwei Punkte schlossen die naheliegenden Abkürzungen aus. E-Mails müssen in Outlook, Gmail und Apple Mail gleich aussehen, frei von einem Modell geschriebenes HTML kam also nicht in Frage. Und die Templates, Brand Kits und API-Schlüssel jedes Kunden mussten strikt von denen aller anderen getrennt bleiben.
Lösung
Wir haben das Produkt als Gruppe von Services mit einem gemeinsamen Vertrag gebaut. Ein JSON Schema legt fest, was ein Template ist: Die API validiert jedes Speichern dagegen, und der Render-Service validiert jedes Rendering gegen dieselbe Datei. Die KI schreibt nie HTML. Sie liefert einen kurzen Blueprint, also welche Sektionen verwendet werden und welcher Text hineinkommt, und ein deterministischer Compiler setzt die E-Mail aus 16 Sektionsmustern mit den Farben und Schriften der Marke zusammen, bevor ein Linter das Ergebnis prüft. Der visuelle Editor arbeitet auf demselben Blockmodell, sodass eine generierte E-Mail vollständig bearbeitbar bleibt. Das Rendering läuft in fünf Stufen: validieren, auflösen, transformieren, mit MJML kompilieren, dann nachbearbeiten und bereinigen.
Wie es zusammenhängt
- 01 Briefing
- 02 KI-Blueprint
- 03 Pattern-Compiler
- 04 Visueller Editor
- 05 MJML-Rendering
- 06 Einbetten oder exportieren
Was wir geliefert haben
- Drag-and-Drop-Editor mit 15 Blocktypen, Layouts mit bis zu sechs Spalten, Rich Text mit Slash-Menü, Rückgängig und Wiederholen, Kontrastprüfung und Auswahl für Merge-Tags
- KI-Chat, KI-Bearbeitung direkt im Text, Vorschläge für Betreffzeile, Preheader und Call-to-Action, ein Spam-Check und ein Profil der Markenstimme, das aus bisherigen E-Mails gelernt wird
- KI-Generierung von Templates über einen Blueprint und einen Pattern-Compiler, gefolgt von einem Qualitäts-Linter
- Eine Bibliothek mit über 100 fertigen Sektionen sowie gespeicherte Module, die über alle Templates synchron bleiben, mit Versionsverlauf und Konfliktbehandlung
- Render-Service, der Templates in E-Mail-HTML umwandelt, einschliesslich animierter Countdown-Bilder
- Import aus HTML-Dateien und aus Exporten anderer E-Mail-Builder, inklusive Massenimport von ZIP-Archiven über eine Warteschlange
- Kundenportal, Template-Galerie, ausgehende Webhooks und ein einbettbares Widget, ausgeliefert als iframe, als Script-Loader und als React-Komponente
- Über 1'200 automatisierte Tests über alle Services hinweg
Funktionen
- Mandantentrennung mit Row-Level Security in PostgreSQL und Cache-Präfixen pro Mandant
- Ein einziges JSON Schema validiert Templates sowohl in der API als auch im Render-Service
- REST-API mit Fehlerantworten nach RFC 7807, Updates per JSON Merge Patch, Cursor-Paginierung und Idempotency Keys
- Die gesamte gerenderte Ausgabe wird mit DOMPurify bereinigt, auch Markdown im KI-Chat
- Signierte Webhooks mit SSRF-Schutz, IP-Pinning, Wiederholungen mit Back-off und Rotation des Secrets mit Übergangsfrist
- Anmeldung im Widget mit kurzlebigen Tokens, die nie in einer URL erscheinen; Nachrichten gehen nur an den deklarierten Parent-Origin
- Drei Ebenen der KI-Kostenkontrolle pro Mandant und ein zweiter Modellanbieter als Failover
- Jeder Push auf Staging durchläuft zuerst Typprüfung, Linting und alle Testsuiten
- Lokalisierte Oberfläche mit Unterstützung für Layouts von rechts nach links
Integrationen
- Anthropic API, mit einem zweiten Modellanbieter als Failover
- API der Host-Plattform für Merge-Tags, Kontakte und Testversand
- Objektspeicher für Bilder und gerenderte Assets
- Ausgehende Webhooks für Template-Ereignisse
Technologien
Ergebnis
Läuft auf einer Staging-Umgebung, alle Services sind live: API, Render-Service, KI-Service, Kundenportal und Widget. Produktivhosting, Abrechnung und die Härtung des Widgets folgen in der nächsten Phase; dieses Referenzprojekt wird aktualisiert, sobald das Produkt in Produktion geht.
Warum schreibt die KI kein HTML?
E-Mail-Clients stellen HTML bis heute unterschiedlich dar, und ein Modell, das Markup frei schreibt, erzeugt E-Mails, die in Outlook zerfallen oder auf dem Smartphone ihr Layout verlieren. Deshalb trifft das Modell die Entscheide, die eine Texterin und ein Layouter treffen würden: welche Sektionen, in welcher Reihenfolge, mit welchen Worten. Den Rest erledigt Code. Der Compiler verwendet nur getestete Sektionsmuster und das Brand Kit, und das Ergebnis durchläuft dieselbe Validierung und denselben Render-Pfad wie eine von Hand gebaute E-Mail. Jedes generierte Template lässt sich zudem öffnen und Block für Block bearbeiten.
Projekt besprechen
Erzählen Sie uns von Ihrem Projekt