Ein E-Rechnungs-Viewer für Ihre Website
Ein Code-Schnipsel genügt, und Ihre Website hat einen kostenlosen Viewer für XRechnung, ZUGFeRD, Factur-X, Peppol, UBL und CII. Ihre Besucher öffnen ihre E-Rechnungen direkt bei Ihnen, in ihrer eigenen Sprache.
Auf dieser Seite
Was kann der Viewer?
Besucher legen eine E-Rechnung ab, wählen eine Datei aus oder fügen das XML ein und sehen eine übersichtliche Rechnung, die sie drucken oder als PDF speichern können. Unter der Rechnung führen Links zum Prüfen und Umwandeln auf klarbon.app, in der Sprache der Besucher.
Wird dabei etwas hochgeladen?
Die Datei wird im Browser des Besuchers gelesen und angezeigt und nie hochgeladen. Der Viewer speichert keine Rechnungsdaten dauerhaft und nutzt keine Webanalyse. Beim Laden gehen gewöhnliche Anfragen an klarbon.app; Ihre Seite erhält nur die Höhe des Viewers, nicht die Rechnung.
Ausprobieren
So sehen Ihre Besucher den Viewer. Legen Sie eine E-Rechnung in einem unterstützten Format darauf ab.
Wie binde ich ihn ein?
Fügen Sie diese Zeilen dort ein, wo der Viewer erscheinen soll. Seine Höhe passt sich der Rechnung an.
<div data-klarbon-open data-lang="de"><a href="https://klarbon.app/de/?ref=embed">E-Rechnung mit Klarbon öffnen</a></div>
<script src="https://klarbon.app/embed.js" async></script>embed.js ist immer die aktuelle Version und wird eine Stunde zwischengespeichert. Um bei dieser Version zu bleiben, laden Sie stattdessen https://klarbon.app/embed/v1.js.
Welche Einstellungen gibt es?
Fügen Sie dem Element die gewünschten Attribute hinzu. Für jedes weggelassene Attribut gilt der Standardwert.
| Attribut | Wirkung | Werte |
|---|---|---|
data-lang | Die Sprache des Viewers. Ohne Angabe richtet sich der Viewer nach der Browsersprache des Besuchers und verwendet ersatzweise Englisch. Englisch ist im Viewer immer einen Klick entfernt. | en, de, fr, nl, it, es, pl, pt, ro |
data-partner | Ihr Klarbon-Empfehlungscode. Jeder Link im Viewer führt dann über Ihren Empfehlungslink. | a-z, 0-9 |
data-theme | Hell, dunkel oder wie im System der Besucher eingestellt. | auto, light, dark , Standard auto |
data-accent | Die Farbe von Schaltflächen und Links, aus der Klarbon-Palette. | petrol, ink, blue , Standard petrol |
data-height | Die Höhe in Pixeln, bis der Viewer geladen ist und seine Höhe selbst setzt. | 240-20000 , Standard 520 |
Kann ich damit Credits verdienen?
Ja. Melden Sie sich bei Klarbon an, Ihren Empfehlungscode finden Sie in Ihrem Konto. Tragen Sie ihn im Code-Schnipsel als data-partner ein. Jeder Link im Viewer führt dann über Ihren Empfehlungslink, und wenn jemand, den Sie geschickt haben, zum ersten Mal etwas kauft, bekommen Sie beide je einen Credit geschenkt.
Wie binde ich ihn in WordPress ein?
Fügen Sie einen Block „Individuelles HTML“ hinzu und setzen Sie den Code-Schnipsel ein. WordPress behält das Skript nur bei, wenn Sie die Berechtigung unfiltered_html haben. Hilfe von WordPress
Das Klarbon-Plugin für WordPress ist noch nicht veröffentlicht. Verwenden Sie den HTML-Code-Schnipsel oben. Der folgende Shortcode ist nur für dieses Plugin bestimmt:
[klarbon_open lang="de" partner="" theme="auto" accent="petrol"]Mit welchen Baukästen funktioniert er noch?
- HTML
- Fügen Sie den Code-Schnipsel dort in das HTML der Seite ein, wo der Viewer erscheinen soll.
- Wix
- Elemente hinzufügen, Code einbetten, HTML einbetten, dann den Code-Schnipsel einfügen. Wix zeigt Einbettungen in einem Rahmen mit fester Höhe, machen Sie das Element also mindestens 900 Pixel hoch. Hilfe von Wix
- Squarespace
- Fügen Sie einen Code-Block hinzu und setzen Sie den Code-Schnipsel ein. Skripte in Code-Blöcken laufen bei Squarespace in den Tarifen Core, Plus und Advanced. Hilfe von Squarespace
- Webflow
- Lesen Sie vor dem Einfügen des Code-Schnipsels die Webflow-Hilfe zu eigenem Code und prüfen Sie die Berechtigungen Ihres Tarifs. Hilfe von Webflow
- Google Sites
- Einfügen, Einbetten, Code einbetten, dann den Code-Schnipsel einfügen. Ziehen Sie die Einbettung so hoch, dass die Rechnung hineinpasst. Hilfe von Google Sites
Muss ich meine Content Security Policy ändern?
Nur wenn Ihre Website eine sendet: Erlauben Sie https://klarbon.app in script-src und frame-src.
Aktualisiert am 6. November 2026