Login/Register
Open vCard with Javascript
Asked Answered
javascriptvcf-vcard
V

2

3

With a QR code vcard, the user scans the code with their phone and then the dialog with the "add to contacts" pops up on their phone, such as the code below:

enter image description here

How can I do the same but instead of a QR code scan, I want it to do the same with a button click.

I have tried the following:

var btn = document.getElementById(“clickMe”);
btn.addEventListener(“click”, loadvcard);
function loadvcard(){
 url = "BEGIN%3AVCARD%0AVERSION%3A3.0%0AN%3ADoe%3BJohn%0AFN%3AJohn%20Doe%0ATITLE%3A08002221111%0AORG%3AStackflowover%0AEMAIL%3BTYPE%3DINTERNET%3Ajohndoe%40gmail.com%0AEND%3AVCARD";
 window.open(url);

}
Verniavernice answered 30/8, 2019 at 10:45 Comment(0)
T
2

You can open your vcard in the browser as a data url if you want.

Your code would be:

var btn = document.getElementById(“clickMe”);
btn.addEventListener(“click”, loadvcard);
function loadvcard(){
 var data = "BEGIN%3AVCARD%0AVERSION%3A3.0%0AN%3ADoe%3BJohn%0AFN%3AJohn%20Doe%0ATITLE%3A08002221111%0AORG%3AStackflowover%0AEMAIL%3BTYPE%3DINTERNET%3Ajohndoe%40gmail.com%0AEND%3AVCARD";
 window.open("data:text/x-vcard;urlencoded," + data);
}
Tractile answered 30/8, 2019 at 11:20 Comment(8)
Thanks. I tried that but it shows the vcard as a file and says "Open in contacts" on the iphone, but with the QR vcard it just opens the add new contact with the fields filled out. – Verniavernice
Isn't it what you asked for? – Tractile
I've taken screenshots: This image is when scanned with the QR Code: imgur.com/tw54wWA This one is when clicking on button: imgur.com/mjCLZeQ – Verniavernice
Can you click on "Open in 'Contacts'" ? What happens? – Tractile
Did you figure it out @Bruno? I'm also trying to make it "save contact" – Quicklime
Nope, I haven't yet Zakher. – Verniavernice
Any luck with that? – Pageboy
above code was working fine in chrome but only download howevr, it does not work at all in safari . here is my code which lands me "open in the contact" too , but I do not know how to skip this step ``` var contact = vCardsJS(); contact.firstName = 'John'; contact.lastName = 'Doe'; //step2. download or view const element = document.createElement("a"); const file = new Blob([contact.getFormattedString()], {type: "text/vcard;charset=utf-8"}); element.href = URL.createObjectURL(file); element.download = 'my.vcf'; document.body.appendChild(element); element.click(); ``` – Writhen
T
0

Try to use the web share api, it works.

<html>
<title>
    Web Share API
</title>

<body>
    <div>
        <div>
            <button onclick="shareVcard" id="shareFilesButton">Share Files</button>
        </div>
    </div>
</body>
<script>
    document.getElementById('shareFilesButton').addEventListener("click", () => shareVcard())

function shareVcard() {
fetch("sample.vcf")
.then(function(response) {
    return response.text()
  })
.then(function(text) {

    var file = new File([text], "sample.vcf", {type: 'text/vcard'});
    var filesArray = [file];
    var shareData = { files: filesArray };


    if (navigator.canShare && navigator.canShare(shareData)) {

    // Adding title afterwards as navigator.canShare just
    // takes files as input
    shareData.title = "vcard";

    navigator.share(shareData)
    .then(() => console.log('Share was successful.'))
    .catch((error) => console.log('Sharing failed', error));

    } else {
    console.log("Your system doesn't support sharing files.");
    }
 
});
    }
</script>

</html>
Tandy answered 12/4, 2022 at 10:51 Comment(1)
This is good for iOS, but sadly doesn't work on Android (tested on Chrome for Android - showing a permission denied error). Looking at the Web API documention it doesn't officially support vcf as a file type. – Predate

© 2022 - 2024 — McMap. All rights reserved.