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

2 Likes
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>
2 Likes
5

Could you share a link to the site this is working on?

6

Thanks for the code! I used it to let users share the website URL (in my case, sustainable deals on mobile view)

Here is the adjusted custom code to share the page URL:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }
    .button-container {
    
    }
    #share {
        background-color: #FEF8EE;
        border: 1px solid #FFA500;
        border-radius: 6px;
        color: #333333;
        display: block;
        width: 100%; /* Make button full width */
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 450;
        line-height: 20px;
        padding: 8px 12px;
        box-sizing: border-box; /* Ensure padding doesn't cause overflow */
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="button-container">
    <button id="share">Share this deal</button>
</div>

<script>
// Asynchronous function to handle the button click
const handleClick = async () => {
    try {
        // Get the current URL
        const currentUrl = window.location.href;

        // Prepare the share data
        const shareData = {
            title: document.title,
            text: 'Check out this page!',
            url: currentUrl
        };

        // Check if the navigator can share and proceed
        if (navigator.share) {
            await navigator.share(shareData);
        } else {
            // Fallback for browsers that don't support Web Share API
            alert('Share this link: ' + currentUrl);
            // Optionally, copy to clipboard
            await navigator.clipboard.writeText(currentUrl);
            alert('Link copied to clipboard!');
        }
    } catch (error) {
        console.error('Error:', error.message);
    }
};

// Add the click event listener to the button
document.getElementById('share').addEventListener('click', handleClick);
</script>
</body>
</html>
7

I have a list showing up in a Softr page which brings a list of records from Airtable, each of them has a formula field which builds a custom URL to a prefilled form in Fillout, could I use this button to fetch that URL (it would be an "item action button) instead of the current URL of the page? I would reaaly appreciate some help as I’m pretty bad with HTML and/or Javascript.

Thanks in advance.