Skip to main content
The vCard template generates QR codes containing contact information that can be instantly added to a smartphone’s address book. This is ideal for business cards, email signatures, event badges, and networking materials.

​
How to create a contact QR code

  1. Select the Contacto (Contact) tab in the generator
  2. Fill in the contact information fields:
    • First name and last name
    • Phone number
    • Email address
    • Company name (optional)
  3. Customize the QR code appearance
  4. Download and add to your business card or signature
When scanned, the QR code will prompt users to save the contact directly to their phone’s contacts app.

​
Contact information fields

​
vcardData.firstName
string
The contact’s first name (given name).
​
vcardData.lastName
string
The contact’s last name (family name).
​
vcardData.phone
string
Phone number in international format is recommended (e.g., +1 234 567 8900).
​
vcardData.email
string
Email address for the contact.
​
vcardData.company
string
Organization or company name associated with the contact.

​
vCard format details

The generator creates a vCard version 3.0 format string that’s universally recognized by smartphones and contact management applications: 
BEGIN:VCARD
VERSION:3.0
N:<lastName>;<firstName>;;;
FN:<firstName> <lastName>
ORG:<company>
TEL;TYPE=CELL:<phone>
EMAIL:<email>
END:VCARD

​
Format breakdown

  • BEGIN:VCARD / END:VCARD - Marks the start and end of the vCard data
  • VERSION:3.0 - Specifies vCard format version (3.0 is widely supported)
  • N: - Structured name (Last;First;Middle;Prefix;Suffix)
  • FN: - Formatted name (full display name)
  • ORG: - Organization/company name
  • TEL;TYPE=CELL - Mobile phone number
  • EMAIL: - Email address

​
Example vCard

BEGIN:VCARD
VERSION:3.0
N:García;María;;;
FN:María García
ORG:Acme Corporation
TEL;TYPE=CELL:+34 612 345 678
EMAIL:[email protected]
END:VCARD

​
Use cases for business cards and contact sharing

Digital business cards

Add a vCard QR code to printed business cards so recipients can instantly save your contact information without manual typing.

Email signatures

Include a vCard QR code in your email signature for easy contact sharing in digital correspondence.

Event badges and name tags

Print vCard QR codes on conference badges or event name tags to facilitate networking and contact exchange.

LinkedIn and social profiles

Add vCard QR codes to your LinkedIn profile image or social media bios for cross-platform contact sharing.

Marketing materials

Include on flyers, brochures, or promotional materials to make it easy for potential customers to reach you.

Physical storefronts

Display at your business location so customers can quickly save your contact details for follow-up.

​
Best practices

​
Phone number formatting

Use international format with country code for maximum compatibility: 
✓ Good: +1 234 567 8900
✓ Good: +44 20 7946 0958
✓ Good: +81 3-1234-5678

✗ Avoid: (234) 567-8900
✗ Avoid: 555-1234

​
Email validation

Ensure email addresses are valid and professional: 
✓ Good: [email protected]
✓ Good: [email protected]

✗ Avoid: myemail@example
✗ Avoid: user [email protected] (spaces)

​
Company names

Include company names to provide professional context: 
✓ Good: Tech Solutions Inc.
✓ Good: María García Design Studio
✓ Good: Lopez & Associates Law Firm
Leaving the company field empty is acceptable for personal contacts or freelancers without a formal business name.

​
Implementation example

Here’s how the vCard template generates contact QR codes: 
// vCard data state with all contact fields
const [vcardData, setVcardData] = useState({ 
  firstName: '', 
  lastName: '', 
  phone: '', 
  email: '', 
  company: '' 
});

// QR value generation using vCard 3.0 format
useEffect(() => {
  switch (activeTab) {
    case 'vcard':
      const vcard = `BEGIN:VCARD
VERSION:3.0
N:${vcardData.lastName};${vcardData.firstName};;;
FN:${vcardData.firstName} ${vcardData.lastName}
ORG:${vcardData.company}
TEL;TYPE=CELL:${vcardData.phone}
EMAIL:${vcardData.email}
END:VCARD`;
      setQrValue(vcard);
      break;
    // ... other cases
  }
}, [activeTab, vcardData]);
The implementation uses template literals to construct the vCard 3.0 format string, with newline characters (\n) separating each field. The form uses a two-column grid layout to organize the input fields efficiently.
The vCard template is located at lines 137-156 in src/components/QRGenerator.jsx. The state is initialized at line 12 with all fields as empty strings. The vCard generation logic is at lines 34-36.

​
Compatibility

The vCard 3.0 format is compatible with:
  • iOS: Native Camera app and Contacts
  • Android: Camera app, Google Contacts, and third-party QR readers
  • Windows: Default Camera app (Windows 10+)
  • macOS: Preview, Contacts
  • Contact management apps: Outlook, Gmail, Apple Mail, and most CRM systems
vCard 3.0 is the most widely supported version. While vCard 4.0 exists, version 3.0 ensures maximum compatibility across all devices and platforms.

Build docs developers (and LLMs) love

Get started for freeTalk to us