I’ve built a web site for a client recently. When I was looking at the Contact page, I was pretty happy with the information presented on how my client’s customers could contact my client’s business.
And then I got to wondering if I could make it any easier for people to remember the contact details for later. And that got me thinking about Virtual Cards and QR Codes.
So, this little tutorial is a how to create a QR Code and also a Virtual Card for your business (or for your own client).
First, here’s how to create a QR Code – I’ve been using QR Code Monkey.
QR Code Monkey
The reason why I like QR Code Monkey is that I can include an image into my QR Code that I’ve generated. The thing I don’t like about QR Code Monkey is that the address and email falls into “Other” on my iPhone, and not into “Work”. Oh well.
The “how to” is really straight forward. Here’s the procedure:
- Go to the QR Code Monkey page
- Click on the vCard link
- Enter your contact details (if you get stuck, refer to the “QR Code Monkey vCard Page” image)
- Upload your logo (if you want)
- Click on Create QR-Code
- Click on Download PNG and save the file somewhere you can locate it later
That’s it. I’ve tried downloading using the other buttons for different image formats. Mysteriously, the image does not appear on any download except for the PNG download. If you need the file as a JPG or an EPS, you’ll have to use a graphics conversion tool on the downloaded PNG file.
Oh yeah, that’s it. Those are the six steps to creating QR magic!
Here’s how to create a vCard. I’ve been using Virtual Card Maker and BEST! Base64 Image. This procedure is not straight-forward, so you’re advised to strap yourself in for this one. It’s a bumpy ride. It’s worth it for the result though.
Step 01: Virtual Card Maker
We’re going to be creating a vCard template with this site. Then we’re going to add an image using trickery.
Just like QR Monkey, this site is quite straight-forward. Here’s the procedure:
- Enter your contact details in the fields that you want to fill in
- Click “Generate”.
- Save your “draft” vCard in a location you can find later.
TIP: There are a few mandatory fields (First Name and Last Name spring to mind). I’m pretty sure there’s no mention of mandatory fields in the vCard standard. But whatever. I’ll be deleting my first name and last name information in my final vCard. But that’s my choice.
Once you have created your vCard, the next step is to create a Base64 text version of your logo. Wait, what? The reason for using Base64 text is that every other method I tried for connecting my logo to my vCard failed spectacularly. This here is the short cut to cool.
Here’s how to create a Base64 image. I’ve been using BEST! Base 64 Image.
Step 02: BEST! Base64 Image
Go to this URL: http://base64image.org/
This site is super easy to use.
Here’s the procedure:
- Open the link to the BEST! Base64 page
- Click on the Select image area
- Locate your logo or profile picture and upload it
- Click “Copy as Base64”
- Paste the text into a text editor. I use Text Wrangler.
TIP: use an image no larger than 150×150 pixels. And as compressed JPG or GIF is probably best. Any larger, and your resulting VCF file will be bloated. And that’s no good.
Here’s my logo image as Base64 text. Looks great doesn’t it!
How to Insert Your Base64 Text Image into Your vCard
Here’s the next part of the procedure. Getting your image into the vCard that you created earlier:
- Locate your draft vCard file.
- Open it in your favourite text editor (I use Text Wrangler on OSX, and Notepad on Windows variants).
- Add this text directly underneath BEGIN:VCARD: “VERSION:4.0” (without the quotes).
- Add this text directly underneath ORG: “PHOTO;MEDIATYPE=image/gif;base64:” (without the quotes).
- Add this just above END:VCARD: “GEO:geo:-27.6233,152.7600” (without the quotes – vCard standard appears to (currently) accept lat/long to 4 decimal places – anyone want to correct me on this?). This is your latitude and longitude (by-the-way, my latitude is negative because I’m in the southern hemisphere). Yes, I’m typing this upside-down.
- Add this text just above END:VCARD: “REV:20150121” (without the quotes). This is the date in YYYYMMDD order that the card was made.
Your Card will now look something like this:
ORG:Creature of Tech
NOTE: the observant amongst you will notice I deleted my name information (the text next to N).
Next to Last Step
Now locate your Base64 image string. You need to paste this text directly to the right of the “:” on the line PHOTO;MEDIATYPE=image/gif;base64:.
The line will now look something like this:
NOTE: the observant amongst you will notice that I changed the image type to PNG. Yeap, it’s that easy. And no, I haven’t shown the entire image string. That would not fit on this page. You’ll have to imagine the entire length of the string representing my image.
The Last Step
The final step is to save the VCF file into its final form. So, using your text editor, save your file with a new name (in case you need to revert back to the original for any reason). My original is generally called something like vCardDraft.vcf. My final version is generally called vCardCoT.vcf, where CoT represents the contact business or contact name.
If your vCard has worked, it will look something like this in Finder:
Finally, here are my groovy contact assets. Use them at your leisure:
Where and How to Use These Assets
QR Codes can be placed on screens and on any print media. It’s possible to use a QR Code on a business card (if you have the space). Sometimes the back of a business card will do. Any pamphlet, white paper, document or book can be a little richer with a QR Code. It’s way easier to scan a QR Code and accept the contact data into your address book than it is to manually type it into your tiny smart phone screen.
At a gym I’m working with, we’re going to use a QR Code in a slightly different way, by using the QR Code to send the person scanning the code directly to a YouTube video explaining how to use the machine that they just scanned. Scanning can be easier than typing in a short URL (or a long URL for that matter).
The vCard can be placed on web sites in easy-to-find locations, and it can be transferred to prospects either via your phone (eg. SMS / MMS), via a web browser (including on a smartphone) and via any file transfer and also via email. Most smartphones can download and import a VCF file directly into their address book these days.
It’s usually easier to open a VCF in a contacts application such as Contacts on OSX or your address book on your smartphone than it is to type all the information in from scratch. So give it a try!
Here’s an image from Quick Scan on my iPhone (QR Code scanned) and Contacts on OSX (vCard imported):
A quick disclaimer: I have no affiliation with QR Code Monkey, vCard Maker or BEST! Base64 Image or Quick Scan for iOS. I just like their services.