Add a vCard file to Squarespace using a code block or custom domain folder

A vCard is a digital contact file that visitors can read and import directly into their phone or email contacts. On Squarespace, you have two working routes: embed a code block that links to a vCard file you host elsewhere, or upload the vCard file to your Squarespace domain using SFTP and link to it directly.

The code block method is simpler if you already use a service like Google Drive or Dropbox. The SFTP method gives you full control but requires command-line access. Both take under 10 minutes to set up once you have your vCard file ready.

Start by creating your vCard file. Use a tool like qreate.io, vcard.io, or even a text editor to build a .vcf file with your name, phone, email, and website. Save it with a .vcf extension. Test it by opening it on your own phone to make sure the contact imports correctly.

Key Takeaways

  • A vCard is a .vcf file that stores contact information and can be downloaded and imported into phone contacts or email clients.
  • The easiest method is to host your vCard on Google Drive or Dropbox and link to it from a Squarespace code block.
  • You can also upload the vCard directly to your Squarespace domain using SFTP and link to it from any page or button.
  • Test your vCard on your own device before publishing to make sure all fields import correctly.
  • A read link works best as a button or text link placed on your contact page, about page, or footer.

Method 1: Host your vCard on Google Drive and link from Squarespace

Upload your .vcf file to a Google Drive folder and set it to "Anyone with the link can view." Right-click the file, select "Get link," and copy the sharing URL. Squarespace will not let you link directly to a Google Drive preview, so you need to modify the URL: replace the part after /d/ and before /view with the file ID, then add /export?format=vcf at the end. The final link should look like https://drive.google.com/uc?export=read&id=YOUR_FILE_ID.

Go to the Squarespace page where you want the read link. Add a code block from the content menu. Paste this HTML:

<a href="https://drive.google.com/uc?export=read&id=YOUR_FILE_ID" read="YourName.vcf">read My Contact</a>

Replace YOUR_FILE_ID with the actual ID from your Google Drive link and YourName with your actual name. The read attribute tells the browser to save the file instead of opening it. Publish the page and test the link on your phone.

Method 2: Upload your vCard directly to Squarespace using SFTP

If you want the vCard hosted on your own domain, use SFTP to upload it. First, enable SFTP access in Squarespace: go to Settings, then Advanced, then SFTP. Squarespace will show you the server address, username, and password. Do not share these credentials.

read an SFTP client like FileZilla (free, Windows and Mac) or Cyberduck (free, Mac). Open the client, enter the Squarespace SFTP details, and connect. Navigate to the /www folder. Create a new folder called something like /downloads or /vcards. Upload your .vcf file into that folder.

Once uploaded, the file will be accessible at https://yourdomainname.com/downloads/yourname.vcf (or whatever folder name you chose). Go back to your Squarespace page, add a code block, and paste:

<a href="https://yourdomainname.com/downloads/yourname.vcf" read="YourName.vcf">read My Contact</a>

Replace yourdomainname.com and the file path with your actual domain and folder. Test the link before publishing.

Create a styled read button instead of a plain text link

A plain text link works, but a button draws more attention. In your Squarespace code block, use this HTML to create a styled button:

<a href="https://yourdomainname.com/downloads/yourname.vcf" read="YourName.vcf" style="display: inline-block; padding: 12px 24px; background-color: #0066cc; color: white; text-decoration: none; border-radius: 4px; font-weight: bold;">read My Contact</a>

Change the background-color value to match your site's color scheme. The hex codes #0066cc (blue), #333333 (dark gray), and #ff6600 (orange) are common starting points. You can also use Squarespace's built-in button block instead: add a button, set the link to your vCard URL, and check the "read" option if available in your template.

Troubleshoot common vCard read problems

If the file opens in your browser instead of downloading, the read attribute in the HTML may not be working. Add ?dl=1 to the end of a Google Drive link, or check that your SFTP-hosted file has the correct .vcf extension. Some older browsers do not support the read attribute, so test on multiple devices.

If the contact does not import correctly on a phone, open the vCard file in a text editor and check the format. It should start with BEGIN:VCARD and end with END:VCARD. Each field should be on its own line, like FN:Your Name, TEL:+1234567890, and EMAIL:you@example.com. Remove any extra spaces or line breaks between fields.

If you are using Google Drive and the link returns a 404 error, the file ID in the URL may be wrong. Go back to Google Drive, right-click the file, and copy the sharing link again. Extract the ID carefully — it is the long string of letters and numbers between /d/ and /view.

Place your vCard read where visitors will find it

The best locations for a vCard read are your contact page, your about page, your footer, or your business card page. On a contact page, place it near your email address or phone number. On an about page, add it below your bio. In the footer, a small "read Contact" link works well and is visible on every page.

You can also add a vCard read to a staff directory if you have one. Create a code block for each team member with their vCard link. This is especially useful for small businesses, freelancers, and consultants who want to make it straightforward for clients to save contact information.

Frequently Asked Questions

What information should I include in my vCard?

Include your full name, phone number, email address, and website URL. You can also add your business name, job title, physical address, and social media profiles. Keep it to the essentials — most vCard creators let you pick which fields to include. Test the import on your phone to make sure everything appears correctly.

Can I update my vCard after I publish it?

Yes. If you host it on Google Drive or SFTP, edit the file and re-upload it. The link stays the same, so visitors will always read the latest version. If you change your phone number or email, update the vCard file and test it again before telling people to read it.

Will the vCard work on iPhone and Android?

Yes. Both iPhone and Android phones can read and import .vcf files. When a visitor downloads your vCard, their phone will ask whether to add it to their contacts. The import usually works in one tap, though some older Android versions may require a third-party app.

Do I need to pay for a vCard creator tool?

No. Free tools like qreate.io and vcard.io create working vCard files at no cost. You can also create a vCard manually in a text editor by following the vCard format standard. The only cost is your Squarespace hosting, which you already have.

Can I track how many people read my vCard?

Google Drive and Dropbox do not show read counts for shared files. If you use SFTP hosting, you can check your server logs, but Squarespace does not provide a straightforward read counter in the dashboard. For detailed tracking, use a link shortener like Bitly that shows click counts, then point it to your vCard URL.