We create a QR code for an electronic business card vCard

We create a QR code for an electronic business card vCard

Everyone needs your QR code! And no, we didn’t mention covid just now)

Recently, we at EvApps needed to create an electronic company vCard and stitch it to a QR code to make it easier to exchange contacts using a smartphone. What came out of it (as well as a few technical life hacks) read in this article.

First, let’s figure out why we need vCard?

It is the same as a regular business card, only it is not transferred from hand to hand, but from one device to another: via social networks, e-mail or Bluetooth.

What is vCard for users?

vCard has the extension .vcf – it is a text file in the form of a container that stores your contact information: name, phone numbers, mailing address, company name, your position, and more.

Technical analysis of vCard electronic business card

The vCard format was developed back in 1995 by the Versit consortium, an organization that creates and supplements Internet standards.

vCard is an extension of the MIME-DIR format, which is a transfer encoding standard.

In addition to the usual uri, date, date-time and float attributes for the MIME-DIR format, binary, phone-number, utc-offset and vcard formats are introduced for vCard.

If we represent the MIME-DIR data as a text string, we usually write:
<тип атрибута>
<значение атрибута>

The attribute type includes language and encoding information, and attribute values ​​can be in different formats. You can have one to several vCards in one email file.

The lines of code should look like this:

begin:vcard
(строки атрибутов vCard)
end:vcard

Types of vCards

vCard has three types of structure that differ only in data formats:

  • version 2.1 (VCF 2.1)
    Example:

    BEGIN:VCARD
    VERSION:2.1
    N:Иванов Иван
    FN:Иванов Иван
    ORG:”Рога и копыта” Ltd
    TITLE:Рога и копыта
    PHOTO;GIF:http://www.example.com/dir_photos/my_photo.gif
    TEL;WORK;VOICE:(111) 555-1212
    TEL;HOME;VOICE:(404) 555-1212
    ADR;WORK;PREF:;;12 ул. Академика Королёва;г.Москва;;301000;Россия
    ADR;HOME:;;12 ул. Академика Королёва;г.Москва;;301000;Россия
    EMAIL:[email protected]
    END:VCARD

  • version 3.0 (VCF 3.0)
    Example:

    BEGIN:VCARD
    VERSION:3.0
    N:Иван;Иванов
    FN:Иванов Иван
    ORG:”Рога и копыта” Ltd
    TITLE:Рога и копыта
    PHOTO;VALUE#URI;TYPE#GIF:http://www.example.com/dir_photos/my_photo.gif
    TEL;TYPE#WORK,VOICE:(111) 555-1212
    TEL;TYPE#HOME,VOICE:(404) 555-1212
    ADR;TYPE#WORK,PREF:;;12 ул. Академика Королёва;г.Москва;301000;Россия
    ADR;TYPE#HOME:;;12 ул. Академика Королёва;г.Москва;301000;Россия
    EMAIL:[email protected]
    REV:2008-04-24T19:52:43Z
    END:VCARD

  • version 4.0 (VCF 4.0)
    Example:

    BEGIN:VCARD
    VERSION:4.0
    N:Иван;Иванов
    FN:Иванов Иван
    ORG:”Рога и копыта” Ltd
    TITLE:Рога и копыта
    PHOTO;MEDIATYPE#image/gif:http://www.sherinnom.com/dir_photos/my_photo.gif
    TEL;TYPE#work,voice;VALUE#uri:tel:+1-111-555-1212
    TEL;TYPE#home,voice;VALUE#uri:tel:+1-404-555-1212
    ADR;TYPE#WORK;PREF#1;LABEL#"12 ул.Академика королёва.\Москва\301000\Россия":;;12 ул. Академика Королёва;г.Москва;301000;Россия
    EMAIL:[email protected]
    REV:20080424T195243Z
    x-qq:21588891
    END:VCARD

    It is not recommended to use the fourth version, because it is not recognized by the phone.

vCard operation on different platforms

If we try to simply transfer the file in vCard format to the phone, the device does not recognize it. Different operating systems and even different versions of them support one or another version of vCard in different ways.

1. Android
All more or less modern phones based on OC Android have operating system version 10 or 11 on board. It supports both vCard 2.1 and 3.0. But if we try to download and install a file in vCard 3.0 format on a phone with Android version 12 or 13, the address book recognizes only the last name and first name from the card, the rest of the data will remain unknown. It is necessary to reformat the file in vCard 2.1, and then when importing a contact, all the information contained in it will be loaded.

2. iOS

Apple devices support both vCard 2.1 and vCard 3.0 without any problems reading the format.

In order to ensure recognition of our vCard by any devices, we decided to use a QR code.

Why a QR code?

There were several reasons for that:

  1. QR code detection is built into the camera app on most devices.

  2. QR supports encoding of various information formats: text, URL, vCard, geographical coordinates, Wi-Fi network parameters, e-mail templates, SMS and others.

  3. The QR code is recognized even in an inverted or mirrored position due to the three corner binding squares.

And so, this format perfectly suited our goal – to create the most complete business card of the company, which is easy to share when necessary.


From the history of the question:

The ability to share your contact via QR code appeared in 2019. For the first time, it became available in the Instagram application (the activities of this social network and its owner, Meta, are prohibited in the Russian Federation). Then you had to go to a special section in the application, launch the camera with QR code recognition mode from there, count the code shown to you and subscribe to the user. Then similar functionality began to appear in other products of the enterprise. And a year later, in 2020, the developers went in the direction of optimization and added the ability to read QR with the standard phone camera application.


In our time, everyone has heard without exaggeration about the existence of QR codes, but about how to use them right create and apply in work, know units.

Versions, types and capabilities of QR codes

All QR codes are divided into versions:
21 x 21 – the smallest version (No. 1)
177 x 177 – the largest version (No. 40)

Each subsequent version, from the first to the fortieth, increases by 4 pixels horizontally and vertically. When calculating the pixels of the QR code version definition, the size of its fields is not taken into account.

However, it is worth remembering that the scanner of standard mobile devices reads QR codes only up to version 4 (33 x 33) inclusive.

The main encodings of the QR code:
– digital (supports only numbers),
– alphanumeric (supports both numbers and letters),
– byte (supports any encoding),
– kanji (character coding).

Each QR code is checked for errors using a non-binary cyclic Reed-Solomon code.

The more information in the QR code, the larger its version. For each quarter of the number of QR code versions, there is a level of redundancy: 7%, 15%, 25% and 30%.

In addition, the QR code can be static or dynamic:

Static QR code is a matrix code with up to 4296 characters of information.
A static QR code can contain text, a phone number, an email address. It cannot be changed via the embedded URL.

Dynamic QR code is the URL through which the user navigates to the desired link. Of course, this address can be changed.
Additionally, a dynamic QR code can be password protected and devices scanning it can be tracked.
Such a QR is more convenient for the user: it is easier to scan due to the small amount of details.

QR code recognition by phone

1. On iOS:

  • Open the Camera offer;

  • Position the device so that the QR code is clearly visible in the middle of the screen;

  • If the phone recognized the QR code, you will receive a notification;

  • Follow the link in the message.

    2. On Android using Google Lens (if you don’t have built-in scanning):

  • Open the Camera app;

  • Find the icon shown in the image on the screen;

    QR code scan icon in the Google Lens interface

  • Click on the icon – the image of the scanner will open;

  • Point the camera at the QR code;

  • Follow the link.

    Active link from QR code

3. On Android using third-party applications:

  • go to Google Play;

  • type “QR code” in the search;

  • select any app and download it.
    The most popular is “QR & Barcode Scanner”;

  • proceed also as described above in the instructions for IOS.

And now the most interesting thing is to create a QR code for a vCard electronic business card

Based on the results of our tests with different versions of vCard and different mobile platforms, we came to the conclusion that in our case there are two options for the development of events: either we make a business card with only the company name and contact data (phone number, address and a small logo), or a full-fledged beautiful a business card with geolocation, a full list of contact data and an avatar in high resolution, but in the form of a dynamic business card, available via a web link.

Below is an example of the implementation of the first option.

1. We collect all the necessary data (phone numbers, mail and others);
2. Place them in a vCard;
3. Place the received text in any QR code generator;
4. We receive a ready-made QR code.

We do not allow mistakes!
1. Limitation of signs

Digital coding ≤ 7089
Alphanumeric encoding ≤ 4296 (Latin)
Byte encoding ≤ 2953 (Windows-1251 encoding ≤ 2953; UTF-8 (this is the Unicode standard – character encoding) ≤ 1450) (Cyrillic)

Importantly: each character placed in the QR code (commas, spaces, etc.) is considered.

2. We post the postal address of your location

Addresses, as well as full-fledged coordinates, have an order of writing: street; house; City; region; index; country.

Example:
ADR;CHARSET=UTF-8;type=WORK;type=pref:;;ул. Тургеневская, 69, 5й этаж, офис 525 ;Тула;Тульская область;300041;Россия;

Your address can be opened with a click in Google Maps or other applications that determine the location.

3. Place the image

Do not place the image in the form of a web link – in a place where there is no Internet, it will not be downloaded!

Base64 – the binary data encoding standard – is the easiest option.

*Instructions for using Base64:

  1. We find the Base64 file encoder (we used https://snipp.ru/tools/base64-img);

  2. We upload images there;

  3. Convert – convert the picture into a binary data system;

  4. Copy the received text and place it in the QR code.

    Importantly: the image being converted must first be in png format.
    Thus, its resulting binary code should not exceed the number of characters and will fit into your QR code.

    Parameters of admissible image data obtained experimentally (information can be absolute):
    Size: 150 x 150 px
    Color depth: 8 bits
    DPI: 300 x 300
    File size: 1570 bytes

Alternative options for generating a QR code from a vCard

  1. Services that generate QR code data.

    Plus: ease of use.
    Cons: few available fields for placing information, lack of individuality.

    Service https://qrcoder.ru.
    It has a minimum set of fields, it is not possible to add media content (audio, photo and video).

  2. Services that create dynamic business cards: photo, audio and video.

    Pros: many possibilities and options.
    Cons: unreliability of the server, paid services.

    One of the best such services: www.stqr.ru/generator/vcard
    Opportunities:
    – you can take a free trial period;
    – creation of various types of QR code, making changes to them, statistics of their use;
    – possession of a stylish page with all data;
    – The entire file can be easily converted to vCard.

Another service we tried: www.qrcode-tiger.com/. Everything is the same as before, but the features of the free trial version are limited.

What other possibilities do QR codes have?

With their help, you can track conversion statistics using UTM tags.

UTM tags (Urchin Tracking Module) are small codes that are added to URLs to track and analyze the sources of traffic on websites. Combined with dynamic QR codes, UTM tags provide a powerful tool for tracking and measuring the effectiveness of marketing campaigns.

Essentially, UTM tags are a set of parameters added to a URL to identify the source of the traffic.

They consist of five main parameters:

utm_source: indicates the source of the traffic, such as mailing or social networks;
utm_medium: identifies the means by which the user accessed the link, such as email or banner advertising;
utm_campaign: identifies the specific marketing campaign within which the link was used;
utm_term: allows you to track specific keywords or phrases;
utm_content: used to divide content within the same campaign.

How to use UTM tags with dynamic QR codes?

Dynamic QR codes allow you to create links with UTM tags enabled, allowing you to track exactly where traffic is coming from when scanning the QR code. For example, when creating a QR code with an electronic business card, you can add utm_source=social&utm_medium=qr&utm_campaign=campaign1 to the URL in the QR code.

This way, every scan of the QR code will be recorded with the exact source and means through which the user accessed the QR.

Collection and analysis of statistics
To collect statistics using UTM tags in dynamic QR codes, you can use various tools, such as Google Analytics, Yandex metrics or specialized platforms for tracking marketing campaigns. These tools allow you to get detailed information about the number of clicks, conversions, average time on site and other metrics related to each UTM tag.

Work with received statistics
The collected statistics allow you to evaluate the effectiveness of each marketing campaign or the quality of the provided content and identify the most successful channels and sources of traffic.
In our case, we made several QR codes with UTM tags: with the main contact of the company, the contact of the HR director, the PR manager, as well as our main groups in social networks.

So, we tried to show in the most detailed and accessible way how you can create a personal electronic business card, in order to later use it on corporate merch, on paper business cards or banners. We hope the information will be useful.

And if there are any questions, let’s discuss them in the comments to this article.

Related posts