How To Generate A VCF(VCard File) In Node Js?

Sharing or managing contact information is very commonly used and you must have seen that business people or at many places, a person is giving you his card which contains all his contact details. But what if I tell you that you can make this contact Card virtually? This digital contact card is known as a VCard or Virtual Card which is generated through VCF files.  In this blog, we will learn how to generate a VCard in nodejs.

What is a VCF file?

VCF or Virtual Contact File stores information such as name, phone numbers, address, email addresses, website, and other social URLs, constituting all the contact details a person might wanna share to with others. Vcf files have ‘.vcf’ as an extension.

Creating a VCF File in node js

To create a vcf file in node js, we will be using a package from the node js library only.

We will be using the vcard-creator package to create and manipulate the vcf file in the node.

NOTE: On searching for a vcf file creation package, “VCard Js “ and “vcard-creator” are the most recommended packages. We do not prefer VCard js if you want to add URLs in your vcard, because VCard js does not display the URLs properly. 

  • Open your node js project or create a new project and set up a working nodejs directory with npm init.
  • Once your project is created, install the VCF package via npm.
<em>npm i vcard-creator</em>
Code language: HTML, XML (xml)
  • Now you can require the package and write the following code in your js file.
const VCard = require("vcard-creator").default; const fs = require("fs"); const my_vCard = new VCard(); my_vCard .addName("Technologies", "Codalien") .addPhoneNumber("+91-9899212131") .addJobtitle("Software") .addEmail("") .addNote( "Reliable & Scalable Software Solutions") .addAddress( "A-49, Block A,", "Mohan Cooperative Industrial Estate, Badarpur", "", "New Delhi", "Delhi", "110044", "India" , ) .addURL("") .addSocial("", "Linkedin") .addSocial("","Instagram") .addSocial("", "Youtube"); fs.writeFileSync("./vcfFile.vcf", my_vCard.getOutput());
Code language: PHP (php)

In the above code, we have made a very simple Vcard, adding the important contact details, anybody would add to their Vcard such as name, phone number, address, email, social media URLs, etc. You can add or remove the VCard fields according to your wish.

There are a lot of other options that you can go through and explore if you like.

In the end, we created a file with the .vcf extension to save the output of the VCard.

Run the file with node filename.js and you’ll see a .vcf file created in your desired path.

BEGIN:VCARD VERSION:3.0 REV:2023-10-16T07:09:00.859Z N;CHARSET=utf-8:Technologies;Codalien;;; FN;CHARSET=utf-8:Codalien Technologies TEL:+91-9899212131 TITLE;CHARSET=utf-8:Software EMAIL; NOTE;CHARSET=utf-8:Reliable & Scalable Software Solutions ADR;WORK;POSTAL;CHARSET=utf-8:A-49, Block A,;Mohan Cooperative Industrial   Estate, Badarpur;;New Delhi;Delhi;110044;India URL: X-SOCIALPROFILE;type=Linkedin: X-SOCIALPROFILE;type=Instagram:  ODBiNWFlZA== X-SOCIALPROFILE;type=Youtube: END:VCARD
Code language: PHP (php)

The output of the VCard will look like this.

Adding an image in your VCard

To add an image to your VCard, you need to keep in mind that the image provided should be encoded(base64) already. 

Also, you can provide the URL of the image but most of the applications will ignore the image URL, therefore prefer embedding the image with proper encoding(base64).

Let’s see an example of a Vcard with an image in it.

const VCard = require("vcard-creator").default; const fs = require("fs"); const my_vCard = new VCard(); const image = fs.readFileSync("./image.png", { encoding: "base64", flag: "r", }); my_vCard .addName("Technologies", "Codalien") .addPhoto(image, "PNG") .addJobtitle("Software") .addEmail("") fs.writeFileSync("./vcfFile.vcf", my_vCard.getOutput());
Code language: PHP (php)

In the above code, we first read an image and encoded it into base64.

Then with the .addPhoto() function, we embedded the encoded image along with the image type (png, jpeg, jpg) along with some basic contact details. Lastly, we store the output in the .vcf file.

Now run the file with node filename.js and you’ll see a .vcf file created in your desired path.

BEGIN:VCARD VERSION:3.0 REV:2023-10-16T07:13:40.481Z N;CHARSET=utf-8:Technologies;Codalien;;; FN;CHARSET=utf-8:Codalien Technologies PHOTO;ENCODING=b;TYPE=PNG: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 TITLE;CHARSET=utf-8:Software EMAIL; END:VCARD
Code language: JavaScript (javascript)

The output of the VCard with an image will look something like this.


This was all about the vcf file and how you can add this functionality to your website, providing a virtual contact card that would increase the User experience. This is all you need to know about creating a VCard. I hope you got a good and clear learning on the same. Creating and adding this feature is a super easy and straightforward process and you can easily embed it in your web applications.

You can further generate a vcf file for multiple contacts and can enhance handling contact information.

You can further integrate and customize this feature according to your specific use cases.




Recent Post

  • Mastering Conversational UX: Best Practices for AI-Driven Chatbots

    In today’s digital landscape, where customer engagement reigns supreme, traditional marketing strategies are giving way to more interactive and personalized approaches. The rise of conversational interfaces, often powered by Artificial Intelligence (AI) and Natural Language Processing (NLP), has transformed how businesses interact with their audiences. Whether through AI-driven chatbots on websites, virtual assistants on mobile […]

  • Mastering React Hooks for Infinite Scroll: An Advanced Tutorial

    What is Infinite Scrolling? Infinite scrolling is a widespread interaction design pattern you might’ve noticed in popular apps such as Instagram, TikTok, Facebook, and so on. The applications that need to showcase large datasets, use infinite scroll. This is because, unlike traditional pagination, infinite scrolling loads content continuously as the user scrolls down the page, […]

  • Advantages of Permissioned Blockchains for Efficiency, Security, and Collaboration

    In the last decade, blockchain has emerged as a robust technology in the digital landscape. Blockchains are continuously transforming various industries by redefining data management, data security, and decentralized collaboration. Blockchain gained popularity with the emergence of cryptocurrencies. Let’s take a look back to the year 2017 when Japan recognized Bitcoin as a legal currency […]

  • How AI Is Revolutionizing Mobile App Development in 2024?

    Introduction In a world where smartphones have become an extension of our lifestyle, mobile applications have also become a major part of our daily routines. From making shopping effortless to booking a doctor’s appointment at our fingertips, from getting our food and groceries delivered to our doorstep to managing our finances and making instant transactions, […]

  • A Comprehensive Guide to Sentiment Analysis Using NLP

    Businesses need to understand public interests, attitudes, behavior, and trigger points in today’s dynamic and competitive market. This enables them to efficiently serve their customers, grab opportunities, grow, and develop resilience in the face of a constantly shifting market. Many businesses find it challenging to process vast amounts of text-based data in order to get […]

  • How AI Is Revolutionizing Banking: Transforming Customer Experiences and Enhancing Financial Security

    Banking is a huge industry with a global Banking market likely to achieve a Net Interest Income of USD 10.34 trillion, with Traditional Banks holding a huge stake of USD 8.30 trillion. According to Statista’s projections suggest an annual growth rate of 4.82% (CAGR 2024-2028), culminating in a market volume of USD12.48 trillion by 2028. […]

Click to Copy