DEV Community: Birinder Lobana

Engage Customers with a QR Code Virtual Line-Up

Birinder Lobana — Fri, 30 Dec 2022 20:46:01 +0000

As a customer, there is nothing worse than waiting in a long line-up to enter a store. This is especially true during the current boxing week! With a QR code enabled virtual lineup, customers can maintain their position while exploring the neighbouring stores.

Many stores across North America have started implementing virtual lineups. However, most virtual lineups miss a huge opportunity to engage with their customers. In this article, I will showcase a QR code enabled virtual line-up implementation that allows SMS reminders while capturing customers' contact information.

Getting Started

Here's what you will need for this workflow:

A QR Code generation tool
A landing page with a web form
A CRM tool or equivalent to save customer data
Ability to send SMS reminders

You may choose various available packages for the workflow mentioned above. For this implementation, I will be using Openscreen's node SDK which provides all the necessary tools for this workflow, including the ability to send SMS messages.

Implementation

Here's a high level diagram of the workflow:

Generate a Dynamic QR Code

Openscreen's SDK makes it extremely straight forward to generate unique dynamic QR codes. These QR codes will generate a unique scanId upon each scan, which will be to fetch the scan data. Openscreen Dynamic QR codes provide high scanability even at a distance. Combined with a simple process to enter the line-up, stores can attract more customers.
The intent or the destination of this QR code should be a custom landing page with a web-form for your store. Upon scanning this QR code, there will be some backend processing to determine whether a customer is already in the line-up or not. If you are a new customer, you will be directed to the landing page, otherwise, you will see your current position in the line-up.
Here's how you can create a dynamic QR code:

// Initiate the Openscreen node SDK 
const { Openscreen } = require("@openscreen/sdk");
require('dotenv').config();
const os = new Openscreen().config({key: process.env.OS_API_KEY, secret: process.env.OS_API_SECRET});
// Obtain ProjectID from Openscreen Dashboard
const projectId = 'YOUR PROJECT ID';

async function main() { 

  // Create an asset for a new listing sign being hosted for 123 Main Street 
  const res = await os.project(projectId).assets().create({
    name: 'Store Lineup',
    description: 'Store Line up For Outlet Mall',
    qrCodes: [{
      intent: 'https://www.my-qrcode-app.com',
      intentType: 'DYNAMIC_REDIRECT'
    }]
  });

  // Returns a scannable QR Code image in png format
  const { qrCodeId } = res.asset.qrCodes[0];
  const qrCode = await os.qrCode(qrCodeId).get({format: 'png'})
  await os.saveQrImageDataToFile(qrCode, 'my-dynamic-qr-code.png');

  // View the new asset that you have created 
  console.log('Asset:', JSON.stringify(res, '',2));
}

main().catch((err) => {
  console.error(err);
});

Create a Web Form

The purpose of this form is to capture only the most essential information from the customer - keep it short and simple. Remember to capture the customer's consent to receive future emails.

After the form is created, you will need to create a UI to display the current spot in the lineup. Stores can use this opportunity to advertise their best selling items on this landing page.

Create Your Virtual Lineup Backend

The backend for your virtual lineup involves three major steps - storing the contact data from the front end, storing and retrieving current position and the ability to send SMS reminders if customers reach position less than 5. Using Openscreen's SDK, you can create a contact based on the customer input, and send SMS messages to that contact.

Here's how you can create an Openscreen contact and send SMS using a template:

// Initiate the Openscreen node SDK and include the project ID that you recieved using the Openscreen dashboard 
const { Openscreen } = require("@openscreen/sdk");
require('dotenv').config();
const os = new Openscreen().config({key: process.env.OS_API_KEY, secret: process.env.OS_API_SECRET});
// Obtain projectId from the Openscreen Dashboard
const projectId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
// Capture scanId from the QR code scan
const scanId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';

async function main(){

  // Create a new contact 
  const contact = await os.project(projectId).contacts().create({
    firstName, 
    lastName,   
    cellPhone,
    consent: {
      url: "https://www.openscreen.com/legal", 
      consentedAt: date.now(),
      consentType: 'SMS',
    }
  });
  // Obtain contactId from the response
  const { contactId }  = contact;

  // Create an SMS template
  const smsTemplate = await os.project(projectId).smsTemplates().create({
    smsTemplateName = "Position",
    body: "You are now at position 5, please make your way to the {{asset.name}} now.",
  };

  // Send SMS to contact
  const sendSMS = await os.scan(scanId).sms().send({
    contactId: contactId,
    smsTemplateName: "Position",
  };
}

main().catch((err) => {
  console.error(err);
});

Increase Engagement and Satisfaction

With a simple implementation of a QR code line-up, you are able to to engage customers, increase customer satisfaction and potentially attract more customers to your store. QR code line-ups also make your store stand-out. With the high scanability of QR codes, you can even attract the physical line-ups of your neighbouring stores! It's truly a win-win situation!

If this implementation is of interest to you, feel free to contact Openscreen for similar customized solutions.

How NuvoLinQ Automated their Fulfilment and Customer Support Processes using Openscreen Track

Birinder Lobana — Wed, 14 Dec 2022 20:54:41 +0000

The Challenge

NuvoLinQ supplies and supports routers and sim cards that provide internet services for IoT devices. With connectivity in over 175 countries, they provide essential connections to businesses whose network access is mission critical to their operations. They needed a solution that could simplify fulfilment and digitize support for their devices in the field.

The Solution - Openscreen Track

Leveraging Openscreen Track's dynamic QR Codes, and its asset and contact management capabilities, NuvoLinQ launched ScanLinQ to simplify router fulfilment and digitize customer service.

With Openscreen Track, Nuvolinq was able to:

Create a unique, trackable QR code for every router and sim
Retrieve the last known status information for routers
Easily identify offline routers and send details to their cloud management system
Have customers submit a support ticket with only a camera scan
Allow technicians to diagnose and report router details to the support team

Key Results

NuvoLinQ was able to transform their fulfilment and customer support experience by configuring simple yet sophisticated workflows leveraging Openscreen Track. The resulting solution allowed NuvoLinQ to decrease response time, decrease downtime and increase customer satisfaction.

About Openscreen Track

Openscreen Track leverages dynamic QR Codes, asset management, scan capture and contact management to track people and products as they move through your supply chain. NuvoLinQ is one of many use-cases of Openscreen Track. For more information, visit www.openscreen.com or contact us.

5 Best Practices to Use QR More Codes Effectively

Birinder Lobana — Tue, 01 Nov 2022 14:39:48 +0000

QR codes offer the unique ability to digitize real-world advertisements and engagements. The COVID-19 pandemic showed us how QR codes can be a quick and effective way to perform several digital tasks.

While QR codes are being used in several advertisement campaigns, they are often poorly executed. Here are 5 ways you can use QR codes more effectively.

Use Dynamic QR Codes

QR codes may all look similar in their overall shape and design, but there are two distinct types of QR codes - static and dynamic. Static QR codes simply direct a user to the encapsulated data. Once a static QR code has been created, it cannot be changed.

Dynamic QR codes have several advantages. The data they store can be updated at any time without having to re-create (or re-print) the QR code. Upon scanning, the user is first directed to a cloud server, then redirected to the (up to date) destination of the QR code.

We often see static QR codes being used for restaurant menus; However, this use-case can be enhanced manifold if unique dynamic QR codes are used instead. A unique dynamic QR code could be added to each table, which can then be used to track orders and even pay the bill.

Openscreen's QR code engagement solutions bring dynamic QR codes to the next level by capturing the scanning device's non-identifying data. This includes valuable information such as ISP-based location, IP address, device kind, device model and much more.

Over time, this data can help you make informed decisions for your future marketing campaigns.

Ensure the QR Code Landing Page is Mobile-Friendly

Since QR codes will be scanned by smartphones, it is crucial that you have a mobile friendly landing page. For the best user experience, any other links or CTA's on the landing page should also be mobile friendly.

Keep in mind that iPhones, Android phones and Samsung phones, all use a different default mobile browser (safari, chrome and Samsung browser respectively), which may each render your landing page differently.

Place QR Codes in an Easy to Scan Environment

While the operation of a QR code is instantaneous, it may take several seconds for a customer to scan your QR codes.

For this reason, QR codes should not be placed on moving vehicles, changing billboards or TV commercials.

The ideal location for QR codes is in an area with high pedestrian traffic. Additionally, QR codes should be placed in a relatively central position of your banner, at about eye level from the ground.

In the picture below, the QR codes are placed in an inconvenient spot. This should be avoided whenever possible.

Consider the Size and Scan-ability of the QR Code

The size of the QR code is another key aspect in marketing campaigns. A QR code placed on a banner outdoors should be of a relatively large size to ensure scan-ability from a distance.

A QR code on a curved surface, such as a wine bottle, should be as small as possible to allow high scan-ability.
QR codes also have an error correction feature built-in. Different levels of error correction can determine how "durable" and scannable a QR code is. Read more about error correction levels here.

Create Contacts from Your Interested Audience

Having captured the interest of your customer and getting them to scan your QR code is only a partial victory in a marketing campaign.

To make the most out of the campaign, you should prompt your audience to be added to your newsletter. You can do so with the help of an enticing promotion/coupon which would be available to customers only after providing their contact information. You can then export this information to your CRM platform and start populating a list of consented contacts. An application like Openscreen can help you curate and obtain contact information through QR codes and organizes the list in a seamless visual dashboard with easy access to your data.

Conclusion

One of the most important aspects of any advertising campaigns is to simply know its success rate. The above 5 practices will ensure that every single QR code campaign will generate valuable data and will have a measurable success rate. Additionally, you will be able to concentrate your resources on your most (and least) successful advertising locations.

To allow you to create your first dynamic QR codes for your advertising campaigns, I invite you to check out Openscreen. It is a one-stop, developer-first platform that offers all the tools to run a successful QR code campaign.

Openscreen also provides a native ability to store Customer Contact information from QR code scans. The data you collect from your QR code campaigns is available for you to visualize in the Openscreen dashboard.

For tailored solutions, feel free to contact Openscreen.

QR Code Engagement Workflows Using a Python SDK

Birinder Lobana — Mon, 27 Jun 2022 17:38:27 +0000

Since the beginning of the pandemic, we have seen QR Codes pop-up virtually everywhere. In fact, there has been a 94% growth in QR code usage since 2018!

According to eMarketer, the number of US smartphone users scanning QR codes will increase from 83.4 million in 2022 to a projected 99.5 million by 2025. This is an excellent opportunity for customer engagement agencies to adopt QR Code engagement solutions.

Openscreen's QR Engage

Openscreen is an end-to-end engagement and insights platform to drive revenue and client loyalty. Openscreen offers a comprehensive python SDK which can help you create powerful customer engagement workflows.

In the example below, we will create a Dynamic QR code which would lead to a web-form, and enter submissions into a draw. A random winner is chosen and an SMS is sent to the winner.

Here's what you will need for this workflow:

A free Openscreen account
Python 3.10+
Openscreen's Python SDK
A custom webform to capture customer's contact information

Environment Set-up

Before we begin implementing our workflow, we will store the following identifiers in a .env file. They are available on your Openscreen Dashboard:

ACCOUNT_ID='xxxxxxxxxxxxxxxxxxxxxx'
OS_ACCESS_KEY='xxxxxxxxxxxxxxxxxxxxxx'
OS_ACCESS_SECRET='xxxxxxxxxxxxxxxxxxxxxx'
PROJECT_ID='xxxxxxxxxxxxxxxxxxxxxx'

The following code will authenticate your application:

Create A Dynamic QR Code

Openscreen's python SDK uses several core objects to ensure the scalability of QR code enabled workflows.

An Asset is a core object that stores information about a physical or a digital object. The Asset object represents the QR Code. One Asset can have several QR codes associated with it - think of a lottery ticket (the asset) with multiple QR Codes.

Creating an Asset and associating a dynamic QR code can be done in a single call. In the code below, I am creating a billboard (Asset) for a real-estate listing. A person scanning this QR code should be led to your web-form requesting information about the customer. After the form is submitted, you can display the information about the listing.

Capturing QR Code Scans

One unique advantage of using Dynamic QR Codes is that they are traceable. Openscreen's SDK generates a scan object, identified by a scanId each time a dynamic QR is scanned. Additionally, this scanId can be appended as a query string parameter to the destination URL of the QR code. This allows us to create workflows surrounding a single QR code scan!

The following flag sets the scanId in the query string parameter of the QR code destination URL:

dynamic_redirect_type: 'SCAN_ID_IN_QUERY_STRING_PARAMETER'

Creating a Contact

Once the QR code is scanned, a scan object is generated, while the user is led to your custom web form. After the user submits the form, your application should fetch the user-details and the scanId from the URL. This will allow you to create a contact against the scanId:

Note: Openscreen requires contacts to have a consent before you can communicate with the contact.

Be sure to store this scanId which was used to create this contact. In the above code, I am storing the scanId as one of the custom attributes in the contact object.

This is the extent of your campaign, where you are able to capture consented customer contacts. You can choose to export these contacts to a CRM tool, or to a CSV file.

Send SMS

To choose a winner of your campaign, you can find a random contact from your list of contacts. You can fetch all your contacts in this project by calling the GetContactsByProjectId function. In order to send SMS to this contact, you will need to fetch the scanId. In our case, it is available as one of the custom attributes:

Conclusion

The above workflow is an excellent example of how QR code enabled solutions can boost customer engagement. In this case, there was a prize incentive, but the model can be reused to showcase new products while providing unique coupon codes, communicate about upcoming events and incentivize ticket purchases, and much more. At the end of the campaigns, you receive a list of consented customer contacts for your future campaigns.

Scan to Cart QR Codes

Birinder Lobana — Tue, 14 Jun 2022 16:50:50 +0000

It is difficult to believe how disruptive the pandemic has been. Innovation in the field of contactless technologies is a direct outcome of the pandemic. Being mobile-friendly, QR codes have become the primary tool for contactless applications.

QR codes are being used for a variety of use-cases, and with more of the population being aware of QR codes usage, they can now be used to their true potential.

Here's one way that Brands can utilize QR codes to enhance product knowledge and potentially increase conversion rates.

QR Code for Scanning Items to Shopping Cart

A 'Scan-to-Cart' QR Code simply gives the ability to add an item to a retailer's shopping cart. The process should be a single-step procedure without requiring to sign-in.

Dynamic QR Codes enhance this workflow since they are trackable and capture valuable data from each scan.

There are several use-cases where such a QR code can be used:

Scan to Cart QR Codes on Promotional Flyers

I am sure you see a pile of promotional flyers in your mail on a regular basis. By using scan-to-cart QR codes next to these items, brands can enhance shopping experience and potentially increase conversion. Additionally, brands can incentivize scanning the QR codes by offering extra discounts for scanned items.

More importantly, brands can track all the flyers that captured a scan, allowing them to know whether a flyer was seen or not.

Combined with unique QR codes on flyers for each postal code, brands can analyze several data points, such as, frequently scanned items, areas with high number of 'successful' flyers, density of iPhone vs Android users, and much more!

Scan to Cart QR Codes for In-Store Items

Scan to cart QR codes can be used to shop for highly popular items. Imagine a clothing store which would only allow customers to try-on clothes, and all purchase orders must be made online. This could be made easier by adding Scan to cart QR codes near the display items.

This would allow brands to scale down the size of their stores, reducing costs and allow maintaining a larger stock in their warehouses.

Similarly, brands could display QR codes for outfits on mannequins, allowing users to quickly purchase a complete outfit.

This would be extremely useful at a furniture store like Ikea, where you could simply scan a QR code near a display furniture item and add all the required pieces for that configuration to your shopping cart.

Scan to Cart QR Codes for 'Sold-Out' Items

If you are at a store and your favourite item is sold out in-store, a Scan-to-Cart QR code might just be what you need. The purpose of this QR code is to add the exact item to your online shopping cart, if it is available online. If not, the dynamic QR code can programatically direct to a webform to notify customers when the item is available.

As a side benefit, you will be able to capture customers' contact information and maintain future communications.

Implementation

Generating dynamic QR codes is the key ability needed for the above examples. The destination or the intent of these QR codes need to change based on pre-defined conditions.

Openscreen’s comprehensive QR code SDK makes it easy to generate dynamic QR codes required for the above examples. You can also create your own workflows which can be highly valuable for innovative customer engagement and tracking assets, while capturing customer contacts.

Using Openscreen's SDK, the following code will generate a Dynamic QR Code:

See a list of helpful public gists here.

I hope you see the potential of using QR code solutions in the advertising and customer engagement industries. It only takes a few lines of code to create a QR code workflow which can help gather valuable data for brands while creating seamless customer experiences.

How to Use Dynamic Redirects to Improve Your QR Code Campaigns

Birinder Lobana — Fri, 13 May 2022 17:23:03 +0000

QR Codes or Quick Response codes have become increasingly popular since the pandemic. As per a report by Gartner, 80% of the order, checkout, and payment services will become contactless by 2024. In this article, I will cover briefly about how QR codes work, types of QR codes and how certain re-direct types can help gather more data-points for your QR code campaigns. In the examples shown below, I will refer to Openscreen as they offer a comprehensive QR code SDK.

How do QR Codes Work?

QR codes work by encapsulating human readable data into a unique pattern. These QR codes are printable and help to digitize the real world. There are broadly two types of QR Codes:

Static QR Codes

These are the most basic QR codes which simply direct the user to the destination or intent. For the purpose of smart interactions, static QR codes should not be used. They should only really be used in workflows involving a 'non-smart' scanner expecting a plain text output, example a UPC.

Dynamic QR Codes

Dynamic QR Codes direct user to the intent using a two-step redirect. Upon scan, the QR code first directs to a cloud server which captures scan data from the scanning device including location, IP address, device kind, device model and much more. An example of Openscreen's scan object can be seen below

Additionally, dynamic QR codes can be tracked, updated, and modified over their lifecycle. They can redirect a user to a different location based on the status of a QR Code, who the scanner is, and much more. You can now guess the opportunity that static QR codes miss! Sadly, a vast majority of QR codes in North America are static.

Types of Dynamic Redirects

Each scan from Openscreen's Dynamic QR codes is identified by a unique scanId. Often this scanId is the 'main player' for any QR code related workflows. Openscreen offers the following redirect types which help identify information regarding the QR codes:

SCAN_ID_IN_PATHPARAMETER: The user is redirected to the QR Code intent and a Scan Object is captured. The Scan ID will be added to the URL as a path parameter. This means that when a user scans the QR Code, the scanId will be appended to the intent (URL) that the scanner is directed to upon scan. For example, if the intent of the web application that you created has the URL 'https://www.myrealestatelisting.com'. The user will be taken to a final destination of 'https://www.myrealestatelisting.com/scanId'. Example: 'https://www.myrealestatelisting.com/c262c53e-3ec0-4f48-823e-de5539dd85dc'. Choosing this QR Code parameter will allow your application to understand which QR Code was scanned when taking the user to your web application.

SCAN_ID_IN_QUERY_STRING_PARAMETER: In this case, the scanId will be added to the URL as a query string parameter. For example, if the intent of the web application that you created has the URL 'https://www.myrealestatelisting.com'. The user will be taken to a final destination of 'https://www.myrealestatelisting.com/?scanId'. Example: 'https://www.myrealestatelisting.com/?c262c53e-3ec0-4f48-823e-de5539dd85dc'. Choosing this QR Code parameter will allow your application to understand which QR Code was scanned when taking the user to your web application.

NO_SCAN_ID: This is the default value where the user is redirected to the QR Code intent and a Scan Object is generated. The scanId is not used in this redirect.

Conclusion

Knowing which QR Code was scanned will allow you to create asset & contact relationships, dynamically update your QR Code, and much more. It is especially applicable for QR code enabled ad-campaigns, real-estate listings and direct mail.

Do these re-direct types help your QR code workflow? Share in the comments below!

How to Add CRM to Your QR Code Application

Birinder Lobana — Wed, 20 Apr 2022 21:46:09 +0000

Since the beginning of the pandemic, we have seen QR Codes pop-up virtually everywhere. In fact, there has been a 94% growth 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 and a customer relationship management (CRM) tool.

Why Use QR Codes?

Interactions with smart products has increased by 81% since 2018, and dynamic QR Codes are a great way to digitize your real-world advertisements. Additionally, you can gather valuable and rich data from each QR code scan. Openscreen's SDK allows you to use the scan data to create contacts, 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 and npm
dotenv
Axios
An Openscreen account (free)

Installation

After installing node.js and npm, navigate to your desired directory and use the command below to install Openscreen's SDK:

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.

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() method.

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:

You may find the complete code here.
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.

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