Overview

QR codes (Quick Response codes) are a great way to advertise your brand and get users to your mobile app easily. The QR Codes Builder is a screen in the Branch Dashboard that allows you to design and edit your QR code so whenever and wherever you use Branch Links, branding to your company is consistent and beautiful.

QR Codes Customization

👍

Preview

Making changes to the configuration will automatically update the preview shown on the right-hand side of the editable settings.

The configurator allows you to edit the following elements of your default Branch QR code:

Style & Pattern

Finder Style lets you change the shape of the three corner elements (top-left, bottom-right, and lower-left) of your QR Code. You can choose between a square, a rounded square, or a circle.

Code Pattern lets you change the shape of the pattern used for filling out the QR Code. You can choose between triangles, squares, circles, diamonds, hexagons, and octagons.

Color

You are also able to change the Code Pattern Color, Background Color, and Finder Color. You can either input an HTML color code (hexadecimal triplet) or use the color picker to choose your preferred color.

Images

Additionally, you can either input a valid image URL or upload a file (PNG, JPG, or JPEG) to change your QR code's Center Logo and/or Background Image.

Note: You can also edit the Background Image Opacity for editing the transparency of the image to make your QR code more visible for the camera to read.

Save & Reset

When you are satisfied with the result of your customization, you can click the blue Save button to confirm your edit, and any newly generate QR Codes created via the Branch QR Code API will have your new design.

Alternatively, if you wish to start over, you may click the Reset button to change the settings back to their original state.

Best Practices

Customizing your QR Code for scan reliability

The Branch QR Code can be customized with different colors and logos. These customizations may have an impact in device cameras' ability to interpret the QR code being scanned. Please see the below guidelines on your QR code customization:

• When using a logo in your QR code, there are restrictions to the size of your logo. QR codes have an error margin and we recommend using a logo that does not cover more than 30% of the code.
• Consider the contrast of your QR code. Contrast is an important factor in scan reliability, so a dark code color on a light background is a safe display option in terms of color.

QR Code Physical Sizing

A QR Code’s minimum resolution should be 76 x 76 px, or 2 x 2 cm. That’s because 1 centimeter is approximately 38 pixels and the minimum QR code size is 2 x 2 cm.

The sizing should be determined by the QR Code's scanning distance and the data to be encoded. The ratio of the scanning distance to the size of the QR Code should be close to 10:1, and you can use the following basic rule as described by scanova.io.