Native sharing options upon button action

Ask the community
,
1

Hello everyone :wave:

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:

c23647d5-dfff-4316-b527-983430e7b436
c23647d5-dfff-4316-b527-983430e7b436750×1478 61.9 KB

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.

Thank you!

1 Like
2

Did you find a solution that works for you?
I need the same thing…

3

Is there any chance the softr team can help? I have the same problem

1 Like
4

I got something working with a custom code block.

<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>
1 Like