Inhaltsverzeichnis

Eine professionelle E-Mail-Signatur ist mehr als ein Pflichtfeld am Ende einer Nachricht. Sie transportiert Markenidentität, schafft Vertrauen und liefert dem Empfänger auf einen Blick alle relevanten Kontaktinformationen. Soweit die Theorie. In der Praxis sieht es in vielen Unternehmen leider anders aus: Die Signatur existiert irgendwo als Word-Dokument auf einem Netzlaufwerk, als Screenshot in einem Teams-Chat oder als .msg-Datei, die beim nächsten Kollegen schon wieder anders aussieht als beim Absender.

Das Ergebnis: Jeder hat „irgendwie“ eine Signatur, aber keine davon sieht gleich aus.

HTML-Signaturen: einmal sauber, überall konsistent

Eine HTML-Signatur löst diese Probleme strukturell. Statt formatiertem Text, der bei jedem Kopiervorgang neu interpretiert wird, liegt die Signatur als sauber definierter Code vor. Layout, Schriftart, Farben, Abstände und das Logo sind pixelgenau festgelegt, unabhängig davon, wer die Signatur wo einfügt. Mit den Formeln in humbee lässt sich so die Signatur dann auch dynamisch auf die einzelnen Personen im Unternehmen zuschneiden!

Das bedeutet konkret:

Outlook, Apple Mail, Gmail, Thunderbird: überall identisches Ergebnis
Kein Formatierungsroulette beim Einfügen, der Code bleibt Code, bis der Mail-Client ihn rendert
Professionelles Erscheinungsbild ohne Abhängigkeit vom Geschick des einzelnen Mitarbeiters

Was man in diesem Tutorial lernt

In diesem Artikel zeigen wir, wie man HTML-Signaturen direkt in humbee hinterlegt, sodass alle ausgehenden E-Mails aus humbee heraus automatisch mit der richtigen, aktuellen Signatur versehen werden.

Damit nicht zwingend HTML-Kenntnisse benötigen werden, haben wir außerdem ein einfaches Signatur-Tool in diesen Artikel integriert. Damit erstellt man individuelle HTML-Signatur in wenigen Minuten direkt im Browser, mit dem eigenen Logo, den Kontaktdaten und den Corporate-Farben. Das fertige HTML kann dann anschließend sowohl in humbee als auch in Outlook, Apple Mail oder einem anderen E-Mail-Client hinterlegt werden. Es müssen dazu für die humbee Umgebung entsprechend Anpassungen durch die Verwendung der Formeln statt der festen Namen verwendet werden.

Konfiguration

Vorlage

Persönlich

Vollständiger Name *

Position

Abteilung

Unternehmen

Firmenname

Website

Kontakt

E-Mail

Telefon

Mobil

Ort / Adresse

Kanäle

Xing

Instagram

YouTube

Custom Links

Link 1 – Text

Link 1 – URL

Link 2 – Text

Link 2 – URL

Bilder

Logo – Light Mode

Logo – Dark Mode

Profilbild

Profilbild-Größe

Design

Akzentfarbe

Schriftart

Event / Promo-Modul Promo-Banner aktivieren

Titel

Text / Untertitel

Button-Text

CTA-Link

Event-Farbe

Vorschau & Export

✓ Kopiert!

E-Mail Signatur ${sigHTML} `; const blob = new Blob([full], { type: 'text/html;charset=utf-8' }); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'signatur.html'; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 5000); } // ─── Render ────────────────────────────────────────────────────── function render() { const html = buildSignatureHTML(); document.getElementById('preview-output').innerHTML = html; document.getElementById('code-output').textContent = html; } // ─── Copy ──────────────────────────────────────────────────────── function copyHTML() { const html = buildSignatureHTML(); const done = () => { const el = document.getElementById('feedback'); el.classList.add('visible'); setTimeout(() => el.classList.remove('visible'), 2400); }; navigator.clipboard.writeText(html).then(done).catch(() => { const ta = document.createElement('textarea'); ta.value = html; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); done(); }); } function toggleCode() { showCode = !showCode; document.getElementById('code-output').classList.toggle('visible', showCode); } // ─── Init ──────────────────────────────────────────────────────── render();

Schritt-für-Schritt-Anleitung der Signaturanlage

Voraussetzungen: Bevor es losgeht, zwei kurze Hinweise:

Für das Hinterlegen als öffentliches Dokument (sichtbar für alle Anwender) werden Administratorrechte benötigt. Private Signaturen kann jeder Anwender selbst hinterlegen
Die HTML-Signatur liegt als fertige .html-Datei vor – entweder selbst erstellt oder mit dem Signatur-Builder-Tool aus diesem Artikel generiert

HTML-Signatur in humbee hinterlegen

Menüpunkt „Dokumente“ aufrufen

Im linken Navigationsmenü von humbee den Menüpunkt „Dokumente“ aufklappen. Darunter erscheinen zwei Optionen:
Öffentliche Dokumente: die Signatur ist für alle Anwender im System sichtbar und nutzbar, ideal für eine einheitliche Unternehmens-Signatur
Private Dokumente: die Signatur ist nur für den eigenen Account sichtbar, geeignet für individuelle oder abteilungsspezifische Varianten
Den entsprechenden Bereich auswählen und öffnen.

Signaturdatei hochladen

Im gewählten Dokumentenbereich auf „Hochladen“ oder „Neues Dokument“ klicken und die vorbereitete Signaturdatei auswählen. Theoretisch möglich sind hier neben .html, auch .eml oder .msg. Wir empfehlen, immer .html zu verwenden. Nur dieses Format garantiert eine konsistente Darstellung über alle E-Mail-Clients hinweg und unterstützt die dynamischen humbee-Variablen vollständig.

Dokumenttyp auf „E-Mail-Fußzeile“ setzen

Nach dem Upload erscheint das Dokument in der Dokumentenliste. Jetzt auf das Dreipunkte-Menü (⋯) rechts neben dem Dokument klicken und „Detailansicht öffnen“ wählen.
In der Detailansicht folgende Einstellungen vornehmen:
1. Dokumenttyp → „E-Mail-Fußzeile“ auswählen
2. Optional: Schriftart definieren, die für den Signaturtext verwendet werden soll
3. Optional: Schriftgröße festlegen
Einstellungen speichern. Die Signatur steht ab sofort beim Verfassen von E-Mails in humbee zur Auswahl.

Signatur beim E-Mail-Schreiben verwenden

Beim Verfassen einer neuen E-Mail in humbee kann die hinterlegte Signatur direkt ausgewählt und eingefügt werden. Öffentlich hinterlegte Signaturen sind für alle Anwender sichtbar, private Signaturen nur für den jeweiligen Account.

Dynamische Variablen: Personenbezogene Daten automatisch befüllen

Damit eine einzige Signaturvorlage für das gesamte Team funktioniert, unterstützt humbee ein Variablen-System. Platzhalter im HTML werden beim Senden automatisch mit den Profildaten des jeweiligen Anwenders befüllt, jede Person bekommt also ihre eigene korrekte Signatur aus einer einzigen Vorlage.
Wie Variablen aufgebaut sind
humbee nutzt doppelte geschweifte Klammern als Platzhalter. Der aktuelle Anwender wird über currentuser() referenziert:
{{user.property(currentuser(), 'schlüssel')}}
Für das Profilbild gibt es eine eigene Funktion:
{{image.dataurl(user.profileimage(currentuser()))}}
Soll ein Fallback-Wert erscheinen, wenn ein Feld nicht befüllt ist:
{{textordefault(user.property(currentuser(), 'schlüssel'), 'Fallback-Text')}}

Alle verfügbaren Variablen im Überblick

Feld	Variable
Profilbild	`{{image.dataurl(user.profileimage(currentuser()))}}`
Anrede	`{{user.property(currentuser(), 'name.anrede')}}`
Akademischer Titel / Zusatz	`{{user.property(currentuser(), 'name.zusatz')}}`
Vorname	`{{user.property(currentuser(), 'name.vorname')}}`
Nachname	`{{user.property(currentuser(), 'name.nachname')}}`
Position / Berufsbezeichnung	`{{user.property(currentuser(), 'position')}}`
Telefon (Festnetz)	`{{user.property(currentuser(), 'phonenumber')}}`
Mobil	`{{user.property(currentuser(), 'mobilenumber')}}`
E-Mail-Adresse	`{{user.property(currentuser(), 'email')}}`

Beispiel: Variable im HTML-Signatur-Code

So sieht eine typische Zeile in der HTML-Signatur mit Variablen aus:

<p style="margin:0; font-size:14px; font-weight:bold; color:#1a1a1a;">
  {{user.property(currentuser(), 'name.vorname')}}
  {{user.property(currentuser(), 'name.nachname')}}
</p>
<p style="margin:0; font-size:13px; color:#555;">
  {{textordefault(user.property(currentuser(), 'position'), 'Mitarbeiter')}}
</p>
<p style="margin:0; font-size:13px; color:#555;">
  {{textordefault(user.property(currentuser(), 'phonenumber'), '')}} |
  {{user.property(currentuser(), 'email')}}
</p>

Hinweis zu leeren Feldern: Nicht alle Nutzerprofile sind vollständig befüllt. textordefault() verhindert, dass leere Platzhalter sichtbar in der Signatur erscheinen. Für optionale Felder wie Mobil oder Titel empfiehlt sich daher immer die Verwendung dieser Funktion.

Tutorial: HTML Signatur in humbee erstellen & hinterlegen

Inhaltsverzeichnis

HTML-Signaturen: einmal sauber, überall konsistent

Was man in diesem Tutorial lernt