Give Your Customers Your Contact Information The Easy Way

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

URL: http://www.qrcode-monkey.com/

qr code monkey landing page

QR Code Monkey Landing Page

qr code monkey vcard page

QR Code Monkey vCard Page

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:

  1. Go to the QR Code Monkey page
  2. Click on the vCard link
  3. Enter your contact details (if you get stuck, refer to the “QR Code Monkey vCard Page” image)
  4. Upload your logo (if you want)
  5. Click on Create QR-Code
  6. 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

URL: http://www.vcardmaker.com/.

We’re going to be creating a vCard template with this site. Then we’re going to add an image using trickery.

vCard Maker Landing Page

vCard Maker Landing Page

vCard Maker Filled In

vCard Maker Filled In

Just like QR Monkey, this site is quite straight-forward. Here’s the procedure:

  1. Enter your contact details in the fields that you want to fill in
  2. Click “Generate”.
  3. 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.

BEST! Base64 Landing Page

BEST! Base64 Landing Page

BEST! Base64 finished work

BEST! Base64 finished work

Here’s the procedure:

  1. Open the link to the BEST! Base64 page
  2. Click on the Select image area
  3. Locate your logo or profile picture and upload it
  4. Click “Copy as Base64”
  5. 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:

  1. Locate your draft vCard file.
  2. Open it in your favourite text editor (I use Text Wrangler on OSX, and Notepad on Windows variants).
  3. Add this text directly underneath BEGIN:VCARD: “VERSION:4.0” (without the quotes).
  4. Add this text directly underneath ORG: “PHOTO;MEDIATYPE=image/gif;base64:” (without the quotes).
  5. 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.
  6. 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:

BEGIN:VCARD
VERSION:4.0
N:;;;;
ADR;INTL;PARCEL;WORK:;;;Ipswich;QLD;4305;Australia
EMAIL;INTERNET:creatureoftech+enquiry@gmail.com
ORG:Creature of Tech
PHOTO;MEDIATYPE=image/gif;base64:
URL;WORK:https://creatureoftech.com/
GEO:geo:-27.623351,152.7600754
REV:20150120
END:VCARD

 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:

PHOTO;MEDIATYPE=image/png;base64:iVBORw0KGgoAAAANSU…

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:

vCard preview in finder

vCard Preview in Finder

 

Finally, here are my groovy contact assets. Use them at your leisure:

contact qr code creature of tech

Contact QR Code – Creature of Tech

vcard download

vCard – Creature of Tech

 

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):

qr code scanned with quick scan on ios and ready to import into address book

QR Code Scanned with Quick Scan on iOS and Ready to Import into Address Book.

vcard imported into contacts on osx

vCard Imported into Contacts on OSX

 

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.

 

Advertisements