Designing a Hybrid Business Card

It's the 21st century!  Given that most of our contact keeping systems are digital, it's about time that our business cards do the same thing.  

Background:

I wanted a business card with a QR code, which when scanned, would let a contact store a copy of my contact info on their phone.  I also was open to rolling my own solution in order to save money, and hopefully learn something on the way.  

Step One:  Making the QR Code

The first 2-3 times I tried making a custom QR code (with colors that matched my brand, customizable shapes, and custom details), I was paywalled right when I finished the customization process.  This was frustrating, to say the least.  Then, after I found a site that worked, I realized that it would only output PNG files, meaning that I couldn't use the image against a colored background.

After a long hunt, I finally found what I was looking for - a free QR code generator that allowed customization, and would output SVG files.  At the time of writing, it was free.

Step 2: Creating/finding the right file type

Having never worked with contact cards as a developer before, a bit of research was the next step.  Although there may be other file types out there that are equally valid, it looked like a VCF file was the way to go.  Also, since I develop on a Mac, Address Book was already my go-to system for contact management, and it uses VCF files.  

After a while of playing with the system, I realized that whenever you share a contact card, it sends as a VCF.  There is admittedly probably an easier way to export VCF files from Address Book than texting yourself your own contact... but if it works, it works.  

Step 3: Uploading the File (and Dealing with Wordpress)

This will depend on your website's configuration, assuming you are self hosting your business card.  For Accelerant's website, I ended up opting for Wordpress in order to avoid having to reinvent the wheel every time I ran into a CMS issue.  (Although I really wanted Ghost to be the best platform in all areas, and it works well for this blog, I'm afraid I can't recommend it for enterprise use right now).  

If you aren't using Wordpress, feel free to skip to step 4.  

Unfortunately, for some arcane reason, Wordpress prohibits many very common file types by default, and VCF files are one of them (along with SVG's!).  

I tried the advice of an unfortunately long list of blogs and videos in a futile attempt to allow VCF uploads to Wordpress before finally seeing success.

After a while, I was able to set up the Enhanced Media Library to allow VCF files.  At the time of writing, the area this is under is Enhanced Media Library > Media Settings > MIME Types.  I then had to add a custom file type for VCF files.  

Step 4: Creating a Download Feature

This was the easy bit.  I made a post on Wordpress (although this could just as easily by plain HTML).  

The key code needs to look something like this on the HTML side:

<a 	
   class="button"
   href="https://www.coolsite.com/your_contact.vcf"
   id="download-button" 
   download
> 
	Download
</a>

document.getElementById("download-button").click();

It's not fancy, but it works!  The download attribute means that instead of navigating to the link, the browser will attempt to download the resource instead.

The JS simply selects the button by the ID attribute, and then clicks it.  In case your user has JS disabled, you may want some explanatory text advising them of the intent of the page, and that they can trigger a download on their own if desired.  

That's it!  

Looking forward to see what you invent with this as inspiration!  If you want to see my version in production, you can examine it here! :)