When flying to a conference, I had inspiration to optimize the means by which my contact information is shared with others. Building apps like these are well within our wheelhouse at MayJuun, and this step seemed like a nice upgrade from the basic business card.
Credit where it’s due, this app builds heavily upon the open-source (MIT License) QR Code generator library called Project Nayuki. I’ve used their code-generator in a number of projects and recommend them highly.
QR Code ‘Business Card’
For the main part of this app, I took the VCard specification, looked around through a number of websites that describe VCards in detail – including this site’s VCard example and Wikipedia’s version comparison – and set about to create my own custom VCard.
In my research, I noticed a few websites that provided a QR Codes to download a custom VCard from the web, which generates traffic (+ analytics) to that site and is purely dependent on that site remaining up. This method doesn’t use that at all. Since I am directly putting my info directly into a QR Code, someone can use this code even without an internet connection.
Note as well that as of March 2022, when you are using a QR code to directly add a contact (versus external website redirect + download)…not all of the items available in a VCard will cross over. I tested each element by hand on Android and iOS and found that the following fields work well for both devices:
BEGIN:VCARD VERSION:4.0 N:xxLASTNAMExx;xxFIRSTNAMExx;;; FN:xxFIRSTNAME LASTNAMExx ORG:xxYOUR ORGxx TITLE:xxYOUR TITLExx TEL;type=MOBILE:xxYOURPHONENUMBERXX EMAIL:xxYOUREMAILADDRESSxx URL:xxYOURWEBSITExx NOTE:xxYOURPERSONALIZEDNOTExx END:VCARD
Anything in the above code that begins and ends with
xx needs to be replaced by you. For my purposes, the QR Code from this image:
was generated using these lines of code:
BEGIN:VCARD VERSION:4.0 N:Manning;John;;; FN:John Manning ORG:MayJuun LLC TITLE:CEO TEL;type=MOBILE:(865) 300-7738 EMAIL:email@example.com URL:https://mayjuun.com NOTE:John Manning, MD, FAMIA, FACEP ~ Pronouns: he / him / his ~ Chief Executive Officer (CEO) @ MayJuun ~ Clinical: Informatics, Emergency Medicine ~ Dev: Dart/Flutter GDE END:VCARD
Please don’t call/email/text me incessantly… otherwise I’ll take down this section of code.
In the end, you simply need to:
- start with the VCard format listed above
- replace all the
xx___xxfields with your own information
- delete any lines of code that you don’t need
- paste the result into the Project Nayuki QR Code Generator
- save the resultant QR Code as an image on your phone
And just like that, you now have a quick means to create a contact free QR-code business card! 😎 🔥
We went a bit above and beyond this idea in our own app, including the ability to harness QR Code links to different sections on our website, a portfolio that demos the work we are most proud of over the last ~year, and a means to quickly show off our FHIR-FLI efforts. The navigation at the bottom took heavy cues from this blog post, which seemed very well-designed.
If any of you are interested in having your own custom-built QR code + interactive app portfolio as a business card, email us at firstname.lastname@example.org. We’ll be happy to create something to your liking!