How to make digital business cards and share them via QR codes

Finally, I had a box with few hundred premium cards with my name, role and contact data on it. They looked slick, no doubt about it. But I hardly ever used them. All people I met, I had either met online before or were part of a project for which the leaders had already exchanged all our data before the meeting.

I may have handed out a handful of cards, but most of them I had to throw away after they got scruffy from being carried around. I had to throw away the rest of the box because we moved offices. Then another box because I got promoted. When I quit, I threw a third nearly full box into the recycling.

If you ever had business cards, you probably experienced similar things. So I don’t really like business cards as a medium for sharing data. They add to the clutter of our professional lives, don’t offer much value and do cause a lot of waste.

I also don’t like receiving other’s cards. I mean, seriously, do I really want to manually transfer all their contact info into my computer? And who’s to say I’ll even reach out to them in the future?

At my current job at ForTomorrow we wanted to do it differently. We’d be a paperless company if it weren’t for German bureaucracy’s complicated relationship with the material. Ruth, our founder/CEO (also all-round wonderful person and my spouse) had been asking about business cards for over a year now. But I just kept postponing even thinking about a design. Until she said ‘Hey all I really need is a QR code that lets people download my info.’

That got my attention!

In this post I’ll describe how you can share contact data easily, at scale. While I was working on this, Apple announced that the NameDrop feature in iOS 17 will make it easy to exchange contact data. But you’ll see that using plain-old HTML, QR codes and a file format from 1995 may have some benefits over it.

The goal: easy interactions using open standards

Everybody with a computer already has many ways to share contact information. But those can be cumbersome. I’m thinking of a business context with quick interactions, possibly with many people: conferences, big meetings, networking events. Exchanging contact information there should be quick and simple; as easy as giving a paper card.

What comes close to that simple gesture is showing somebody a QR code. Depending on whether you’re the sales person with the pile of business cards on the fair booth, or more of a please-first-jump-through-some-hoops-hard-to-reach executive, that QR code may be on a public display or in your pants pocket.

Just like with paper business cards, the recipient should be able to pass on a business card, so coworker can follow up on it.

The data format for the contact data should be a vCard file. All commonly used contacts apps (Thunderbird, Outlook, Contacts, Google) understand this simple standard.

The solution should have fallbacks: if the recipient can’t scan the QR code, they should be able to receive a URL. If they can’t receive the URL, they should be able to read the URL. If their computer doesn’t handle vCards well (f.e. when it opens the file with the preinstalled, but not-yet-configured stock contacts app and use a web-based contacts manager instead), they should be able to read and copy the info to their contacts app themselves.

How to create a digital business card using vCard and QR code yourself

QR-code → web page → vCard download. This idea is simple and has been feasible since 1994. I think it’s only recently become viable and desirable though. For a long time, one couldn’t assume every business contact would have a smartphone that they’d use for work. Until 2017, iPhone users needed to install a QR code reader app before they could do anything. In my part of the world, lots of people didn’t know what QR codes were at all. But then the pandemic hit, and all of a sudden QR codes were everywhere.

So technically it’s not much. Here’s all you need to do to create digital business cards:

1. Create the vCard file
2. Find a place to host and present the vCard file
3. Create a QR code
4. Optional: customize your CMS

1. Create the vCard file

The vCard standard looks a bit odd, but it’s quite simple:

BEGIN:VCARD
VERSION:4.0
FN:Koos looijesteijn
N:Looijesteijn;Koos;;;M.Sc.
EMAIL;TYPE=work:[email protected]
END:VCARD

The first three lines and the last one are required. You can add any number of additional attributes. There’s a list of them on Wikipedia. By trying some things out I came to the following conclusions:

• Each attribute needs its own line
• It looks like whitespace at the end of a line is ignored
• Empty lines are ignored

I’m sure there are exceptions, depending on the application reading the file.

The attributes list on Wikipedia is useful, but eventually I created my template by creating a contact in macOS Contacts and exporting it as a vCard.

You can include a photo with the contact, which I think is really neat. I like having photos for all my frequent contacts, so my apps aren’t full of placeholder icons. The photo is also useful because unlike with a paper business card, the recipient will otherwise have no visual reminder of the person whom the contact data belong to. Providing a URI (link) to the contact’s photo is allowed supported by the vCard format. But I haven’t found an app that actually supports that. So instead you’re better off base64-encoding a photo and including it in the vCard file.

The vCard format also allows for setting the contact’s website URL, commonly displayed as ‘home page’. Instead of the site’s homepage, I though think it’s more useful to provide a URL to the page from which the vCard is issued, so the recipient can find it back easily, in case there’s data on it that’s not imported by their contacts app.

I recommend you use the vcf file extension instead of the prettier vcard, so that the Google Contacts web app accepts it as a supported filetype.

2. Find a place to host and present the vCard file

Ideally you provide vCard via a webpage, so that if the recipient’s device doesn’t handle the file well, there’s a fallback.

This place is to the vCard like what a paper business card’s design and materials are to the information. It’s an opportunity to create a branded experience and to show appreciation for the recipient. Exchanging paper business cards is surrounded with rituals and customs, because it’s an important marker in the development of a relationship. That’s why I believe the digital version address the emotional aspects that surround that moment.

With custom XML, vCards can store all kinds of additional fields, but you’ll just have to hope for the recipient’s client to support those. So if you want to use the digital business cards to provide a link to LinkedIn and other profiles, the web page may actually be more suitable than the vCard itself. After all, from the web page the recipient can be linked to your online profiles. But from the vCard data imported into their contacts app, it’s quite a few more steps until they hit that ‘Follow’ button. If their contacts app even shows the LinkedIn URL at all.

Another benefit of having the web page is that you can add the QR code there too. That will make it easy for recipients to pass on cards to coworkers.

Providing the vCard download on the page turns out to be very simple. You don’t need some fancy API to provide vcf files. You don’t even need JavaScript on the client for it to work. All you need for a basic vCard download feature is a link like this:

<a href="vcard;base64,[your base64-encoded vCard]" download="First Name Last Name.vcf">Save data to your contacts</a>

Try it here: Save data to your contacts

So if you can create an HTML template for your website, you can build this feature! I rarely needed to base64 encode data before, so I was a bit put off by it, but it looks like on most systems that’s just like filtering a text (like you would to lowercase something).

There’s a catch: base64 encoding only allows 64 basic (mainly latin) characters. You likely want the option to include diacritics and non-latin characters in contact data, so I considered two options:

1. Provide the vCard as a separate file
2. Generate the vCard in the client

The first option would require less data to transfer and not introduce the need for JavaScript. For reasons specific to my setup I went for option 2, but I may change that. Doing it in the client has one benefit: once the page has loaded, we can be sure that the recipient will be able to get the vCard even if they’re walking through a crowded conference venue with an intermittent internet connection.

By the way, one reason I didn’t find a blog post explaining what I’m explaining here, is that all the keywords I tried are used in SEO content. Because there are a lot of services that let you create digital business cards. They offer fully hosted solutions, apps and whatnot. I think some of them are pretty neat. They’re definitely easier than creating custom HTML templates, but:

• I like to keep the number of digital accounts low
• They’re pretty expensive, often with monthly costs for each user
• It’s hard/impossible to leverage existing CSS with these
• By hosting it ourselves, we can decide what recently updated info we want to add in addition to the contact data

Here’s the business card I created for myself:

You can take a look at at here on the ForTomorrow site.

If you click the ‘Save data to your contacts’ button, you’ll see that the button changes state. Now that I added JS already, at least that’s a nice touch. With the ‘Share data’ button you can summon the QR code. I also included a ‘Schedule a meeting’ button (please don’t use it to spam may calendar).

Create a QR code

If you’re creating digital business cards for your team, you really don’t want to be the one handing out QR code files every time a card owner needs it. That’s why automatically providing a branded QR code with each business card is super important. And the main reason I recommend adding the QR code to the digital business card’s web page. Depending on your requirements, you can hide the QR code itself behind user authentication.

I found the QR Code Styling JavaScript library works well to do this in the client. Ideally this is done on the server as it’d be less prone to error and would allow for a JS-free setup.

Arguably, the shiny animation is superfluous. I added it to distract from the general ugliness of QR codes. I also want to do everything to make the digital experience feel more premium than even the most fancy paper someone else may have had their data printed on.

Optional: customize your CMS

With all the above you can solve all the problems around the logistics of paper business cards. But if you’re responsible for the website like I am, you’re now the person who has to deal with creating and updating everybody’s business cards. I suspect that this is why in my experience, big organizations don’t do digital business cards. While a design or marketing department may be responsible for the layout of the cards, HR or an operations team will likely be responsible for ordering and handing them out. By moving to digital business cards provided by the marketing website, marketing departments would all of a sudden get responsibilities they’re likely not prepared for: becoming part of internal communications, employee onboarding etc.

This is why it’s essential that the websites content management system is customized for use by the person who’d otherwise hand out the paper business cards. So that if people change roles or are promoted, the contact data is updated fast enough. For very large organizations, a connection with the HR system API would be a big productivity gain. Ideally, card owners would be able to update at least some of the fields themselves. After all, each page can have a greeting or intro text that can be updated for events.

Additional features

Here are some features I didn’t implement myself yet, but may be worthwhile.

Offline availability by encoding the vCard as a QR code

A QR code can contain all kinds of information, so it’s feasible to encode your vCard into the QR code itself. This would have as a benefit that neither you nor the recipient need an internet connection to receive the data. There are a few drawbacks too:

• The amount of data you can fit into a QR code is limited, so you can’t include a decently sized image
• The QR code needs to be bigger as it needs more squares
• Without the web page in between, you don’t have a fallback for when the recipient’s device doesn’t handle the vCard file as intended

You’d need a new QR code every time the contact data changes, so if you’re providing this for more people than just yourself, you’re not really getting rid of the CMS and the webpage that create the QR code.

Make the page an hCard

While you’re at it, you can add hCard support to the web page template. You don’t need to structure the data in any particular way, just make sure to add the standard hCard attributes as CSS classes. I don’t particularly like that approach. Many websites already use some of the CSS class names like ‘vcard’, ‘logo’, ‘note’ and ‘value’, which would cause the elements containing that data to be styled wrongly. That would require overrides or refactoring of existing styles. The idea behind hCards is that all information should be visible to users. It comes from the indie web movement, so I’m sympathetic to it and will ignore that I don’t really get what’s so good about it.

Provide recipients guidance for what to do with the vCard

I assume that for most recipients, their OS will open the vCard with the app they use for managing business contacts. But there are lot of factors that can cause that not to work. Recipients scan the QR with their personal phone. The company CRM may not have been registered as the default app for vCards. The company contacts app may not be able to parse vCards and so on.

A small benefit of using JavaScript to deliver the vCard file is that I can already show the status: not started/in progress/successful/error. With the success and error states I could provide guidance for what to do with the file.

Buttons for copying attributes

It’d be a nice touch to add buttons next to each attribute to make it easy to copy them manually.

Provide a pass for Wallet

One benefit of paper business cards is that (if you have them on you), they’re really easy to whip out. Unlocking your phone, opening the browser and going to your personal URL takes a few more steps. For myself, I created a wallet pass with the QR code linking to my card. I used a special app for that. Applying branding to the coupon was a bit annoying that way. Ideally I’d provide my whole team with tickets like that. But it looks like too much work for now: I’d need an Apple Developer account and would have to do difficult server-side stuff.

How can we further improve digital business cards?

I believe that compared to paper, digital business cards are in many ways more user-friendly to recipients who digitalize contact data anyway. Digital cards can help organizations reduce costs and remove a lot of internal and external friction. Although old and clunky, the widely-recognized and easy-to-implement vCard standard is really useful.

Of course using Apple’s NameDrop feature should even be simpler. At least the act of passing the data from one device to the other looks like it. And it doesn’t involve web design and development. I can’t evaluate it it before using it, but it looks like it has some drawbacks:

• The sender needs to set it up in advance as to not accidentally overshare information (I for one, use my contact card to save all the addresses I’ve ever lived at)
• Paper and digital business cards are branded
• There’s a threshold in faking digital business cards. In fact, it’s nearly impossible when they’re on a brand’s main domain and include a photo. But anyone can change their contact data on their phone and pretend they’re the CEO of the Cookie Company or whatever.
• NameDrop only works on new iPhones

The digital business card web page offers all kinds of opportunities for interactions with the person and their brand, way beyond what can be stored in a vCard.

What issues do you see with my approach? How would you improve it?