Contact Sharing Over The Web

Being able to quickly connect with someone digitally after meeting them in person is important. The number of relationships that fall through due to lack of follow-up is huge! Buuuut business cards are a little out of date too (IMO). Here’s a cool way to leverage some technical knowhow and make an awesome contact-sharing button that works especially well on mobile.

Step One: Generate a .vcf

Using any contacts app (or even a webapp), make a new contact for yourself then export it. You should get a .vcf file - also known as a “Virtual Contact File” or “Virtual Card File” depending on who you ask. The contents are just plain text. If you open it in a text editor, it should look something like this:

BEGIN:VCARD
VERSION:3.0
PRODID:-//Apple Inc.//iPhone OS 13.4.1//EN
N:Doe;John;;;
FN:John Doe
ORG:Test;
TEL;type=HOME;type=VOICE;type=pref:1112223333
item1.URL;type=pref:https://jonsully.net
item1.X-ABLabel:_$!<HomePage>!$_
END:VCARD

but may be longer depending the number of fields you added and/or if you included an image.

Step Two: Link It Up!

It’s as easy as linking to the file from your website.

<a class="btn" href="./john-doe.vcf" download>Add to Contacts</a>

Try it: Add to Contacts

Awww yisss. The phone experience is particularly awesome. Try it out for yourself on your site! Make a fun QR code or NFC tag that can help people reach your landing page quickly. See what you come up with 🙂

Comments? Thoughts?