Share anything from your website by Web Share API

With the Web Share API, web apps are able to use the same system-provided share capabilities as platform-specific apps. The Web Share API makes it possible for web apps to share links, text, and files to other apps installed on the device in the same way as platform-specific apps.

Web share has the following capabilities and limitations:

It can only be used on a site that is accessed via HTTPS.
It must be invoked in response to a user action such as a click.
It can share, URLs, text, or files.

Sharing links and text

To share links and text, use the share() method, which is a promise-based method with a required properties object. To keep the browser from throwing a TypeError, the object must contain at least one of the following properties: title, text, url or files

// check for support of web share API

if (navigator.share) {

navigator
.share({
title: "This is header/title",
text: "This is the description",
url: "https://put-here-url.com",
})
.then(() => console.log("Successful share"))
.catch((error) => console.log("Error sharing", error));
} else {
console.error("Browser doesn't support Web Share API");
}

You can use this in your function or anywhere you want. But before you do that you should remember one thing that it does not support by old version browsers.

So you need to make sure that you handle that case. For example the above code will console the error if it doesn't support the Web Share API but it's my preference that you should only show the share button if browser supports it, otherwise hide the button.

Here is the example code what i was saying

const btn = document.getElementById("btn");

// function for web share api

function webShareAPI(header, description, link) {
navigator
.share({
title: header,
text: description,
url: link,
})
.then(() => console.log("Successful share"))
.catch((error) => console.log("Error sharing", error));
}
if (navigator.share) {
// Show button if it supports webShareAPI
btn.style.display = "block";
btn.addEventListener("click", () =>
webShareAPI("header", "description", "www.url.com")
);
} else {
// Hide button if it doesn't supports webShareAPI
btn.style.display = "none";
console.error("Your Browser doesn't support Web Share API");
}