Contact Sharing Over The Web
2 min read | June 5 2020
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>
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 🙂