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!