Hello, i would like to know if it is possible to create a button (link) that when you click on it allows to open a vcard information and save it on my visitors smartphones?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Yes, but it’s not particularly convenient, and it’s very dependent on phone configuration.
- Create a VCF file with the contents you want, and name it
whatever.vcf - Upload it to Google Drive and share it as anyone with the link can access
- Get the file ID from the URL and reform it as;
https://drive.google.com/uc?export=download&id=YOUR-FILE-ID
- Create your link in your Webflow site and set it to this link
- You’ll need to use script to set two additional properties on the link
type=text/vcf
download=contact.vcf
Both are reserved properties, thus you cannot use the in-built custom attributes feature.
On desktops, you’ll often just get a downloaded file, which is mostly useless. I tend to hide the file on desktops. On mobiles, the file downloads and then when you open it, the Contact app generally steps in to display the contact data.
You’ll need to experiment, and try it on different devices you’re wanting to support.
Wow, thank you @memetican for your quick response.
But I have some doubts (Sorry I`m not an expert with code):
First: Why do you say it is not convenient?
Second: How do I get the file ID from the URL?
Third: Where should I paste the script you sent me? on the header?
type=text/vcf
download=contact.vcf
I really apologize if these questions sound too basic.
What i want is to have a link that, when clicked, automatically adds the contact in the .vcf file to the address book of the mobile device.
You’re unlikely to find a good, easy solution for this. In my testing, device support is limited and hugely varied, not only by device manufacturer but by device configuration.
Some devices support vCards, many don’t. Some support hCards, most don’t. Many implement vCard support in different ways and with different requirements. Which browser the user is using matters hugely…
Honestly I’d look for a 3rd party solution that can resolve some of those things for you.
You can spend a lot of time here trying to build something, but it will probably only work properly for a small portion of your users.
Webflow cannot store your vcf’s. You have to create them manually, and host them somewhere. Google Drive is one option.
The file ID is in the url of any google drive file you open. Google search can help you there.
That’s not script, those are custom attributes. You’d need to write a script to apply them to your link element.
Why don’t you create a vcard qr code? That would be the best method for what you are trying to do. I did a little research in search and found this article which looks pretty decent in explaining everything. vCard QR Codes: A comprehensive guide on designing vCards | Beaconstac