QR Code Styling Tutorial

 

QR code styling allows you to match QR code to your use-case or brand.

 

Test our fully featured APIs and sign-up for a free-plan available on the RapidAPI marketplace.

The Basics

 

Generate a basic QR code size of by providing only the mandatory data parameter.

 

Refer to API documentation and details on parameters, sizes, and styling.

Show Basic Request

Url /qrcode
Method POST
Request Body
{
   "data" : "www.qrmeister.com"
}
Header Value
Content-Type application/json
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Header Value
x-size-px 144
x-request-id 6b07df43-c9fe-4d41-a95a-ac763892d71d

 

After the API call header parameter x-size-px contains the QR code dimensions always expressed in px.

 

Header parameter x-request-id provides a unique request-id and should be used when requesting QR meister for support.

Size and Format

 

Parameter format allows svg (default), png, or jpeg where private plans allow pdf as well.

 

size and unit determine the QR code dimensions, default this is 144 px (1.5 inch). The unit can be expressed in px (default) inchcm, or mm.

 

The API request below results in a 5.0 cm QR code png image where the size corresponds to 189 px as reflected by parameter x-size-px.

 

Show Size and Format Request

Url /qrcode
Method POST
Request Body
{
   "data" : "www.qrmeister.com",
   "size" : 5.0,
   "unit" : "cm",
   "format" : "png"
}
Header Value
Content-Type application/json
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Header Value
x-size-px 189
x-request-id 6b07df43-c9fe-4d41-a95a-ac763892d71d

Using Colors

 

Customize color, background, eye-frame, and eye-ball colors.

 

A color gradient can be applied to the body and include or exclude QR code eyes.

 

All color parameters use a hex notation, for example, #eaf2ff

Customize Body and Background Colors

 

Set the color of the QR code by adding parameter color in a style object. By default, the color is black.

 

The background color is set by adding parameter backgroundColor to the styleobject and defaults to white.

Show Color and Background Request

Url /qrcode
Method POST
Request Body
{
   "data" : "www.qrmeister.com",
   "style" : {
      "color" : "#eaf2ff",
      "backgroundColor" : "#2e3a65"
   }
}
Header Value
Content-Type application/json
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Header Value
x-size-px 144
x-request-id f32cfb10-c77d-489d-8c11-6e54c1c5753b

Applying  a Color Gradient

 

Add parameter gradient to the style object and set to angularhorizontalvertical, or radial.

 

The parameter color contains the gradient first color and parameter gradientColor containing the final color.

Show Color Gradient Request

custom-qr-code-with-logo-fast2.p.rapidapi.com /qrcode
Method POST
Request Body
{
   "data" : "www.qrmeister.com",
   "style" : {
      "gradient" : "angular",
      "color" : "#00a020",
      "gradientColor" : "#0000af"
   }
}
Header Value
Content-Type application/json
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Header Value
x-size-px 144
x-request-id f32cfb10-c77d-489d-8c11-6e54c1c5753b

Customize Eye Colors

 

By default, the QR code color or the color gradient applies to the eyes.

 

Apply custom eye-ball and eye-frame colors by setting or more parameters listed below.

 

eyeBallColorTopLeft, eyeBallColorTopRight and eyeBallColorBottomLeft 

 

eyeFrameColorTopLeft, eyeFrameColorTopRight and eyeFrameColorBottomLeft

 

In this example a custom color is applied to all eye-elements with an exception for the top-left eye-ball and top-right eye-frame which default to the body color.

Show Custom Eye Color Request

Url /qrcode
Method POST
Request Body
{
   "data" : "www.qrmeister.com",
   "style" : {
      "eyeFrameColorTopLeft" : "#ff0000",
      "eyeBallColorTopRight""#0000ff",
      "eyeFrameColorBottomLeft""#0000ff",
      "eyeBallColorBottomLeft""#ff0000"
   }
}
Header Value
Content-Type application/json
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Header Value
x-size-px 144
x-request-id eb58bf7e-c439-4ba8-875e-8d1650984a5e

Changing QR Code Shape

 

Use parameter moduleShape to customize the QR code data section.

 

Customize eye-ball and eye-frame shapes using parameters eyeFrameShape and eyeBallShape.

 

In the documentation section, the shape parameter values and examples are listed.

Show Custom Shape Request

Url /qrcode
Method POST
Request Body
{
   "data" : "www.qrmeister.com",
   "style" : {
      "moduleShape" : "lines-horizontal",
      "eyeFrameShape" : "ear",
      "eyeBallShape" : "coaster"
   }
}
Header Value
Content-Type application/json
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Header Value
x-size-px 144
x-request-id 0e05ef80-bf08-4226-a3ba-c5520b782d9e

Working with Logos

 

Before a logo can be added to QR codes it first needs to be uploaded. Once uploaded the logo van be used repeatedly.

 

The logo name returned by the Upload Logo API is simply copied to the parameter logo in the style object.

 

Parameter removeLogoBackground can be used to remove modules behind a logo as explained below.

Uploading Logos

 

Upload a logo using API /QR-code/upload-logo POST method to post a multi-part body containing form field file and image.

 

Image formats SVGpng and jpeg are supported.

 

Uploading a new logo under the same name requires a cache to be invalidated by adding the header parameter Cache-Control value no-cache to the next QR code generator API call.

 

Show Upload Logo Request

Url
Method POST
Request Multipart Body Value
file [your-logo.svg]
image/svg+xml [file contents]
Header Value
Content-Type multipart/form-data
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Body
{
   "logo" : "your-logo.svg"
}
Header Value
x-request-id c97b2523-20d3-4951-b836-e7bd380b0325

Appling the Uploaded Logo

 

Include the parameter logo in the style object to add the logo to the QR codes.

 

Show Apply Logo Request

Url /qrcode
Method POST
Request Body
{
   "data" : "www.qrmeister.com",
   "style" : {
      "logo""qr-meister-logo.png"
   }
}
Header Value
Content-Type application/json
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Header Value
x-size-px 144
x-request-id 4b0f080a-f1ed-4f8b-a13d-d5a85f41a86f

Remove Logo Background

 

Add parameter removeLogoBackground to the style object and set to true to remove the modules behind the logo.

 

This parameter has a different effect depending on the shape of the logo.

 

It is recommended is to use logos that are a perfect square since these align with the modules in both height and width.

 

If the logo is wider than higher it will align to the modules in width but likely not in height as the logo’s aspect ratio is always maintained.

 

Similarly, if the logo is higher than wider it will nicely line up to the modules in height but likely not in width.

Bringing It All Together

 

See the QR code below showing all customization.

 

(This one will not win a beauty contest)

Show Fully Styles QR Code Request

Url /qrcode
Method POST
Request Body
{
   "data" : "www.qrmeister.com",
   "style" : {
      "logo" : "qr-meister-logo.png",
      "removeLogoBackground"true,
      "gradient"true,
      "moduleShape" : "lines-horizontal",
      "eyeFrameShape" : "ear",
      "eyeBallShape" : "coaster",
      "eyeFrameColorTopLeft" : "#ff0000",
      "eyeBallColorTopLeft" : "#00ff00",
      "eyeFrameColorTopRight" : "#00ff00",
      "eyeBallColorTopRight" : "#0000ff",
      "eyeFrameColorBottomLeft" : "#0000ff",
      "eyeBallColorBottomLeft" : "#ff0000",
      "gradient" : "angular",
      "color" : "#00a020",
      "gradientColor" : "#0000af"
   }
}
Header Value
Content-Type application/json
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Header Value
x-size-px 144
x-request-id 48848d9e-bfff-4d59-b597-3432a71aa4c7

Using GET Method

The tutorial thus far uses the POST-method however the GET-method is supported as well and takes the same parameters.

 

These parameters are passed in the url query-string and require url-encoding for parameters of type String and Object.

 

Useful for the GET-method is parameter download which, if set to true, can force a download when used in a browser.

Show GET Request

Url /qrcode
Method GET
Request
Query Parameter
Value
data www.qrmeister.com
format png
download true
size 3
unit inch
style %7B%22logo%22:%22qr-meister-logo.png%22,%22removeLogoBackground%22:true,%22gradient%22:%22angular%22,%22moduleShape%22:%22lines-horizontal%22,%22eyeFrameShape%22:%22ear%22,%22eyeBallShape%22:%22coaster%22,%22customEyeColors%22:true,%22eyeFrameColorTopLeft%22:%22#ff0000%22,%22eyeBallColorTopLeft%22:%22#00ff00%22,%22eyeFrameColorTopRight%22:%22#00ff00%22,%22eyeBallColorTopRight%22:%22#0000ff%22,%22eyeFrameColorBottomLeft%22:%22#0000ff%22,%22eyeBallColorBottomLeft%22:%22#ff0000%22,%22color%22:%22#00a020%22,%22gradientColor%22:%22#0000af%22%7D
Header Value
x-rapidapi-key [your Rapid API key]
x-rapidapi-host custom-qr-code-with-logo-fast2.p.rapidapi.com
Response Header Value
x-size-px 144
x-request-id 91588301-12a4-4952-8330-50368f8fc878