Embed a barcode generator on your website
Choose a format and a look, copy one line of HTML and paste it into your page. It shows a fixed barcode, or lets your visitors type their own data and download it. No account, no key, no link back required.
12 digits, or 13 with the check digit. Visitors see this first.
Three steps
- Step 1
Set it up
Pick the format, type the data and choose the colours. Tick what the frame should show: a box for visitors’ own data, download buttons, or only the barcode.
- Step 2
Copy the code
The code is one iframe line with your choices written into its address, and the height that fits them.
- Step 3
Paste it into your page
Put it where the barcode should appear, in the HTML of the page or in your site builder’s “HTML” or “embed code” block.
What is in the address
The builder writes these for you. You can also edit them by hand in the code, for example to change the barcode on each page.
| Option | Values | What it does |
|---|---|---|
t | ean13, upca, code128, code39, itf14, gs1-128, databar, qrcode, datamatrix, pdf417, aztec | The format. Without it, Code 128. |
d | Text, URL-encoded | The data of the barcode. For GS1 formats, put each Application Identifier in brackets. |
gs1 | 1 | Code 39: add the mod 43 check character. Data Matrix: GS1 Data Matrix. GS1 DataBar: Expanded. |
v | omni, stacked-omni, stacked, limited, expanded, expanded-stacked | The version of GS1 DataBar. It wins over gs1. |
fg | Six hex digits | Colour of the bars, without the #. Default 000000. |
bg | Six hex digits, or none | Background colour. none leaves it transparent, so your page shows through. Default FFFFFF. |
txt | 0 | Hides the text under linear barcodes. |
edit | 1 | Adds a box where visitors type their own data. |
dl | 1 | Adds SVG and PNG download buttons. |
credit | 1 | Adds a small link to Barcodes.tools under the barcode. |
Data that cannot be drawn in the format (a wrong check digit, letters in a numeric format) shows the reason in the frame instead of a barcode, the same message the generator gives.
Good to know
The frame is a page of this site with no menu, footer or sign-up. Only pages under /embed/ can be shown inside another site; every other page of Barcodes.tools tells browsers not to be framed. The frame is also kept out of search results, so it does not compete with your own page.
Colours are yours to choose, but scanners need dark bars on a light background with a clear difference between them; the builder warns you when the colours are too close. A barcode on a screen is also not a print: the frame draws the barcode to fit its space, so use the download buttons, or the generator, when someone needs a file at an exact printed size, and the batch tool for a whole sheet of labels.
To keep the page light, the frame loads when it is near the screen (loading="lazy"). Give it a descriptive title so screen reader users know what it is: the builder fills one in.
- MDN: the iframe element
What the attributes of an iframe do: src, title, width, height, loading.
- MDN: Content-Security-Policy frame-src
The setting that decides which addresses a page may show in a frame.
Questions about embedding
Do I have to link back to Barcodes.tools?
No. The frame shows no link unless you tick “Show a small link to Barcodes.tools”. Leave it off and the frame is only the barcode, and the box and buttons you chose.
Is there an account, a key or a fee?
No. There is nothing to sign up for and no key in the code: it is an iframe that points to a page of this site.
Where does the data go?
The barcode is drawn in the visitor’s browser. But the frame is a page of this site, so the browser asks our host for it, and the address in your code, barcode text included, is part of that request, as for any web page. Do not put private data in the code. What a visitor types into the box of an editable frame is not sent anywhere.
How do I show a different barcode on each page?
The barcode is set by the d value in the frame address, so one snippet draws one barcode. On each page, change the d value in the code, URL-encoded (in JavaScript, encodeURIComponent does it). For GS1 formats, keep the brackets around the Application Identifiers.
Why is the height fixed?
A page cannot read how tall a frame from another site wants to be, so the code carries the height that fits what you chose. If you make the frame much narrower than 320 pixels, the buttons may wrap onto a second line: add a few pixels of height.
The frame does not show on my site. What should I check?
Some page builders remove iframes unless you use their “HTML” or “embed code” block. If your site sends a Content-Security-Policy, its frame-src has to allow https://barcodes.tools. If you are not sure, ask whoever runs the site.
Can visitors print or save the barcode from the frame?
With “Show download buttons”, they can save an SVG or a PNG at 600 dpi at the format’s usual size. For another size, a print check or a whole sheet, send them to the generator on this site.