How to add a native share button with four lines of JavaScript.

How to add a native share button with four lines of JavaScript.
May 16, 2026 · 4 min read · javascript marketing Web Development

What you see is what you ship

Meet Wonder, the design tool where you can generate designs, make precise edits and work with your code context on the same canvas.

Start for free

Most websites build a share section with custom buttons for Twitter, WhatsApp, LinkedIn, and three others. You maintain six links, six icons, six tracking parameters. The Web Share API replaces all of them with a single button that opens the native share sheet. The same one the user already knows from every app on their phone. Four lines of JavaScript.

The code

javascript 
const btn = document.querySelector('.share-btn');

btn.addEventListener('click', async () => {
  await navigator.share({
    title: document.title,
    text:  'Check this out',
    url:   location.href,
  });
});

That is it. On mobile the native share sheet appears. iMessage, WhatsApp, Mail, Notes, AirDrop, whatever the user has installed. On desktop Chrome it shows a smaller share dialog. The user picks where to share. You write zero platform-specific code.

Add a fallback for unsupported browsers

Safari and Chrome on mobile support this fully. Firefox on desktop does not. One feature-detect handles it cleanly:

javascript 
if (navigator.share) {
  btn.addEventListener('click', async () => {
    try {
      await navigator.share({ title: document.title, url: location.href });
    } catch (err) {
      if (err.name !== 'AbortError') console.error(err);
    }
  });
} else {
  // fallback: copy to clipboard
  btn.addEventListener('click', () => {
    navigator.clipboard.writeText(location.href);
    btn.textContent = 'Link copied!';
  });
}

The AbortError check is important, it fires when the user opens the share sheet and then closes it without sharing. That is not an error, so you ignore it silently.

Both APIs require HTTPS. navigator.share and navigator.clipboard are restricted to secure contexts. On a plain http:// site neither is available – no error, just undefined. Local dev on localhost works fine since browsers treat it as secure. If you are still on HTTP in production, this is one more reason to sort that SSL certificate.

You can share files too. Pass a files array to navigator.share() and the user can share images, PDFs, or any file directly to their apps. Use navigator.canShare({ files }) first to check support before attempting it.

Why this beats custom share buttons

  • Works with every app the user has. You do not decide which platforms matter. The user’s phone decides, and it already knows all their apps.
  • Zero maintenance. No API keys, no tracking pixels, no broken Twitter embeds when a platform changes its URL structure.
  • Converts better on mobile. Tapping a native share sheet is a motion users already make dozens of times a day. Custom share buttons feel like extra work.

For content-heavy sites – blogs, news, recipe sites, docs – this is the highest-value feature you can add in under ten minutes. Replace your whole share row with one button and a clipboard fallback, and you are done.

P.S. I made this small tool you can use for your code snippets. Feedback appreciated!

Happy coding!

Marko