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("contact@codalien.com")
.addNote(
"Reliable & Scalable Software Solutions")
.addAddress(
"A-49, Block A,",
"Mohan Cooperative Industrial Estate, Badarpur", "",
"New Delhi",
"Delhi",
"110044",
"India" ,
)
.addURL("https://codalien.com/")
.addSocial("https://www.linkedin.com/company/codalien/", "Linkedin")
.addSocial("https://instagram.com/codalien?igshid=MzRlODBiNWFlZA==","Instagram")
.addSocial("https://www.youtube.com/@codalien", "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;INTERNET:contact@codalien.com
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:https://codalien.com/
X-SOCIALPROFILE;type=Linkedin:https://www.linkedin.com/company/codalien/
X-SOCIALPROFILE;type=Instagram:https://instagram.com/codalien?igshid=MzRl
ODBiNWFlZA==
X-SOCIALPROFILE;type=Youtube:https://www.youtube.com/@codalien
END:VCARDCode 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("contact@codalien.com")
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;INTERNET:contact@codalien.com
END:VCARDCode language: JavaScript (javascript)The output of the VCard with an image will look something like this.
Conclusion
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.