How to Add CRM to Your QR Code Application
Tags: node, tutorial, qrcode, npm
Published: 2022-04-20 21:46:09

Since the beginning of the pandemic, we have seen QR Codes pop-up virtually everywhere. In fact, there has been a [94% growth] (https://www.bluebite.com/nfc/qr-code-usage-statistics) in QR code usage since 2018! However, QR Codes are still vastly under-utilized. In this article, I will cover a powerful use-case which can help you gather contact data using Openscreen's dynamic QR Code generator [SDK](https://docs.openscreen.com/overview/) and a customer relationship management ([CRM](https://www.klaviyo.com/)) tool.

## Why Use QR Codes? 
Interactions with smart products has increased by 81% since 2018, and [dynamic QR Codes](https://www.openscreen.com/) are a great way to digitize your real-world advertisements. Additionally, you can gather valuable and [rich data](https://docs.openscreen.com/retrieving-scans) from each QR code scan. Openscreen's SDK allows you to use the scan data to create [contacts](https://docs.openscreen.com/adding-contacts-to-your-project), which can be used for future campaigns - more on this later! 

## Using a QR Code SDK
In the examples below, I will cover how to use Openscreen's SDK to create a QR Code, capture scan data and connect to a CRM tool.  

### Requirements
- [node.js](https://nodejs.org/en/) and [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- [dotenv](https://www.npmjs.com/package/dotenv)
- [Axios](https://www.npmjs.com/package/axios)
- An Openscreen [account](https://app.openscreen.com/signup) (free)

### Installation
After installing node.js and npm, navigate to your desired directory and use the command below to install Openscreen's [SDK](https://docs.openscreen.com/getting-started):
```
npm i @openscreen/sdk
```
You can now install the other dependencies as below:
```
npm i axios
npm i dotenv
```

### Environment Details
Create a new folder for your project. Within your folder create a `.env` file to store your `OS_API_KEY` and `OS_API_SECRET`. You can find these details in your Openscreen [dashboard](https://openscreen.com/signin).

### Generate Your First Smart QR Code
The code below will return a smart QR Code image in your project directory. An advantage to using dynamic QR codes is that the destination URL for this QR code can be updated at any point using the [`update()`](https://docs.openscreen.com/library/qrCode#update_qr_code) method. 
{% embed https://gist.github.com/birinder-lobana/5ab173d595e211e58b20ede62973c29f %}

This QR Code should now be directed to a web form where the scanner's contact data can be captured. Upon submitting the form, two API calls are triggered - creating a contact for Openscreen and adding the contact in the CRM profile list: 
{% embed https://gist.github.com/birinder-lobana/d8a250003b2cd40e8cc395106760602f %}
You may find the complete code [here](https://gist.github.com/birinder-lobana/42786606dda1272b6d13eb2898a272aa). 
By creating a contact with Openscreen, you will have access to a database of contacts linked to your QR Code projects. Additionally, this unlocks features such as a direct 'scan to SMS' which can send pre-defined SMS templates to a contact upon successful scan. 

## Conclusion

Using a few lines of code, we were able to generate a dynamic QR code linked to a web form, allowing us to populate contacts to a CRM tool. We additionally saved these contacts in Openscreen, which allows us to run future QR code related campaigns with the same audience. 

See other examples and use-cases in the Openscreen Code-locker github [repository](https://github.com/Openscreen-Inc/code-locker). 

Do you know of an interesting use-case for QR codes? Share below!