Is it possible to create a Webflow button that, when clicked, opens a vCard information and allows visitors to save it on their smartphones?
TL;DR
- Create a UTF-8 encoded .vcf file with your contact details and upload it to Webflow’s Assets panel.
- Add a button linking to the .vcf URL, and optionally use JavaScript to add a download attribute for better mobile support.
Yes, you can create a Webflow button that lets users download and save a vCard (.vcf file) to their smartphones. Here's how to implement it correctly.
1. Create Your vCard File (.vcf)
- Use a vCard generator or manually create a
.vcffile with your contact details. - The file must be UTF-8 encoded and saved with the .vcf extension (e.g.,
john-doe.vcf). - Make sure the file includes essential fields like full name, telephone, email, and organization.
2. Upload the .vcf File to Webflow
- Go to the Webflow Designer.
- Open the Assets panel and upload your .vcf file.
- Once uploaded, click the file and copy its hosted URL from the panel.
3. Create a Button to Link the vCard
- Add a Button element to your page.
- With the button selected, go to the Element Settings panel.
- Set the Link Type to URL, then paste the hosted .vcf file URL.
- Check the “Open in new tab” option if desired, though not necessary for downloads.
- Optionally, style the button (e.g., “Save Contact”).
4. Use Download Attribute (Optional)
- Webflow doesn’t support the HTML
downloadattribute natively in the link settings. - To force a download instead of opening the file in the browser, you can use custom code:
- Select the link or button.
- Add an embed custom HTML element nearby with a
<script>that targets the button and adds thedownloadattribute using JavaScript.
Example JavaScript in the Page Footer:document.querySelector('a[href*=".vcf"]').setAttribute("download", "contact.vcf");
5. Test on Mobile Devices
- Visit the published site from a smartphone.
- Tap the “Save Contact” button.
- iOS and Android devices typically prompt the user to import the contact into their address book.
Summary
To let users save your contact info, upload a .vcf file to Webflow, link it to a button, and optionally add a download attribute via script. Smartphones will recognize the vCard and offer to save it.