Dokumentvorlage per HTML in einen anderen Account übertragen

Webling bietet keinen Export oder Import für Dokumentvorlagen. Eine Vorlage lässt sich trotzdem in einen anderen Account übertragen: Du kopierst ihren HTML-Quellcode im alten Account und fügst ihn im neuen Account in eine leere Vorlage ein. Text, Tabellen, Formatierung und Platzhalter kommen so mit. Bilder, Seitenränder und Vorlageneinstellungen musst du von Hand nachziehen.

Was du benötigst

Eine Vorlage im Webling-Editor besteht aus einzelnen Blöcken, nicht aus einem einzigen HTML‑Dokument. Den HTML-Code gibt es pro Block. Du überträgst die Vorlage also Block für Block.

Zusätzlich benötigst du:

• Zugriff mit Administratorrechten auf beide Webling-Accounts, am besten in zwei Browser-Tabs nebeneinander.
• Einen einfachen Texteditor (z. B. TextEdit im Modus «Reiner Text», Notepad oder VS Code) als Zwischenablage für die Code-Stücke.
• Die Bilddateien der Vorlage (Logo, Unterschrift, Hintergrundbild) als Datei auf deinem Computer. Bilder kommen beim Kopieren nicht mit, weil der Code nur auf die Bilddatei im alten Account verweist.
• Im neuen Account die gleichen Mitgliederfelder wie im alten Account, falls die Vorlage eigene Felder als Platzhalter verwendet.

Schritt 1: Im alten Account den HTML-Code kopieren

1. Öffne die Vorlage im Editor (Beispiel: https://demo.webling.ch/admin#/documents/invoice/:letter/edittemplate/8356).
2. Wechsle links auf den Reiter «Seite» und notiere die Seiteneinstellungen: Standard-Schriftgrösse, Standard-Schriftart, Seitenränder, «Kopfzeile anzeigen», «Fusszeile anzeigen» und «QR-Rechnung aktivieren» (inkl. Konfigurieren).
3. Skizziere den Aufbau: Welche Blöcke in welcher Reihenfolge stehen und welche nebeneinander in derselben Zeile liegen (im Beispiel steht der Datumsblock «Ort, Datum» rechts in einer eigenen Zeile).
4. Klicke in den ersten Block. Links unter dem Block siehst du seinen Typ (z. B. «Kopfzeile», «Textblock», «Adressblock») und seine Abstände (Oben, Unten, Links, Rechts in cm). Notiere beides.
5. Klicke in der Werkzeugleiste oben rechts auf ⋮ und dann auf </> (Code-Ansicht). Der Block zeigt jetzt seinen HTML-Code.
6. Klicke in den Code, markiere alles mit Cmd+A (Mac) oder Ctrl+A (Windows) und kopiere mit Cmd+C oder Ctrl+C.
7. Füge den Code im Texteditor ein und schreibe eine Überschrift darüber, z. B. 
   === Block 3: Textblock Rechnungstext ===.
8. Klicke wieder auf </>, um die Code-Ansicht zu schliessen.
9. Wiederhole Schritt 4 bis 8 für jeden Block mit Text, inklusive Kopf- und Fusszeile.
10. Lade die Bilder der Vorlage herunter oder suche die Originaldateien, falls du sie nicht mehr hast.
11. Schliesse den Editor mit «Schliessen», ohne zu speichern.

Zu Punkt 2: Der Reiter «Seite» mit Schrift, Seitenrändern, Kopf- und Fusszeile und QR-Rechnung.

Zu Punkt 5: Nach einem Klick auf ⋮ (oben rechts) erscheint darunter der Knopf «</>» «Code-Ansicht».

Zu Punkt 6: Der Block zeigt jetzt seinen HTML‑Code. Diesen Code kopierst du vollständig.

Schritt 2: Im neuen Account die Vorlage aufbauen und den Code einfügen

1. Lege im neuen Account eine neue Vorlage vom gleichen Typ an. Eine Rechnungsvorlage muss wieder eine Rechnungsvorlage sein, sonst fehlen der Block «Rechnungsposten» und die Rechnungs-Platzhalter wie {{Rechnung:ID}}.
2. Übernimm im Reiter «Seite» die notierten Seiteneinstellungen. Aktiviere Kopf- und Fusszeile, bevor du deren Code einfügst.
3. Baue die Blöcke in der gleichen Reihenfolge auf. Fahre dazu mit der Maus links an einen Block und klicke auf das ⊕-Symbol:
   • Block oben einfügen / Block unten einfügen für einen neuen Block darüber oder darunter
   • Block in dieser Zeile einfügen für einen Block daneben
   • Zeile nach oben/unten schieben zum Umsortieren
4. Wähle beim Einfügen den passenden Typ: Text / Bild, Adressbereich, Rechnungsposten oder Seitenumbruch.
5. Klicke in den neuen Block, öffne ⋮ → </> und lösche den vorhandenen Code (Cmd/Ctrl+A, dann Delete).
6. Kopiere den passenden Code-Abschnitt aus deinem Texteditor und füge ihn mit Cmd+V oder Ctrl+V ein.
7. Klicke wieder auf </>. Der Block zeigt jetzt den formatierten Text mit den grün markierten Platzhaltern.
8. Trage links die notierten Abstände (Oben, Unten, Links, Rechts) ein.
9. Speichere zwischendurch mit «Rechnungsvorlage speichern» (oder dem entsprechenden Speichern-Knopf), damit bei einem Fehler nichts verloren geht.

Zu Punkt 3: Das Menü hinter dem ⊕-Symbol links neben einem Block.

Zu Punkt 4: Die vier Blocktypen im Dialog Block wählen.

Schritt 3: Bilder, Platzhalter und Sonderblöcke nacharbeiten

Bilder neu einfügen. Im kopierten Code steht ein Bild als Verweis auf den alten Account, z. B. <img src="/api/client/letterimage/8357/image/logo.png">. Im neuen Account gibt es diese Datei nicht, das Bild bleibt leer oder fehlt.

1. Lösche das defekte Bild im Block.
2. Setze den Cursor an die gleiche Stelle und füge das Bild über das Bild-Symbol in der Werkzeugleiste neu ein.
3. Stelle Grösse und Ausrichtung über die Bild-Werkzeugleiste wieder ein.
4. Ein Hintergrundbild der Kopfzeile wählst du links unter «Hintergrundbild» → «Hintergrundbild wählen» neu aus.

Die Kopfzeile ist ausgewählt. Links findest du «Ganze Seitenbreite verwenden» und «Hintergrundbild wählen».

Platzhalter prüfen. Ein Platzhalter wie {{Vorname}} steht im Code als <span class="… webling-placeholder …" data-webling-placeholder="…">. Er verweist auf den Feldnamen. Standardfelder wie Vorname, Name, Strasse, PLZ und Ort funktionieren in jedem Account. Eigene Felder funktionieren nur, wenn im neuen Account ein Feld mit genau dem gleichen Namen existiert. Lege fehlende Felder vor dem Einfügen an, oder ersetze den Platzhalter über das Symbol { } in der Werkzeugleiste.

Blöcke ohne HTML-Code einstellen.

• Rechnungsposten: Design (z. B. «Einfach») und Option «Währung ausblenden» wie im Original setzen.
• Adressbereich: Option «Absenderzeile anzeigen» wie im Original setzen.
• Kopfzeile: Option «Ganze Seitenbreite verwenden» wie im Original setzen.
• QR-Rechnung: Unter «Seite» → QR-Rechnung (CH) → Konfigurieren das Konto des neuen Accounts wählen. Die Konfiguration kommt nie mit, weil sie an die Konten des Accounts gebunden ist.

Der Block «Rechnungsposten» hat keinen HTML-Code. Design und Optionen stellst du links von Hand ein.

Schritt 4: Testen

• Im Reiter «Vorschau» alte und neue Vorlage nebeneinander vergleichen: Logo, Abstände, Schrift, Zeilenumbrüche.
• Ein Probedokument für ein Test-Mitglied erzeugen und prüfen, ob alle Platzhalter mit echten Werten gefüllt sind.
• Bei Rechnungen: Rechnungsposten, Total, Fälligkeitsdatum und QR-Zahlteil prüfen.
• Ein mehrseitiges Dokument testen, falls Kopf-/Fusszeile oder Seitenumbrüche wichtig sind.

Häufige Probleme