Generate QR Codes for your website quickly
In this post I will guide you to create a QR Code on the fly with a URL GET request using the image-chart.com QRCode generator.
A quick response (QR) code is a barcode form designed for easy digital device readability. It stores information through a pattern of pixels arranged in a square grid. QR codes find common application in tracking product details within a supply chain and are widely employed in marketing and advertising initiatives.
How it works
You will construct a URL using the Image-Charts API, parameters are added to the URL to define the characteristics of the QR code, such as size, data to be encoded, output format, colors, etc
https://image-charts.com/chart?
chs=150x150&cht=qr&chl=Hello%20world&choe=UTF-8
The QR Code is generated on the fly and you can use it as an Image source to display on your website and email.
URL Parameters
| Field | Type | Required | Default | Description |
|---|---|---|---|---|
| chl | String | Yes | N/A | The data to encode in the QR Code. Must be UTF-8 URL-encoded. |
| choe | String | Yes | UTF-8 | How to encode the data in the QR code. Currently, only UTF-8 is supported. |
| chof | String | No | PNG | The output format for the QR Code image. Use .svg for SVG format and .png for PNG format. |
| chs | String (e.g., 200x200) | No | N/A | The size of the QR Code image in pixels. Example: 200x200. |
| icqrb | String (RRGGBB[AA]) | No | FFFFFF | QR Code background color in hexadecimal format. Default is white. |
| icqrf | String (RRGGBB[AA]) | No | 000000 | QR Code foreground color in hexadecimal format. Default is black. |
The parameters for generated QR
To put the content, you have to encode it into UTF-8, I suggest to use this tool to get the encoded content. Simply enter your data then push the encode button. Below is the generated output of some basic data
| Content | QR Code |
|---|---|
| Hello world |  |
| I am a QR code |  |
| Generate QR from image-chart |  |
How to use
Once you have the URL that generates the QR code image, you can easily add it to a website or email using HTML or Markdown. Here's how you can do it:
Adding to a Website:
HTML Image Tag:
<img src="https://image-charts.com/chart?chs=200x200&cht=qr&chl=YourEncodedData" alt="QR Code">Link to the QR Code: You can also make the QR code clickable, leading to the Image-Charts URL when clicked.
<a href="https://image-charts.com/chart?chs=200x200&cht=qr&chl=YourEncodedData" target="_blank"> <img src="https://image-charts.com/chart?chs=200x200&cht=qr&chl=YourEncodedData" alt="QR Code"> </a>
Adding to an Email:
HTML Email: Include the HTML image tag in your email content.
<p>Scan the QR code:</p> <img src="https://image-charts.com/chart?chs=200x200&cht=qr&chl=YourEncodedData" alt="QR Code">Email Signature: If you want to include the QR code in your email signature, follow your email client's instructions for adding an image to the signature. Usually, there's an option to insert an image using a URL.
Remember to replace YourEncodedData with the actual data you want to display.
Bonus
In case you are in need of a more good-looking QR Code, consider trying the Elfsight QR Code widget, which currently offers 20 frames to display your information in attractive way. QR Code widget is free to register and install, premium plan is available based on your page view. Check this out
