Create a Professional Digital Business Card (vCard) Hosted on Your Own Domain
In today’s digital-first networking environment, handing out a paper business card feels a bit outdated. A digital vCard allows your clients and prospects to save your contact information directly to their phones with a single tap.
While there are many paid services out there that will host a digital business card for you, hosting it on your own WordPress domain is a much smarter move. It boosts your own website’s traffic, keeps your branding consistent, and best of all—it can be done entirely for free.
In this guide, we will walk you through creating a premium, dynamic vCard using free web resources and a custom HTML/CSS master code that you can drop directly into your WordPress site.
Step 1: Generate Your VCF File
A VCF (Virtual Contact File) is the standard file format for digital business cards. This is the file that downloads to a user’s phone when they click “Save My Contact.”
- Go to VCF Generator.
- Fill in your professional details (Name, Company, Job Title, Phone Number, Email, Website, etc.).
- Generate and download the
.vcffile. - Upload this file to your WordPress Media Library (or a designated folder via FTP) and copy the file URL.
Step 2: Create a Custom QR Code
To make your vCard easily shareable in person, you need a QR code that links directly to the page on your domain where your vCard is hosted (e.g., yourdomain.com/vcard/your-name).
- Go to QR Code Monkey.
- Paste the URL of your dedicated vCard webpage.
- Customize the design (you can change colors or even add your logo to the center).
- Download the QR code as a
.pngfile. - Upload this image to your WordPress Media Library and copy the URL.
Step 3: Implement the Custom Master Code
Now it is time to build the visual interface of your vCard.
You do not need a heavy page builder to do this. You can simply use the native WordPress block editor. Add a Custom HTML block to your page and paste the master code below.
This code is fully responsive, lightweight, and features premium styling including interactive slide-out panels for sharing and QR scanning.
HTML
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.icreate-vcard-professional {
max-width: 420px;
margin: 35px auto;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
background: #ffffff;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.04);
}
.icreate-header-section {
background: linear-gradient(135deg, #f1f5f9 0%, #cbd5e1 100%);
padding: 24px 20px 22px;
text-align: center;
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.icreate-logo-img {
display: block;
margin: 0 auto 6px;
max-width: 155px;
max-height: 48px;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
}
.icreate-company-title {
font-size: 10px;
font-weight: 700;
color: #475569;
letter-spacing: 2.5px;
line-height: 1.4;
text-transform: uppercase;
margin-top: 4px;
}
.icreate-content-section {
background: #ffffff;
padding: 32px 25px 30px;
position: relative;
overflow: hidden;
min-height: 260px;
}
.icreate-content-section::before {
content: 'iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub iCreate WP Hub';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 11px;
font-weight: 700;
color: rgba(15, 23, 42, 0.03);
letter-spacing: 2px;
line-height: 40px;
word-wrap: break-word;
pointer-events: none;
user-select: none;
z-index: 0;
padding: 30px 20px;
overflow: hidden;
}
.icreate-content-inner {
position: relative;
z-index: 2;
}
.icreate-left-strip {
position: absolute;
left: -8px;
top: 40%;
transform: translateY(-50%);
width: 48px;
height: 120px;
background: linear-gradient(135deg, #0f172a, #1e293b);
border-radius: 0 16px 16px 0;
box-shadow: 3px 0 12px rgba(15, 23, 42, 0.15);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 5;
}
.icreate-left-strip:hover {
left: 0;
background: linear-gradient(135deg, #1e293b, #0f172a);
box-shadow: 5px 0 16px rgba(15, 23, 42, 0.2);
}
.icreate-left-strip svg {
width: 24px;
height: 24px;
fill: #f8fafc;
transition: transform 0.3s ease;
}
.icreate-left-strip:hover svg {
transform: scale(1.15);
}
.icreate-left-strip span {
font-size: 9px;
color: #f8fafc;
font-weight: 700;
text-transform: uppercase;
writing-mode: vertical-rl;
letter-spacing: 1px;
}
.icreate-right-strip {
position: absolute;
right: -8px;
top: 25%;
transform: translateY(-50%);
width: 92px;
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-radius: 14px 0 0 14px;
box-shadow: -3px 0 15px rgba(15, 23, 42, 0.08);
padding: 8px 7px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
cursor: pointer;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 5;
border: 2px solid #0f172a;
border-right: none;
}
.icreate-right-strip:hover {
right: 0;
box-shadow: -5px 0 20px rgba(15, 23, 42, 0.12);
}
.icreate-right-strip.enlarged {
position: fixed;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) scale(2.2);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
z-index: 1000;
border: 3px solid #0f172a;
border-radius: 16px;
}
.icreate-qr-image {
width: 70px;
height: 70px;
border-radius: 8px;
object-fit: contain;
background: #ffffff;
border: none;
}
.icreate-qr-label {
font-size: 9px;
font-weight: 700;
color: #0f172a;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
line-height: 1.2;
}
.icreate-photo-frame {
width: 175px;
height: 195px;
margin: 0 auto 18px;
position: relative;
border-radius: 20px;
background: linear-gradient(90deg, #0f172a 0%, #475569 25%, #94a3b8 50%, #475569 75%, #0f172a 100%);
background-size: 200% 100%;
animation: shimmerBorder 3.5s linear infinite;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
overflow: hidden;
}
.icreate-photo-inner {
width: calc(100% - 8px);
height: calc(100% - 8px);
margin: 4px;
border-radius: 17px;
background: #ffffff;
overflow: hidden;
}
.icreate-employee-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
background: #f1f5f9;
}
.icreate-employee-name {
font-size: 20px;
font-weight: 700;
color: #0f172a;
text-align: center;
margin-bottom: 12px;
letter-spacing: 0.3px;
line-height: 1.2;
}
.icreate-employee-details {
font-size: 14px;
font-weight: 600;
color: #475569;
text-align: center;
margin-bottom: 24px;
letter-spacing: 0.3px;
}
.icreate-detail-separator {
display: inline-block;
width: 1.5px;
height: 14px;
background: #0f172a;
margin: 0 10px;
vertical-align: middle;
opacity: 0.25;
}
.icreate-action-button {
display: inline-block;
padding: 12px 34px;
background: transparent !important;
border: 2.5px solid #0f172a !important;
border-radius: 12px;
color: #0f172a !important;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none !important;
text-align: center;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.icreate-action-button:hover {
background: #0f172a !important;
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}
.icreate-footer-section {
background: #0f172a;
color: #ffffff;
padding: 24px 28px 26px;
position: relative;
text-align: center;
}
.icreate-footer-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}
.icreate-footer-content {
position: relative;
z-index: 1;
}
.icreate-address-block {
font-style: normal;
font-size: 14px;
line-height: 1.45;
margin-bottom: 18px;
font-weight: 400;
color: #cbd5e1;
}
.icreate-address-block strong {
font-weight: 600;
color: #ffffff;
display: block;
margin-bottom: 6px;
font-size: 15px;
}
.icreate-address-line {
margin: 2px 0;
}
.icreate-footer-divider {
width: 130px;
height: 1.5px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1), transparent);
background-size: 250% 100%;
margin: 0 auto 20px;
border-radius: 2px;
animation: slowShimmerLine 5s infinite linear;
}
@keyframes slowShimmerLine {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@keyframes shimmerBorder {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.icreate-contact-group {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.icreate-contact-link {
display: flex;
align-items: center;
gap: 7px;
text-decoration: none;
color: #f8fafc !important;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
padding: 6px 12px;
border-radius: 8px;
}
.icreate-contact-link:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.1);
}
.icreate-contact-link svg {
width: 17px;
height: 17px;
fill: #f8fafc !important;
flex-shrink: 0;
}
.icreate-vertical-divider {
width: 1.5px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
@media (max-width: 480px) {
.icreate-vcard-professional { margin: 20px 12px; max-width: 100%; }
.icreate-header-section { padding: 22px 15px 20px; }
.icreate-logo-img { max-width: 130px; margin-bottom: 6px; }
.icreate-company-title { font-size: 9px; letter-spacing: 2px; }
.icreate-content-section { padding: 28px 20px 26px; }
.icreate-content-section::before { font-size: 9px; line-height: 32px; padding: 20px 15px; }
.icreate-left-strip { width: 42px; height: 110px; top: 35%; }
.icreate-left-strip svg { width: 20px; height: 20px; }
.icreate-right-strip { width: 82px; padding: 7px 6px; top: 20%; }
.icreate-qr-image { width: 62px; height: 62px; }
.icreate-qr-label { font-size: 8px; }
.icreate-photo-frame { width: 155px; height: 175px; margin-bottom: 16px; }
.icreate-employee-name { font-size: 19px; margin-bottom: 10px; }
.icreate-employee-details { font-size: 13px; margin-bottom: 22px; }
.icreate-action-button { padding: 11px 30px; font-size: 13px; }
.icreate-footer-section { padding: 22px 22px 24px; }
.icreate-address-block { font-size: 13px; line-height: 1.4; margin-bottom: 16px; }
.icreate-address-block strong { margin-bottom: 4px; }
.icreate-footer-divider { margin-bottom: 18px; }
.icreate-contact-group { gap: 10px; }
.icreate-contact-link { font-size: 13px; padding: 6px 8px; gap: 5px; }
.icreate-contact-link svg { width: 15px; height: 15px; }
.icreate-vertical-divider { height: 18px; }
}
</style>
<div class="icreate-vcard-professional">
<header class="icreate-header-section">
<img src="https://i-create.co.in/wp-content/uploads/2026/03/iCreate-Brand-Logo.svg" alt="iCreate WP Hub Logo" class="icreate-logo-img">
<div class="icreate-company-title">A COLLABORATIVE ECOSYSTEM</div>
</header>
<section class="icreate-content-section">
<div class="icreate-left-strip" onclick="shareViaWhatsApp()" role="button" tabindex="0" aria-label="Share Card via WhatsApp">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
</svg>
<span>Share</span>
</div>
<div class="icreate-right-strip" id="qrStrip" role="button" tabindex="0" aria-label="QR Code - Click to enlarge">
<img src="{{QR_CODE_URL}}" alt="QR Code" class="icreate-qr-image">
<div class="icreate-qr-label">Scan Me</div>
</div>
<div class="icreate-content-inner">
<div class="icreate-photo-frame">
<div class="icreate-photo-inner">
<img src="{{PHOTO_URL}}" alt="{{NAME}}" class="icreate-employee-photo">
</div>
</div>
<div class="icreate-employee-name">{{NAME}}</div>
<div class="icreate-employee-details">
<span>Hub Code : {{HUB_CODE}}</span>
<span class="icreate-detail-separator"></span>
<span>Mobile : {{MOBILE}}</span>
</div>
<div style="text-align: center;">
<a href="{{VCF_FILE_URL}}" class="icreate-action-button">Save My Contact</a>
</div>
</div>
</section>
<footer class="icreate-footer-section">
<div class="icreate-footer-content">
<address class="icreate-address-block">
<strong>Corp. Office</strong>
<div class="icreate-address-line">B3, Spaze IT Park, Sector -49, Gurugram,</div>
<div class="icreate-address-line">Delhi NCR - 122018</div>
</address>
<div class="icreate-footer-divider"></div>
<div class="icreate-contact-group">
<a href="https://i-create.co.in" target="_blank" rel="noopener noreferrer" class="icreate-contact-link">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L8 14v1c0 1.1.9 2 2 2v2.93zM17.9 17.39c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
</svg>
<span>i-create.co.in</span>
</a>
<div class="icreate-vertical-divider"></div>
<a href="tel:011-25085494" class="icreate-contact-link">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
</svg>
<span>011-25085494</span>
</a>
</div>
</div>
</footer>
</div>
<script>
(function() {
const qrStrip = document.getElementById('qrStrip');
function toggleQR() { qrStrip.classList.toggle('enlarged'); }
qrStrip.addEventListener('click', toggleQR);
qrStrip.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleQR(); }
});
document.addEventListener('click', function(e) {
if (qrStrip.classList.contains('enlarged') && !qrStrip.contains(e.target)) {
qrStrip.classList.remove('enlarged');
}
});
})();
function shareViaWhatsApp() {
const shareText = encodeURIComponent('Check out my digital business card from iCreate WP Hub!');
const shareUrl = encodeURIComponent(window.location.href);
window.open(`https://wa.me/?text=${shareText}%20${shareUrl}`, '_blank');
}
</script>
Step 4: Map Your Variables
To create a card for a specific person, simply scan the HTML code above and replace the {{PLACEHOLDER}} tags with the specific details.
- Find
{{NAME}}and replace it with the employee’s name (e.g., Aastha Kumari). Make sure to replace it in both the display text and thealttag of the image. - Find
{{HUB_CODE}}and swap it. - Find
{{MOBILE}}and swap it. - Find
{{PHOTO_URL}},{{QR_CODE_URL}}, and{{VCF_FILE_URL}}and replace them with the exact links from your WordPress Media Library.
Once you hit publish on your page, you will have a highly professional, interactive, and shareable digital business card!
Leave a Reply
You must be logged in to post a comment.