Introduction
With Digital Business Cards, you can encode a vCard into the barcode, allowing users to quickly save contact details by scanning the QR code—eliminating manual data entry.
What is a vCard? A vCard is a standard file format that stores contact information like Name, Telephone number and address.
Terminology
QR Code:
A two-dimensional barcode commonly used for storing data that can be scanned by smartphones. This is the recommended barcode type for vCard encoding
Barcode Payload:
The data encoded within a barcode, in this case, a vCard containing contact details.
Barcode Type:
The type of barcode used (e.g., QR Code, Aztec, PDF417, Code128).
Text Below Barcode:
The text displayed beneath the barcode, often with instructions like "Scan to Add Contact."
Security Animation:
An animation displayed on the barcode when scanned, enhancing security in Google Wallet.
Rotating Barcode:
A Google Wallet specific feature where the barcode changes periodically for added security (requires additional setup).
1. Setting Up a Static Barcode (Same Data for All Cards)
Step 1: Select the Barcode Type
In the Pass Designer, click on the barcode.
Choose from:
QR (Recommended for vCards)
Aztec
PDF417
Code128 (1d barcode)
None
Step 2: Enter a Static vCard Payload
Under Barcode Payload, input a standard vCard format like this:
BEGIN:VCARD
VERSION:3.0
N:PassKit;Percy
FN:Mr. Percy PassKit
ORG:PassKit;Customer Support
TITLE:Customer Support Agent
ADR;WORK:;;123 Main St.;Anytown;CA;12345;USA
TEL;WORK;VOICE:(123) 456-7890
TEL;CELL:(555) 123-4567
EMAIL;WORK:support@passkit.com
URL:https://passkit.com
NOTE:This is a vCard example.
END:VCARD
This ensures all scanned cards return the same contact details.
2. Setting Up Dynamic Barcodes (Personalized for Each Employee)
If you're managing employee cards and want unique contact details per card, use dynamic tags to auto-populate data from your pass records.
Using Dynamic Tags in vCard Fields
Dynamic tags allow you to personalise the vCard for each pass holder by automatically pulling in information already associated with their pass. This means you don't have to manually enter details like their name or any other data you've collected.
How it Works
Instead of static text, you'll insert a dynamic tag into the vCard field. This tag acts as a placeholder that gets replaced with the actual data when the pass is generated for an individual.
Example: Populating the Full Name (FN) Field
Let's say you want the pass holder's full name to appear in the vCard's "Full Name" (FN) field. If you already have their full name stored in a field called displayName within your PassKit data, you'll simply use the dynamic tag ${person.displayName} in the vCard's FN field.
So, instead of:
FN: John Doe
You would use:
FN: ${person.displayName}
When John Doe's pass is generated, the vCard will automatically display:
FN: John Doe
Constructing a Dynamic Tag
The general format for a dynamic tag is ${fieldKey}. The fieldKey is the unique identifier for the specific data field you want to display. You can find the field keys for your data within your PassKit account.
By using dynamic tags, you can ensure your vCards are always up-to-date and personalised for every pass holder, without any extra manual effort.
See an example of a vCard using dynamic tags below.
Note, this assumes you have the following fields added to the card.
Name - First Name and Last Name PII fields
Full Name - Name PII field
ORG - Custom fields for Company and Position
Title - Custom field for Title
Address - Custom field for Address
TEL - Custom Fields for Work phone and Cell phone
Email - Email PII field
URL - Custom field for the website URL
BEGIN:VCARD
VERSION:3.0
N:${person.forename};${person.surname}
FN:${person.displayName}
ORG:${meta.company};${meta.position}
TITLE:${meta.title}
ADR;WORK:;;${meta.address}
TEL;WORK;VOICE:${meta.workphone}
TEL;CELL:${meta.cellphone}
EMAIL;WORK:${person.emailAddress}
URL:=${meta.website}
NOTE:This is a vCard example.
END:VCARD
Edit the Barcode Payload
When creating vCards for barcode payloads, ensure you follow these guidelines:
Always maintain the multi-line structure as shown in the example
You can use dynamic tags to populate user-specific information
Ensure compatibility with barcode readers by adhering to the vCard specification
Test your vCard with multiple barcode readers to verify compatibility
Click on the barcode to open the barcode settings.
Additional Customizations
Edit the Text Below Barcode
You can also edit the text that is shown below the barcode on the pass. In this example it is set to show "Scan to Add Contact", but you can change this to your preference.
Edit Google Wallet Specific Barcode Features
Google Wallet has some security features for the business card barcode.
Security Animation - The barcode will display a shimmering animation when you move your phone
Rotating Barcode - Rotating barcodes change periodically.
Rotating Barcodes needs additional set up, please check HERE for further details
Click to view the Google design and click on the barcode to open the barcode settings.
Use the toggle to enable/disable these features.
Click "Done" and "Save" when finished.
Test
Check how your test pass looks after making these changes
If you haven't issued a test pass and added to Wallet yet, please see here
View the pass and changes in your Wallet.
Tip - Scan the barcode on your test pass to check if the vCard is correctly set up. Test with multiple barcode readers to ensure payload integrity and compatibility. If you've embedded images, verify they appear correctly when the contact is imported.