How to create a QR Code Generator with Free API

An Overview of QR Code

QR Code has become a go-to technology for people to access to applications and websites. Retailers aims to allow users to easily access to their software products or online advertisement, they would create their own QR code. With a few lines of code and a free API, you can also have your own QR code generator up and running in no time. In this blog post, we will show you how to create a QR code generator API with the least effort. We will also walk you through the process of creating a QR Code Generator API that generates user-friendly QR codes. Let’s get started!

What is a QR code and how does QR code work?

Now, let’s understand what QR codes are and how they work. QR Code is short for ‘Quick Response’ Code. It is a square-shaped of two-dimensional code that can be read easily by smartphones and other mobile devices.

They are commonly used everywhere to hold content such as website URL’s, contact details, or simple text messages. You may not even know what they are, but you’ve seen them. Not every QR code is shaped like a perfect plain square. Some of them are designed with unique colors, patterns and logos.

A QR code works in a similar way with barcodes. The black squares and dots on a QR code represent different pieces of information. When scanned, the unique pattern on the barcode translates into human-readable data. This process happens in seconds. Users must scan the code with a QR reader or scanner, although nowadays most people scan QR codes with smartphones. 

What are QR codes commonly used for?

1. Marketing

Retailers and enterprises are the frequent users of QR codes. They use the technology to provide easy access and spike the customers’ curiosity to promote their advertising contents.  For instance, in April 2021, the game company cyGames and a video-streaming business Bilibili used 1,500 drones to create a massive QR code in the sky over Shanghai as part of a light show to celebrate a milestone.  Most of the live audience are leaded to the product website to purchase the game products.

2. Communication

In the first quarter of 2020, the peak of Covid-19 pandemic, QR code came in to help out businesses and governments that needed a way to communicate in a suddenly touchless society. They are used in place of menus in restaurant, to inform customers about Covid-19 changes on doors, in mailings, and connected to landing pages with the most recent news. 

Type of QR Code that can be generated

Programmatically, you can generate multiple types of QR Code for your business or current projects, such as:

1. Website link (URL) QR Code

This is the most common type of code that used for directing end-users to QR code provider website.

2. Text and Numbers QR Code

Test QR Code encodes text and numbers. You can find this type of QR codes in various use cases like encoded product information, coupon codes and terms of use.

3. Network QR Code

The network QR Code is used when end-users are leaded to connect a specific WIFI network. This saves the time for manually inputting WIFI passwords to access the internet.

4. Certificate QR Code

Governments often use this type of QR Code to

Certificate QR Code is used as an identifier for the end-users. This replaces the paper copy of certificates like access tickets and vaccination records.

What is an API?

We all know that there are somethings we just don’t want do it manually. That’s where APIs come in. An API, or application programming interface, is a set of rules and specifications that allow two software programs to communicate with each other. Developers can build applications that work seamlessly together and make it possible for end-users to complete complex tasks with just a few clicks. By using an API, you can save yourself time and effort of having to write your own code from scratch. Let’s take a closer look at what an API is and how you can use it in your own development projects. If you want to know more about what an API is, check this link out.

For example, imagine being able to book a flight, hotel, and rental car all in one place by using just a few taps on your smartphone. This would not be possible without APIs! As the world becomes increasingly interconnected, the importance of well-designed APIs will only continue to grow.

What is QR code generator API used for?

If you’re a software developer, you know how important it is to stay efficient. That’s why using a QR code generator API can be such a valuable tool. But here’s the thing, for your business applications, QR codes are often required in bulk. It is not possible to manually work on the generator to create QR codes.

A QR code generator API is to provide real-time QR codes generations by sending an API request to the server and send the required QR code in return .

Advantages of using QR Code API

QR Code API offers various advantages while generating QR Codes programmatically. Here are some of them:

1. Provides automatic processes

QR Code API makes use of the program to provide you a seamless process to manufacture QR codes. Simply inject the use of this API into your working application or software products, you would enjoy a smooth workflow and a swift experience for you and your end-users.

2. Provides full customization

QR Code API allows users to tailor-make a QR code with desired appearance, such as colors, logos and even background images. The QR code will no longer be plain, boring and black-and-white generic squares, in order to attract more scans that boosts up your business or work.

Create a sample QR Code Generator API 

Why should you choose this QR Code Generator?

The QR Code Generator API is supported by FabriXAPI, an All-in-one API Platform that supports API Needs and it is certified as “AWS Qualified Software” since 2022. You can register for an API portal for free, share and monetise APIs easily on the trustable platform certified by ISO27001.

Features

Using this tool, you can convert a string or link to a QR code. The QR code output format is an SVG image.

Prerequisites

You will need a suitable QR Code API provider. Using Open Image Lab’s QR Code API, you can proceed easily as follows :

1. Sign up for a Developer Account

You need to sign up to the API Portal in order to subscribe and access this API. For more information, please refer to “Register as a Developer“.

2. Active API Subscription

You need to subscribe to this API before consuming it. Many APIs come with a free trial plan so that you can experience the API functions provided free of charge. For more information, please refer to “Subscribe to APIs“.

3. API Credential

An API Key is required to access the API. It can be obtained in the Developer Admin Portal once you have completed the signup to FabriXAPI. For more information, please refer to “Create API Key“.

You may check out the full API documentation on FabriXAPI User Guide.

Parameters

There is only one parameter available in this API.

qrcode_url: The link you would like to convert into a QR code.

You may check out the full API documentation here in the OpenAPIHub.

Create an attractive User Interface

We are here to guide you with detailed step. Let’s get into first part – creating an user interface for users to enter their desired data for the QR Code. 

Try this HTML yourself!

<div id="app">
  <div class="demo-description">
    <h2>QR Code Generator</h2>
    <span>To protect your credentials.</span>
    <br>
    <span>DO NOT save this API Key in the code sandbox!!</span>
  </div>
  <div class="test-area">
    <div class="input-area">
      <span>QR Code URL</span>
      <input
        type="text"
        placeholder="http://example.com"
        v-model="qrcode_url"
      >
      <br>
      <span>API Key</span>
      <input
        type="text"
        placeholder="Input your key here"
        v-model="apikey"
      >
      <br>
      <button v-on:click="generate">Generate QR Code</button>
    </div>
 
    <div class="output-area">
      <template v-if="error">
        <span v-html="error" />
      </template>
      <template v-else-if="!result">
        Fill in the QR Code URL and API Key, then press "Generate QR Code".
      </template>
      <template v-else>
        <div v-html="result" />
      </template>
    </div>
  </div>
</div>

Apply CSS on the user interface

After creating the basic structure to get user input for the parameters, we need to add the following CSS to decorate our UI to make it more attractive!

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
body {
  background: #20262E;
  padding: 20px;
  font-family: 'Open Sans', sans-serif;
}
 
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  height: 400px;
}
 
.demo-description {
  text-align: center;
  margin-bottom: 20px;
}
 
.demo-description h2 {
  font-weight: semibold;
  margin-bottom: 5px;
}
 
.demo-description span {
  color: #999999;
}
 
.test-area {
  display: flex;
}
 
.input-area {
  text-align: right;
}
 
.input-area span {
  display: inline-block;
  line-height: 48px;
  margin-right: 8px;
  text-align: right;
  width: 120px;
}
 
.input-area input {
  border: 1px solid #999999;
  border-radius: 3px;
  height: 30px;
  width: 150px;
  padding: 0 7px;
}
 
.input-area input::placeholder {
  color: #d0d0d0;
}
 
.input-area button {
  background-color: #57abf0;
  border: 0;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
  margin-top: 15px;
  width: 166px;
  padding: 15px 10px;
}
 
.output-area {
  color: #505050;
  font-size: 14px;
  margin: 20px;
  margin-right: 0px;
  width: calc(100% - 320px);
}
 
@media screen and (max-width: 616px) {
  .input-area {
    text-align: center;
  }
}
  .input-area span {
    text-align: left;
    width: 150px;
  }
   
  .output-area {
    width: calc(100% - 150px);
  }
   
  .input-area button {
    width: 140px;
    padding: 10px 7px;
  }
}
 
.output-area svg {
  transform: scale(0.7) translateX(-30px) translateY(-95px);
}

Create a sample QR Code Generator API with Vue.js

Now, you can add the following Vue.js script to generate the QR Code.

const endpoint = 'https://trial-api-qr-code-2izv.gw.openapihub.com/academicapi/qrcode';
 
new Vue({
    el: '#app',
    data() {
    return {
      qrcode_url: '',
      apikey: '',
      result: '',
      error: ''
    }
  },
  methods: {
    generate: function() {
        const param = `?qrcode_url=${this.qrcode_url}`
      const axiosConfig = {
        headers: {
          'content-type': 'application/json',
          'x-openapihub-key': this.apikey
        }
      }
     
    axios.get(`${endpoint}${param}`, axiosConfig)
        .then(res => {
        this.error = ''
        this.result = unescape(res.data)
      }).catch(err => {
          this.error = `Error occurred -<br>${err.response.data.message}`
          console.log('Error', err.response.data.message)
      })
    }
  }
})

Now that we have all the materials prepared. Let’s take a look at creating our first QR Code with our generator. 

Simply fill in the form with a QR Code URL and an API Key, then press “Generate QR Code”. Swiftly, you can get your very first QR Code generated from your QR Code Generator.  

And the output is as follows:

Error Responses

You might get some error responses under certain circumstances.

Example response with status 401 – Unauthorized

{"message":"Invalid authentication credentials"}

Example response with status 502 – Internal Server Error

{"message": "Internal server error"}

Supported response codes

• 200 – OK
• 401 – Unauthorized
• 502 – Internal Server Error

Conclusion

QR codes are an interesting and powerful technology that can help you drive traffic and sales to your website or product. By understanding how they work and how to create a QR code generator API, you can create custom QR codes with easy-to-use QR code generator API for your business or any needs. In fact, there are various ways to create a QR Code generator API. Here, we provided you the easiest way to do it.