Put an e-invoice viewer on your website
One snippet adds a free viewer for XRechnung, ZUGFeRD, Factur-X, Peppol, UBL and CII files to your site. Your visitors open their e-invoices right there, in their own language.
On this page
What does the viewer do?
A visitor drops an e-invoice, chooses a file or pastes the XML, and sees it as a clear invoice they can print or save as a PDF. Links under the invoice lead to checking and converting on klarbon.app, in the visitor's language.
Is anything uploaded?
The file is read and shown in the visitor's browser and is never uploaded. The viewer does not persist invoice data or use analytics. Loading the viewer makes ordinary requests to klarbon.app; your page receives only its height, not the invoice.
Try it
This is the viewer as your visitors see it. Drop a supported e-invoice onto it.
How do I add it?
Paste these lines where the viewer should appear. It sizes itself to the invoice.
<div data-klarbon-open data-lang="en"><a href="https://klarbon.app/?ref=embed">Open an e-invoice with Klarbon</a></div>
<script src="https://klarbon.app/embed.js" async></script>embed.js is always the current version and is cached for an hour. To stay on this version, load https://klarbon.app/embed/v1.js instead.
Which options can I set?
Add any of these attributes to the element. Leave one out to use its default.
| Attribute | What it does | Values |
|---|---|---|
data-lang | The viewer's language. Without it, the viewer follows the visitor's browser and falls back to English. English is always one click away in the viewer. | en, de, fr, nl, it, es, pl, pt, ro |
data-partner | Your Klarbon referral code. Every link in the viewer then goes through your referral link. | a-z, 0-9 |
data-theme | Light, dark, or following the visitor's own setting. | auto, light, dark , default auto |
data-accent | The colour of buttons and links, from the Klarbon palette. | petrol, ink, blue , default petrol |
data-height | The height in pixels until the viewer has loaded and sized itself. | 240-20000 , default 520 |
Can I earn credits with it?
Yes. Sign in to Klarbon and find your referral code in your account. Put it in the snippet as data-partner. Every link in the viewer then goes through your referral link, and when a visitor you sent makes their first purchase, you each get one free credit.
How do I add it to WordPress?
Add a Custom HTML block and paste the snippet. WordPress keeps the script only for users with the unfiltered_html capability. WordPress help
The Klarbon WordPress plugin is not published yet. Use the HTML snippet above. The shortcode below is for that plugin only:
[klarbon_open lang="en" partner="" theme="auto" accent="petrol"]Which other website builders work?
- HTML
- Paste the snippet into the page's HTML where the viewer should appear.
- Wix
- Add Elements, Embed Code, Embed HTML, then paste the snippet. Wix shows embeds in a frame of fixed height, so make the element at least 900 pixels tall. Wix help
- Squarespace
- Add a Code block and paste the snippet. Squarespace runs scripts in Code blocks on the Core, Plus and Advanced plans. Squarespace help
- Webflow
- Check Webflow's custom-code help and your plan's permissions before adding the snippet. Webflow help
- Google Sites
- Insert, Embed, Embed code, then paste the snippet. Drag the embed taller so the invoice fits. Google Sites help
Does my Content Security Policy need a change?
Only if your site sends one: allow https://klarbon.app in script-src and frame-src.
Updated 6 November 2026