Erste Schritte
Das Templatical SDK ist eine JavaScript-Bibliothek, die einen vollständigen E-Mail-Vorlagen-Editor in Ihr Produkt einbettet. Ihre Benutzer können responsive E-Mail-Vorlagen visuell gestalten und als rohes HTML exportieren — alles ohne Ihre Anwendung zu verlassen.
Hauptfunktionen
- Drag-and-Drop-Editor — Blockbasierte Oberfläche mit Text, Bildern, Buttons, Videos, Social-Links, Trennlinien, Abstandshaltern und benutzerdefiniertem HTML
- Responsive Vorschau — Vorschau auf Desktop, Tablet und Mobilgeräten
- Medienbibliothek — Bildverwaltung mit Ordnern, Suche, Zuschneiden und Upload
- Versionierung — Automatische Snapshots mit Versionsverlauf und Wiederherstellung
- Merge-Tags — Dynamische Variablen wie
{{first_name}}mit Syntax-Preset-Unterstützung - Anzeigebedingungen — Blöcke basierend auf Empfängerdaten bedingt anzeigen oder ausblenden
- HTML- & MJML-Export — Produktionsbereites HTML oder MJML-Quelltext
- Test-E-Mails — Test-E-Mails direkt aus dem Editor versenden
- Auto-Speicherung — Konfigurierbares automatisches Speichern mit Debounce-Steuerung
- Theming — Editor an Ihre Marke anpassen
- Benutzerdefinierte Blöcke — Domänenspezifische Inhaltsblöcke (Produktkarten, Veranstaltungslisten usw.) mit deklarativer Konfiguration definieren
- Lokalisierung — Englisch und Deutsch integriert, weitere Sprachen folgen
Wie es funktioniert
Das SDK folgt einem sicheren Backend-Proxy-Authentifizierungsmuster:
- Ihr Frontend lädt das SDK und teilt ihm mit, wo ein Access Token abgerufen werden kann
- Ihr Backend sendet Ihre API-Zugangsdaten an den Templatical-Token-Endpunkt (
POST https://templatical.com/api/v1/auth/token) und leitet das Access Token an das SDK weiter - Das SDK verwendet das Token, um direkt mit der Templatical API zu kommunizieren
- Ihre Benutzer erstellen und bearbeiten Vorlagen mit dem visuellen Editor
- Beim Speichern löst das SDK einen Callback mit dem rohen HTML aus, das Ihre Anwendung speichern und verwenden kann
Ihre API-Zugangsdaten bleiben sicher auf Ihrem Server. Das SDK erhält nur kurzlebige Access Tokens.
Schnellbeispiel
Das SDK benötigt ein Container-Element zum Rendern. Der Container muss im DOM vorhanden sein, bevor init() aufgerufen wird.
<div id="email-editor"></div>Übergeben Sie einen CSS-Selektor-String, um den Editor an den Container zu binden:
import { init } from '@templatical/embedded';
const editor = await init({
container: '#email-editor',
auth: {
url: 'https://your-app.com/api/token',
},
onSave: (result) => {
console.log('Gespeichertes HTML:', result.html);
},
});Konzepte
Projekte
Ein Projekt entspricht einem Produkt oder einer Anwendung in Ihrem System. Jedes Projekt hat eigene API-Schlüssel, Einstellungen und Planlimits. Wenn Sie mehrere Produkte haben, die E-Mail-Bearbeitung benötigen, erstellen Sie für jedes ein separates Projekt.
Mandanten (Tenants)
Ein Mandant repräsentiert einen isolierten Benutzer oder eine Organisation innerhalb Ihres Produkts. Vorlagen, Medien und Speicher sind pro Mandant getrennt — unsichtbar für andere Mandanten.
Zum Beispiel, wenn Ihr Produkt eine Eventmanagement-Plattform ist:
- Projekt = Ihre Eventmanagement-Plattform
- Mandant = Jeder Eventveranstalter (Ihr Kunde)
Vorlagen
Eine Vorlage ist ein E-Mail-Design, das als strukturierter Inhalt (Blöcke und Einstellungen) gespeichert wird. Vorlagen können von Grund auf erstellt, per ID geladen, als HTML exportiert und mit automatischen Snapshots versioniert werden.
Blöcke
Vorlagen bestehen aus Blöcken — ziehbaren Inhaltselementen:
| Block | Beschreibung |
|---|---|
| Bereich | Layout-Container mit 1, 2 oder 3 Spalten-Konfigurationen |
| Text | Rich-Text mit Formatierung (fett, kursiv, Links, Farben, Ausrichtung) |
| Bild | Responsive Bilder mit optionalen Links und Alt-Text |
| Button | Call-to-Action-Buttons mit anpassbaren Farben und Eckenradius |
| Trennlinie | Horizontale Linien (durchgezogen, gestrichelt oder gepunktet) |
| Video | YouTube/Vimeo-Thumbnails mit Click-to-Play-Links |
| Abstandshalter | Vertikaler Abstand mit konfigurierbarer Höhe |
| Social | Social-Media-Icons für über 16 Plattformen |
| HTML | Benutzerdefinierter HTML-Code (in unterstützten Plänen verfügbar) |
| Benutzerdefiniert | Vom Consumer definierte Blöcke mit benutzerdefinierten Feldern und Liquid-Templates (Scale-Plan) |
Nächste Schritte
- Installation — SDK über CDN oder npm installieren
- Authentifizierung — Backend-Token-Endpunkt einrichten
- Konfiguration — Alle Konfigurationsoptionen, Callbacks und Instanzmethoden
- Merge-Tags — Dynamische Variablen und Syntax-Presets konfigurieren
- Anzeigebedingungen — Bedingte Sichtbarkeit auf Blockebene
- Benutzerdefinierte Blöcke — Domänenspezifische Inhaltsblöcke definieren