A QR code (or ‘Quick Response Code’) is a machine-readable optical label in the form of a matrix bar-code.
Smart-phones easily recognize and read such 2 dimensional bar-codes. QR codes may contain many kind of data: raw text but also internet address, GPS position, phone call, sms message, email and even geographic position on earth.
Some of these formatted contents may trigger events on smart-phones, like activating your web browser with a predefined internet address or pre-filling an email for you.
1.1 QR Code Elements
QR codes usually consists of black squares distributed on a squared grid.
But it’s also possible to look at it from a new perspective.
These severe-looking squares can come in a variety of patterns and colors in order to be more discreet and visually more pleasant.
To achieve this, lets separate the various elements that make up a QR code.
First, as we move on from a black and white square world to a more graphic and colorful one, we will now talk about light and dark elements, finder patterns, data modules and logo.
Think of it as a safe quiet zone around and beneath the QR code, of uniform color. This is recommended for a safe QR code scanning and decoding.
Your background may take different forms. Also, depending of the image you place your QR code on, you may decide to have a more or less visible background – or even no background at all, depending of your ground image.
1.1.2 Finder Patterns
Finder patterns are sets of concentric alternating dark and light stripes. These stripes are usually squares, but can adopt many patterns.
Why finder patterns? Because they’re used as finder elements to help calculate the position, orientation and alignment of the code matrix. They don’t contain any data, they’re used to find and read the content of the QR code.
QR codes always have 3 large finder patterns and typically one small finder pattern (in practice: zero, one or more, depending on the amount and type of encoded data). These patterns have 3 concentric stripes: dark-light-dark. Large finder patterns may have an additional light stripe since they are located near the edge of the QR code and need a quiet zone for optimal decoding: there’s a need for some minimal contrast to detect a finder pattern.
Finder patterns can take many different forms, like:
1.1.3 Data Modules
With the data modules, you’re at the heart of the QR code’s content. Data modules are packed into segments. The position and size of the segments describe both the technical parameters and the content of a QR code. The way the data modules are arranged within a segment determines its content.
Dark data modules usually represent the QR code data. Light data modules help to recognize the dark ones, especially if the QR code background is similarly dark or if there are dark spots. Contrast is required to successfully decode the QR code data.
Data modules can take many different forms. Here are some examples:
A QR code can host an extra-layer for you to add a logo or a small image over it.
A logo image can overlap a small portion of a QR code. Don’t make it too large as the QR code won’t be readable anymore. Also, a logo image must never hide a finder pattern! Check our blog on how to add a logo to a QR code and what to avoid.
Want to know more? Check our logo tools and functionalities.
This is the upper part of the QRcodeLab online QR code generator GUI (graphical user interface)!
Here you’ll find, from left to right:
- access to a management panel on the left part of the screen dedicated to user access and data, as well as the account subscriptions.
- a valid replica of your QR code at size 1:1 (i.e. at the scale of 1 data module for 1 screen pixel). Click on it to display details about your QR code!
- a button to assess the scanning strength of the QR code.
- access to a tools panel on the right part of the screen to edit QR codes.
2.1 QR Code Replica
A click on the QR code replica will display detailed information about your QR code type and content.
Please note the QR code content is locked in demo mode.
2.2 QR Code Check Button
This button widget performs a scan test of your QR code using the current parameters and scaling. After a few seconds, a large emoticon shows the result: positive (green), negative (red) or neutral (grey) if the scan test was cancelled.
Depending on the size of your image and QR code, this check may take a while. A progress bar will be visible on the screen as work is in progress. Use the Stop button to interrupt the process.
3 Left Panel
This sliding panel gives access to a set tools related to the user and related subscriptions.
Appearance may change depending on if you’re logged in or not.
- Upper part of the panel (in blue): will display a pop-up with detailed information about your subscription. In guest mode as well as with a registered free plan downloads are unlimited, but some limitations apply: in guest mode you can’t change the content of the QR code, and in free plan a small ad shows up alongside the QR code. Refer to the pricing section for detailed information.
- Login: self explaining, use this interface to log into your QR generator account (if you have one). Otherwise, just read below.
- Sign Up: easily create your QRcodeLab account. We’ll ask only for an email and password. Being a registered user will unlock the QR code content editing tool.
- Reset Password: manage your credential if you lost your password. You’ll receive an email in minutes with a link. Check your spam box if you don’t receive an email.
- Subscriptions: gives you access to the various QRcodeLab paid plans you may sign up for. This option is accessible to registered users. The QR code content is editable only with a valid subscription plan. See details below.
- Config File: tools to save your work, as a configuration file, on your computer device. You can also upload a configuration file be it a local file stored on your device or an example from a gallery we provide. This feature is unlocked for registered users, even with no valid subscription plan.
- Dynamic QR: the place to review and manage your collection of dynamic and tracking QR codes. You’ll be able to modify, pause, resume and delete each tracking QR and access its analytic dashboard.
- Downloads: this is where to recover the last images or configuration files you did. Works only for your current user session. We store the images as well as the configuration files you chose to download in the browser cache memory. This memory is deleted when you log out or if you quit your browser.
- Quit / Logout & Quit: use this menu to logout and quit the QRcodeLab online QR code generator.
- Request Support: anything going wrong? Use this link to get in touch with our support team, we’ll react asap!
Once registered and log in the application, you have access to this menu entry. It’s about the different plans you can choose from to generate QR codes and QR images at your convenience:
- Subscriptions: a choice of different subscription plans.
- Quantity: buy additional QR codes units, you set the quantity. No expiry date, they remain valid forever.
Being registered but without a valid subscription plan or under a Free Plan, you can test and download your image compositions as much as you want. Please note that some limitations apply in such case: the image size is capped at 1024 pixels, a small add shows up next to the QR code, and dynamic/tracking QR codes are disabled.
3.1.1 Subscription Plan
You can choose between several plans with different image resolutions, from 1024 up to 4096 pixels. These are the maximum image size you can process with your plan. All plans are bundled with a 10 QR code credit.
Your active plan is displayed in green. Feel free to downgrade or upgrade your plan whenever you wish. A downgrade will apply at the end of the billing period while an upgrade applies immediately, its price being prorated according to the end of the current billing period.
You’re free to cancel any paid plan anytime by switching to ‘Free Plan’. In such a case the cancel is immediate.
When running on a registered free plan you’re still able to edit the content of your QR code and download your image compositions but a watermark will display alongside, and dynamic/tracking QR codes are disabled. Any such previous code will be put on pause. You will find them back in case you return to a paid subscription. There’s no time limit for a free plan. Upgrade to a paid plan to recover all the features and regain access to your dynamic/tracking QR usage data.
3.1.2 Quantity Plan
In case you end with no more QR codes left, you can subscribe to a Quantity Plan.
Simply choose how much QR codes you want and click on the ‘Proceed’ button to check out.
This is not a recurring plan and the quantities you buy will remain valid until they are all consumed.
Price is per QR code, at a decreasing rate with a minimum quantity of 5 units.
3.2 Config File
Once registered and log in the application, access to this menu entry is unlocked, so you can start working with configurations files.
A configuration file stores all the elements and parameters necessary for the design of a QR code or a QR image: the content of the QR code, the parameters of its components, its position and orientation including the 3D effects, the logo with its own settings as well as the associated ground image.
You can download and upload such a file and/or share it with other users of the QRcodeLab QR generator. We also provide a gallery of examples for your inspiration, which you can choose to use.
This entry displays a standard pop-up window to download a file from your device.
Get access to a gallery of sample configuration files through this menu entry. Click on any image to load the corresponding configuration.
Once the process is complete, an exact copy of what you chose shows up in your viewing area, which you can then modify at your convenience.
Well… make sure to regularly save your work and your graphic compositions so that you don’t lose your work if something goes wrong. Also, this allows you to resume your work later in case of an interruption. You may as well choose to share it with other users of the application.
A list of configuration files is provided, showing all the configurations saved during your working session, including the latest one. They are sorted in date order, from the most recent to the oldest. Just click on the download button to create a local copy of your work on your device.
3.3 Dynamic QR Code
The dynamic QR code menu entry is available if you have a currently valid paid subscription. You’ll get access to a management console for your dynamic/tracking QR codes, along with a set of associated functions.
The upper part of the pop-up window displays a search field to narrow down the list of dynamic QR codes. On the right side a gauge displays the amount of dynamic QR codes still available in your subscription.
Dynamic QR codes are listed from newest to oldest. For each code the ‘Id’ and ‘Final URL’ values are active links for you to check the redirection process and the final destination. On the right side you’ll find 4 buttons to manage your codes:
- Edit: allows you to change the title and the destination address of your code.
- Pause: to suspend your dynamic QR code. Access to the final destination is no longer available and data is no more collected. You can choose to resume at a later time.
- Delete: well… it removes the dynamic QR code with no way back, including the associated statistical data.
- Analytics: this one opens a dashboard for a visual display of the dynamic QR code’s statistical data. Choose a time frame and filter the dashboard by anything you click on. The top graph displays the following dimensions : unique visitors, page views, bounce rate (% of sessions with only a single page view), and visit duration. You can break down the data by months, weeks, days and hours according to the time frame selected. The following graphs ‘Top Sources’ and ‘Top pages’ are limited to the final URL of the dynamic code. ‘Location’ and ‘Devices’ graphs give insights into the geographical origin (country, region, city) and the type of device (by screen size, web browser or device operating system) of who scans your dynamic/tracking QR.
In the event you choose to downgrade your subscription, or even to switch to free mode, all or part of your dynamic QR codes could be disabled. This is because each subscription handles different quantities of dynamic codes, and the free mode does not. In such a case, the excess codes will be paused (not deleted) and the current data kept. This mandatory procedure is applied by order from the oldest, and the user can refine this choice later within the subscription boundaries.
This menu entry gives access to an interface for managing the files generated in the current work session. These can be qr images (tab ‘IMAGES’ on the left) or configuration files (tab ‘CONFIGS’ on the right). The files are listed from most recent to oldest. The internal name of each file reflects the date it was created.
These files are temporarily saved in the internal memory of the web browser (or the App) and disappear when you log out, close the web page or quit the browser (or the App). For as long as you stay in your working session, you have access to your files. We do not store any of your documents on our servers.
- receiving a copy of your data, and
- deleting your account.
3.5.1 Send Me My Data
Click on this link if you wish to receive a copy of your QRcodeLab online QR code generator data.
You’ll shortly receive an email with a readable extract of our databases in reference to you.
3.5.2 Delete My Account
Click on this link if you wish to delete your QRcodeLab online QR code generator account and thus terminate any kind of relation with. Don’t forget to confirm in the pop-up window.
It won’t be the same without you!
Your account will be immediately deleted along and any paid plan also immediately disabled ; all your personal data will be wiped out within 24hours. No recovery possible.
Miss us already? So do we! In any case you’ll be able to reopen an account with the same email once the delete procedure has been completed.
4 Viewing Area
This zone displays the chosen background image along with the QR code displayed over it.
In case the image is larger than your screen, you can scroll vertically and horizontally to display the proper part of your image. The maximum size of your image depends on your subscription plan.
How to scroll:
- use the scroll bars on the right and lower side of the image display zone, if displayed
- use your mouse wheel for vertical scrolling, or shift-key +scroll for horizontal scrolling
- drag the image with your mouse or pointer.
Click over the QR code to select it. You can also drag the QR code to any location over the background image. Use the QR code handles to scale or rotate it.
5 Right Panel (Tools Panel)
You are now getting at the heart of our app. All the design tools are located in this panel.
We’ll make a top-down description.
5.1 Interaction Modes
The Qrcodelab online QR code generator provides three user levels for a better working experience and spare your time:
- ‘Dobby’ (simpler interface, basic controls),
- ‘Padawan’ (intermediate level), or
- ‘Jedi’ (full control on all settings).
Switch from one mode to another to accelerate your design process.
First, use the ‘Dobby’ mode to define your settings globally. Then dive more into details with the ‘Padawan’ mode and finish, if needed, with the advanced ‘Jedi’ mode.
These interaction levels affect the scope of the tools in the tools panel.
5.2 QR Content
This drop-down widget will let you define the content of your QR code. Depending on the length of your data, the QR code appearance and size may change.
Our online QR generator allows you to define many kind of content:
- Text: raw text, write down whatever you want!
- URL: this is an internet address. Not only a website address but also additional data in a trailing path (if you plan to monitor a mobile marketing campaign). Depending on the device on which your code will be read, this may trigger an event that will open a web browser with the url you defined. We can collect usage data at that time if you go for a dynamic/tracking QR.
- SMS: this stands for ‘short message service’. You’ll be able to define a destination phone number and a short text message. Depending on the device on which your code will be read, this may trigger an event that will open a messaging app with your predefined data.
- Call: use this option to drive someone to initiate call. Depending on the device on which your code will be read, this may trigger an event that will open the telephone app, pre-dialing the phone number you defined.
- Email: here you can prepare an email with the target email address, a subject line and a text message. Depending on the device on which your code will be read, this may trigger an event that will open an email application with the predefined email.
- Geographic: specify a geographical position with latitude, longitude and altitude. Depending on the device on which your code will be read, this may trigger an event that will open a map application spotting your predefined location.
- Google Maps: specify a Google Maps location. Use the provided link and follow instructions to get the link location and then paste it in the URL field.
- Wi-Fi: encode a Wi-Fi network ID, authentication method and credential into a QR code.
- Google Play Store: link to an android app on Google website. Use the provided link to search for the desired app and then copy/paste the app link in the URL field.
- Apple Play Store: link to an IOS app on Apple website.
QR code contents are editable only if you’re authenticated and have a valid subscription plan!
5.2.1 Content for Dynamic QR Code
Some specific kind of QR Code content may show up a toggle switch to activate the dynamic and tracking QR functionality.
- Web addresses (URL)
- Google Maps
- Google Play Store
- Apple App Store
In such a case a ‘Dyn QR’ entry shows up, and you may choose to generate a dynamic and tracking QR associated with a short URL. Simply turn on the toggle switch and some additional data will appear below:
- Title: a name has been set for your new dynamic/tracking QR Code. By default, it’s ‘New dyn QR’. It can be modified later in the dynamic QR management console (refer to the matching entry of the left interface panel).
- Id: it’s a code that’s unique, made up of a series of numbers and letters you can’t modify. It’s a subset of your short URL, like this example: ‘https://s.dynqr.co/a9m0z’
- Target: the link you provided has been moved to this field and will be linked to the unique short URL. It will be editable later in the management console.
Eventually, the ‘List’ button allows to reach your collection of existing dynamic/tracking QR codes in case you wish to reuse an existing one.
Any code labeled ‘New dyn QR’ for the purpose of creating a new dynamic/tracking QR code is not yet editable nor functional.
Newly created dynamic QR codes are not editable in the management console and are not yet activated. Activation and editing will be enabled immediately after the QR code image is uploaded. You will be able to do so in the dynamic QR management panel.
Be sure to click on the ‘Use’ button to validate your choice.
5.3 Basic Mode - Dobby
This user mode is the easiest way to define the design your QR code: all the tools are defined in a single folding area.
5.3.1 Finder Patterns & Data Modules
- Two color choosers to pick the dark and light colors of both the QR code finder patterns and the data modules.
- A drop-down menu to choose and set the outline of the data modules.
- And another drop-down menu to choose and set the aspect of the finder patterns, both big and small.
- A slider widget to add some blurring effect to all QR code elements (finder patterns and data modules).
5.4 Intermediate Mode - Padawan
This is the QRcodeLab online QR code generator intermediate mode. Finder patterns and data modules are set up in separate folding zones with more parameters: this gives you more control over your QR code design.
5.4.1 Data Modules
All tools in this section are applicable to both dark and light data modules.
- Two color choosers to pick the dark and light colors.
- A drop-down menu to choose and set the outline.
A set of 4 slider widgets to apply some effects to the data modules:
- a random rotate effect,
- blurring, to smooth the edges.
5.4.2 Finder Patterns
The tools in this section apply to both large and small finder patterns.
- Two color choosers to pick the dark and light colors.
- A drop-down menu to set the aspect of the finder patterns. Some form substitutions may apply for a subset of small finder patterns.
- Two sliders to apply a rotating effect separately on the big and small finder patterns.
- A blur slider to smooth the edges of the finder patterns.
5.5 Full Control Mode - Jedi
This mode is used to interact with the full control panel. Separate folding areas with all available parameters are set up for the dark and light data modules and the large and small finder patterns.
5.5.1 Dark Data Modules
The tools in this section apply to dark data modules only.
- A color chooser to pick a color.
- A drop-down menu for selecting and setting the outline.
- A toggle button to flip the data module horizontally.
Four slider widgets to apply effects to the data modules:
- randomize rotation,
- blurring, to smooth the edges.
5.5.2 Light Data Modules
Same tools and look and feel as described the previous section, but applies only to light data modules.
5.5.3 Large Finder Patterns
All tools in this section apply to the three mandatory large finder patterns.
- Two color selectors to choose the dark and light colors of the finder patterns.
- A drop-down menu for adjustement of their layout.
- Three sliders to rotate each large finder pattern independently.
- A blur slider to smooth the edges.
5.5.4 Small Finder Patterns
Same tools and appearance as above, but for small finder patterns only. It is simpler since there is usually only one small finder pattern to customize, resulting in just one slider to control the rotation effect.
This section is about geometric transformations applied to the QR codes.
Use these tools to improve the integration of QR codes in your images.
The ‘Reset’ button cancels any existing geometric deformation.
You can apply a shearing effect to a QR code, using two sliders: one for the vertical effect and the other for the horizontal effect. The displayed values are in degrees. The shear effect is applied to the QR code immediately.
Note that high shear values can affect the QR code decoding!
Perspective: the ‘Open’ button will unlock a pop-up window dedicated to 3D transformation. You’ll notice four handles that allow to simulate a perspective effect. As a convenience, a light red square is displayed to get a better idea of the perspective transformation.
You can select and move each handle with your mouse or fine tune the position with the keyboard arrows (Ctrl+arrow will amplify the displacement). You can also move the QR code the same way, once selected.
Choose the proper option in the NavBar to validate the transformation or not (‘Close’ / ‘Done’). The ‘Reset’ button will reverse the QR code to its initial size and position.
You can fine tune the graphical integration of your QR code on a perspective surface in your images by adjusting the QR code background color opacity level, even to full transparency.
Big perspective deformations may compromise the QR code decoding!
This widget may be deactivated depending on your browser.
Check the FAQ for more details.
Use this accordion to set the QR code background characteristics.
- A color widget to define the background color.
- A drop-down menu to define the background shape.
- A slider widget to play with the blurring level of the background edges.
A toggle switch at the top of the accordion allows to disable/enable the background for the QR code.
Use the slider widget in this accordion to preview a scaled down version of your image.
A crop-free icon placed at the top of the accordion allows to directly scale the view so that the image is not clipped.
Scaling the view will allow to get a full overview of your work. But, most importantly, in the case where the final representation of your work will be smaller than the one displayed on the screen, it may be useful to check the readability of a scaled down version of your QR code!
5.9 Logo Tools
Click on this button to access a pop-up window where you’ll be able to choose, upload and edit a logo image over your QR code.
TIP: click directly on the QR code logo image in the viewing area to directly access the logo pop-up window.
Our QR code generator can manage an extra-layer for you to add a logo or small image over it. An image in such layer can overlap a small portion of the QR code.
Don’t make it too large as the QR code won’t be readable anymore. Note also that a logo image must never hide a QR code finder pattern.
Use the collapsible cross button to upload a graphic element. It can be either a graphic pattern (those used for the QR code data modules), a useful logo, or any image of your choice (in jpg, png or svg format).
Once a logo item has been uploaded, a ‘Tools’ button is unlocked giving access to several submenus, depending on the king of item (raster image or svg vector image).
Each sub-menu matches a visual characteristic of the logo image.
A switch allows to enable/disable each characteristic:
- ‘Image’: the uploaded image itself. You can adjust its opacity channel.
- ‘Foreground Tint’: define a color over the logo image. Doesn’t apply to transparent areas in images.
- ‘Inner Tint’: in case of a predefined pattern or logo image, define a color for the inner areas of the logo image.
- ‘Edge’: tools to set the color and thickness of an edge border around the logo image. Doesn’t apply to transparent areas.
- ‘Background’: tools to set the characteristics of a background image for the logo, such as color, geometric form, size, rotation and blur effect.
For additional needs the bottom bar allows several actions through the following buttons:
- ‘Reset’: reverse the logo composition to its initial size and position
- ‘Center’: center the composition to the middle of the qr :code. Any rotation is also cancelled.
- ‘Delete’: will delete the current logo composition.
5.10 Ground Image
Click on this button to select and upload a background image. Choose between solid colors, useful standard backgrounds (‘Gallery’) or upload your own document (format jpg or png).
If you replace an existing image, the QR code parameters will be kept except for its position and the 3D effects applied.
Self explaining: restore all the QR code parameters to default values, place, size and rotation in the current image!
6 Bottom Bar
The links in this lower part of the QRcodeLab online QR code generator user interface are of general purpose and not linked to the user or the QR code itself.
6.1 Request Support
Any question or something going wrong with our online QR code generator? Click on our ‘Request Support’ link to get in touch with us!
6.2 Download Image
Use this button to retrieve your current image composition. A small sticker displays the remaining QR code credit balance.
Notifications may be sent before downloading the QR code image:
- Decoding test: you will be informed if the QR code fails to pass the decoding test. You can choose to download it anyway, but at your own risks.
- Download : any download will consume one credit in (one of) your subscriptions. QR code credits from the subscription plan are allocated first, then credits from the quantity plan.
Downloaded images are delivered in two formats: png (with transparency) and jpg (without transparency).
6.3 Downloads Link
Access to a pop-up window listing the last downloaded images and configuration files for you to save them again. Works only within the current user session as locally stored data using the browser cache are deleted at logout.
When the tools tray is unfolded, this link is hidden. Just close the tray to reveal it. The same shortcut is also available in the Admin panel.