Building My Own Digital Business Card: A Journey from POPL to Customization 

In a world where digital connections are becoming increasingly important, having an efficient way to manage and share your contact information is essential. Many professionals and teams have turned to platforms like POPL, a Digital Business Card service, to streamline the exchange of contact information. However, there comes a time when cost, customization, and a personal touch become more valuable. This is why I decided to ditch POPL and create a digital business card solution tailored to my needs and preferences.

Why POPL?

POPL is a popular choice for professionals and teams seeking an easy-to-use contact management platform. It offers instant contact organization and accessibility through a mobile app and dashboard. It simplifies exchanging and storing contact details, making networking and communication more efficient.

Below is what my POPL looked like when you first loaded it:

The Decision to Build a Digital Business Card:

While POPL is a great tool, I realized I wanted more control and customization over my digital business card. Mine looked like everyone else’s, and I was tired of paying $30 monthly for my company’s account. I wanted a solution that allowed me to share my contact information and provided a unique user experience aligned with my brand and preferences. This desire for customization led me to build my digital business card and save $360 a year.

The DIY Approach:

To replace POPL, I used HTML, Bootstrap, jQuery, and PHP. The HTML page has a single jQuery modal popup that collects the client’s details and then uses PHP to send those details as a VCF. After the popup is closed, the user will find links to my various online profiles and an option to download my VCF. This approach allowed me to customize each link’s look and what links to show. It also gave me full control over the branding and URL, unlike POPL. Most of these digital business card platforms are generic and don’t have options to show off technical profiles like Stack Overflow or multiple sites. 

The final project can be seen here:

https://www.josephcharnin.com/biz-card

Key Features of My Custom Digital Business Card:

1. 1. Contact Information Collection:
      
      Viewers who access my page are prompted to enter their details, or they can “skip” and view my digital business card. If they enter their details, the information is collected and sent to me via PHP email with an attached VCF file containing their details:
      
      

      // Create VCF content

      $vcfContent = “BEGIN:VCARD\n”;

      $vcfContent .= “VERSION:3.0\n”;

      $vcfContent .= “FN:$name\n”;

      $vcfContent .= “EMAIL:$emailAddress\n”;

      $vcfContent .= “TEL:$phone\n”;

      $vcfContent .= “END:VCARD”;

      // Save VCF to a temporary file

      $tempVcf = tempnam(sys_get_temp_dir(), ‘vcf’);

      file_put_contents($tempVcf, $vcfContent);

      The key to sending this file is making sure to base64 encode it like so:

      $email->addAttachment(

          base64_encode(file_get_contents($tempVcf)),

          “text/vcard”,

          “contact.vcf”,

          “attachment”

      );
      
      

      Then, using PHP mail, send the attachment and make sure to delete the temporary file to free up any resources.

       

   2. VCF File Generation for users:

      
      Users can click on links from the HTML page or download my contact details as a VCF file that works on Mac, PC, Android, and iOS.

      var contactInfo = {

      FN: “Joseph Charnin”,

      TEL: “954-764-9268”,

      EMAIL: “joe@ilccreative.com”,

      URL: “https://ilccreative.com”,

      ADR: “;;Fort Lauderdale;FL;;US”

        };

        // Construct vCard file content using contactInfo

        var vcardString = “BEGIN:VCARD\nVERSION:3.0\n”;

        for (var key in contactInfo) {

      vcardString += key + “:” + contactInfo[key] + “\n”;

        }

        vcardString += “END:VCARD”;

        // Create Blob object for vCard file

        var vcardBlob = new Blob([vcardString], { type: “text/vcard” });

        // Create object URL for Blob object

        var vcardURL = URL.createObjectURL(vcardBlob);

        // Trigger download

        var downloadLink = document.createElement(“a”);

        downloadLink.href = vcardURL;

        downloadLink.download = “contact.vcf”;

        document.body.appendChild(downloadLink);

        downloadLink.click();

        document.body.removeChild(downloadLink);

       

   3. Digital Profile:
      
      Visitors can view my digital profile, which includes essential information about me, my work, and my expertise. It provides a comprehensive overview of who I am professionally and is SEO-friendly! A page like this can easily be indexed so that it comes up when someone looks you up. 

The Benefits of Customization:

Building my digital business card gives me complete control over my online presence and offers a unique and personalized experience to anyone interested in connecting with me. It reflects my commitment to providing a tailored and user-friendly interaction.

While platforms like POPL offer valuable features for contact management, sometimes the need for customization and personalization outweighs the convenience of pre-built solutions. My journey from using POPL to building my digital business card has allowed me to create a more personalized and engaging experience for those who want to connect with me. In the digital age, taking control of your online presence can be a rewarding and empowering choice.

Do you have questions about the code to generate the VCF files, or do you need help with your code to get this working? Feel to inspect the elements of mine: https://www.josephcharnin.com/biz-card or send me an email: joe@ilccreative.com.