I’d like to implement native sharing options in a list details page. There are two buttons on the page and one should let the native sharing options pop up. The result should look similar to this:
So far I haven’t seen a built-in solution by Softr. During my research I’ve stumbled upon Web Share API which looks quite promising, however I’m very new to custom code blocks and scripts. So far I haven’t managed to run it successfully.
Here’s the code from the documentation:
const shareData = {
title: "MDN",
text: "Learn web development on MDN!",
url: "https://developer.mozilla.org",
};
const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");
// Share must be triggered by "user activation"
btn.addEventListener("click", async () => {
try {
await navigator.share(shareData);
resultPara.textContent = "MDN shared successfully";
} catch (err) {
resultPara.textContent = `Error: ${err}`;
}
});
Could I make this work for my use case? How would the code need to be adjusted?
Open to other suggestions as well if someone has made up thoughts about native sharing options in Softr before.
<button id="share" style="background: darkcyan;color:white;">Share Video</button>
<script>
// Asynchronous function to handle the button click
const handleClick = async () => {
try {
// Fetch the video file
const response = await fetch('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4');
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
// Create a Blob from the response
const blob = await response.blob();
// Create a File object from the Blob
const filesArray = [new File([blob], 'Video 1.mp4', { type: 'video/mp4', lastModified: new Date() })];
// Prepare the share data
const shareData = {
title: 'Some title',
text: 'Some text',
files: filesArray,
};
// Check if the navigator can share files and proceed
if (navigator.canShare && navigator.canShare(shareData)) {
await navigator.share(shareData);
} else {
console.warn('Unable to share files', shareData);
}
} catch (error) {
console.error('Error:', error.message);
}
};
// Add the click event listener to the button
document.getElementById('share').addEventListener('click', handleClick);
</script>
