# Generate Qr Codes For Your Website **Source:** https://beyondspace.studio/blog/generate-qr-codes-for-your-website **Language:** French (France) --- # Generate QR Codes for your website quickly Tutorials Nov 13 Written By Beyondspace 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. ## Comment ça marche 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 | Oui | N/A | The data to encode in the QR Code. Must be UTF-8 URL-encoded. | | choe | String | Oui | 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 | Contenu | QR Code | | --- | --- | | Hello world | Hello world QR Code | | I am a QR code | I am a QR code QR Code | | Generate QR from image-chart | Generate QR from image-chart QR Code | ### 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:*** 1. **HTML Image Tag*:*** `QR Code` 2. **Link to the QR Code:** You can also make the QR code clickable, leading to the Image-Charts URL when clicked. ` QR Code ` #### ***Adding to an Email:*** 1. **HTML Email*:*** *Include the HTML image tag in your email content.* `

Scan the QR code:

QR Code` 2. **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 Beyondspace As a Squarespace Circle member, Beyondspace delivers plugins that elevate your website, streamline workflows, and optimize the Editor experience—saving time and driving engagement. https://beyondspace.studio Précédent Précédent ## How to connect Squarespace block Lightboxes Suivant Suivant ## How to refresh Open Graph image