Digital vCard & Dynamic QR Codes

TeamSigs allows you to embed personal Dynamic QR Codes and Digital Business Card (vCard) links directly into your organization's HTML email signatures.

Recipients viewing an email on a desktop or laptop can quickly scan the QR code with their smartphone camera to instantly save the employee's contact card. Recipients viewing on a mobile phone can tap the QR image or digital card link to open the employee's mobile micro-profile and download the contact directly to iOS Contacts or Google Contacts.

1. Overview & Calculated System Variables

Unlike custom personal variables (such as {{phone}} or {{linkedin_url}}) or locked company variables (such as {{company_name*}}), QR codes and vCard links are Calculated System Variables:

• Zero Manual Data Entry: Administrators and employees never need to input QR URLs or generate PNG files manually.
• Form Exclusion: They never appear as input fields in directory forms, user modals, or CSV bulk import sheets.
• Auto-Provisioned Public Hash: Every member receives a collision-safe, random alphanumeric identifier (e.g., 8f12ac39b0d1). This identifier forms their permanent QR code image address and public digital contact URL.
• Distinct Badge Highlighting: In the Template Editor and Free Editor, system tags are badged with a distinctive indigo chip ({{qrcode}}, {{vcard_url}}) in the detected variables bar.

2. Available System Variables

[!TIP] Clickable QR codes: Always wrap {{qrcode}} inside an anchor linking to {{vcard_url}}. This ensures desktop email recipients who prefer clicking rather than scanning can easily open the contact page:

<a href="{{vcard_url}}" target="_blank" style="text-decoration:none;display:inline-block;">
  {{qrcode}}
</a>

3. The Digital Contact Card & vCard 3.0 Download

When a recipient scans the QR code or clicks the {{vcard_url}} link, they are taken to the member's responsive Micro-Profile Page (/c/{hash}):

1. One-Tap "Save to Contacts" Button: Downloads a standardized UTF-8 .vcf (vCard 3.0) file containing:
   • Full Name (FN, N)
   • Organization / Company Name (ORG)
   • Job Title (TITLE) & Department (ROLE)
   • Direct Telephone (TEL;TYPE=WORK,VOICE)
   • Corporate Email (EMAIL;TYPE=WORK,INTERNET)
   • Company Website (URL;TYPE=WORK)
   • Profile Photo / Avatar URL (PHOTO;VALUE=URI)
2. Native iOS & Android Compatibility:
   • On Apple iOS (iPhone / iPad), tapping the downloaded .vcf file immediately opens the native Contacts app with a "Create New Contact" or "Add to Existing Contact" prompt.
   • On Android, the contact card opens seamlessly in Google Contacts or the device's native address book.
3. Direct Communication Links: The mobile landing page also includes quick-action buttons allowing recipients to call, email, or visit corporate social profiles directly with one tap.

4. Code Examples & Layout Patterns

Example A: Centered QR Code with Caption

Ideal for modern vertical signatures placed below the employee details or company disclaimer:

<table cellpadding="0" cellspacing="0" border="0" style="margin-top:12px;">
  <tr>
    <td align="center" style="vertical-align:middle;">
      <a href="{{vcard_url}}" target="_blank" style="text-decoration:none;display:inline-block;">
        {{qrcode}}
      </a>
      <div style="font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#94a3b8;margin-top:4px;text-align:center;line-height:12px;">
        Scan or tap to save contact
      </div>
    </td>
  </tr>
</table>

Example B: Side-by-Side (Details + QR Code)

Ideal for horizontal executive signatures where space efficiency is paramount:

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- Left Column: Personal & Contact Information -->
    <td style="vertical-align:top;padding-right:20px;">
      <div style="font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:bold;color:#0f172a;line-height:18px;">
        {{name}}
      </div>
      <div style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#64748b;line-height:16px;">
        {{job_title}} [[if:company_name*]]&bull; {{company_name*}}[[/if:company_name*]]
      </div>
      <div style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#334155;margin-top:8px;line-height:18px;">
        [[if:phone]]
          <div><a href="tel:{{phone}}" style="color:#2563eb;text-decoration:none;">{{phone}}</a></div>
        [[/if:phone]]
        <div><a href="mailto:{{email}}" style="color:#2563eb;text-decoration:none;">{{email}}</a></div>
        [[if:website*]]
          <div><a href="{{website*}}" style="color:#64748b;text-decoration:none;">{{website*}}</a></div>
        [[/if:website*]]
      </div>
    </td>

    <!-- Right Column: Vertical Divider & QR Code -->
    <td style="vertical-align:middle;padding-left:18px;border-left:1px solid #e2e8f0;text-align:center;">
      <a href="{{vcard_url}}" target="_blank" style="text-decoration:none;display:inline-block;">
        {{qrcode}}
      </a>
      <div style="font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#94a3b8;margin-top:4px;line-height:12px;">
        Scan to save
      </div>
    </td>
  </tr>
</table>

5. Mapping Template Variables to vCard Fields

Templates often employ custom or localized variable tags (e.g., {{movil}}, {{correo}}, {{cargo}}, or {{oficina}}). To guarantee that smartphones and contact applications receive accurately labeled information, TeamSigs provides a dedicated vCard Contact Fields mapping card in the Template Editor.

Dynamic Visibility & Configuration

• Automatic Display: The vCard Contact Fields card appears in the Template Editor sidebar only when {{qrcode}} or {{vcard_url}} is detected in your template layout.
• Configurable Standard Fields: You can map your template's variables to 7 standard vCard 3.0 properties:
  1. Full Name (FN): Formats the recipient's primary contact display name.
  2. Job Title (TITLE): Professional role or designation.
  3. Company (ORG): Business or organization name.
  4. Phone (TEL): Direct mobile or office telephone number.
  5. Email (EMAIL): Work email address.
  6. Website (URL): Corporate or personal website URL.
  7. Address (ADR): Physical office address.
• Smart Alias Auto-Matching: When creating or editing a template, TeamSigs automatically analyzes available tags and pre-selects matching variables based on common naming conventions:
  • Phone: phone, telefono, movil, celular, mobile
  • Email: email, correo, mail
  • Title: job_title, title, cargo, puesto
  • Company: company_name, company, empresa
  • Address: address, direccion, oficina, location
• Selective Field Exclusion: To exclude a field from the digital card, select -- None / Do not include --. Omitted fields are completely skipped in both the .vcf export and the mobile micro-profile page.

6. Best Practices & Compatibility Guidelines

1. Optimal Size (70px – 80px): The default size for {{qrcode}} is 75x75 pixels. This provides the ideal balance between scannability by smartphone cameras and subtle visual integration within corporate email signatures.
2. International Phone Formatting (E.164): For optimal mobile dialing and WhatsApp compatibility, format phone numbers with their international country code (e.g., +1 555 123 4567 or +34 600 000 000).
3. High-Performance Caching: QR code PNGs are served with Cache-Control: public, max-age=31536000, immutable. Once rendered by an email client or browser, the image is cached, ensuring lightning-fast subsequent loads without placing unnecessary load on your email servers.
4. Conditional Wrapping: You can wrap the QR code block in conditional logic if desired:

   [[if:qrcode]]
   <table cellpadding="0" cellspacing="0" border="0">
     <tr>
       <td>
         <a href="{{vcard_url}}" target="_blank">{{qrcode}}</a>
       </td>
     </tr>
   </table>
   [[/if:qrcode]]

5. Corporate Branding Consistency: The landing page automatically mirrors your organization's logo, primary brand color, and company details as configured in Organization Settings (/team).