Een e-factuurviewer op je eigen website
Eén codefragment is genoeg voor een gratis viewer voor Peppol-, UBL-, XRechnung-, ZUGFeRD-, Factur-X- en CII-bestanden op je site. Je bezoekers openen hun e-facturen gewoon bij jou, in hun eigen taal.
Op deze pagina
Wat doet de viewer?
Een bezoeker sleept er een e-factuur in, kiest een bestand of plakt de XML en ziet een overzichtelijke factuur die hij kan afdrukken of als PDF opslaan. Onder de factuur staan links naar controleren en omzetten op klarbon.app, in de taal van de bezoeker.
Wordt er iets geüpload?
Het bestand wordt gelezen en getoond in de browser van de bezoeker en nooit geüpload. De viewer slaat geen factuurgegevens blijvend op en houdt geen gebruiksstatistieken bij. Bij het laden van de viewer stuurt de browser gewone verzoeken naar klarbon.app; je pagina ontvangt alleen de hoogte van de viewer, niet de factuur.
Probeer het
Zo zien je bezoekers de viewer. Sleep er een ondersteunde e-factuur in.
Hoe voeg ik hem toe?
Plak deze regels op de plek waar de viewer moet komen. Hij past zijn hoogte zelf aan de factuur aan.
<div data-klarbon-open data-lang="nl"><a href="https://klarbon.app/nl/?ref=embed">E-factuur openen met Klarbon</a></div>
<script src="https://klarbon.app/embed.js" async></script>embed.js is altijd de nieuwste versie en wordt een uur bewaard in de cache. Wil je bij deze versie blijven, laad dan https://klarbon.app/embed/v1.js.
Wat kan ik instellen?
Zet een of meer van deze attributen op het element. Laat je er een weg, dan geldt de standaardwaarde.
| Attribuut | Wat het doet | Waarden |
|---|---|---|
data-lang | De taal van de viewer. Zonder dit attribuut volgt de viewer de browsertaal van de bezoeker en valt hij zo nodig terug op Engels. Engels is in de viewer altijd één klik verwijderd. | en, de, fr, nl, it, es, pl, pt, ro |
data-partner | Je Klarbon-verwijzingscode. Elke link in de viewer gaat dan via jouw verwijzingslink. | a-z, 0-9 |
data-theme | Licht, donker of volgens de instelling van de bezoeker. | auto, light, dark , standaard auto |
data-accent | De kleur van knoppen en links, uit het Klarbon-palet. | petrol, ink, blue , standaard petrol |
data-height | De hoogte in pixels tot de viewer geladen is en zijn eigen hoogte kiest. | 240-20000 , standaard 520 |
Kan ik er credits mee verdienen?
Ja. Log in bij Klarbon en zoek je verwijzingscode op in je account. Zet hem in het codefragment als data-partner. Elke link in de viewer gaat dan via jouw verwijzingslink, en als iemand die jij hebt doorgestuurd voor het eerst iets koopt, krijgen jullie allebei een gratis credit.
Hoe voeg ik hem toe aan WordPress?
Voeg een blok Aangepaste HTML toe en plak het codefragment erin. WordPress bewaart het script alleen voor gebruikers met de bevoegdheid unfiltered_html. Hulp van WordPress
De Klarbon-plugin voor WordPress is nog niet gepubliceerd. Gebruik het HTML-codefragment hierboven. De shortcode hieronder is alleen bedoeld voor die plugin:
[klarbon_open lang="nl" partner="" theme="auto" accent="petrol"]Met welke andere websitebouwers werkt het?
- HTML
- Plak het codefragment in de HTML van de pagina, op de plek waar de viewer moet komen.
- Wix
- Elementen toevoegen, Code insluiten, HTML insluiten, en plak dan het codefragment. Wix toont ingesloten code in een kader met een vaste hoogte, maak het element dus minstens 900 pixels hoog. Hulp van Wix
- Squarespace
- Voeg een codeblok toe en plak het codefragment erin. Squarespace voert scripts in codeblokken uit met de abonnementen Core, Plus en Advanced. Hulp van Squarespace
- Webflow
- Bekijk de hulp van Webflow over eigen code en controleer wat je abonnement toestaat voordat je het codefragment toevoegt. Hulp van Webflow
- Google Sites
- Invoegen, Insluiten, Code insluiten, en plak dan het codefragment. Maak het ingesloten blok hoger door te slepen, zodat de factuur erin past. Hulp van Google Sites
Moet ik mijn Content Security Policy aanpassen?
Alleen als je site er een meestuurt: sta https://klarbon.app toe in script-src en frame-src.
Bijgewerkt op 6 november 2026