Native Share Button Widget

Give readers one Share button that hands your page to the share sheet their device already knows - Messages, Mail, WhatsApp, AirDrop, Nearby Share, Slack, whatever apps they have installed. Where a browser has no share sheet, such as Firefox on a desktop, the same button opens a compact panel with the networks you picked and a Copy link box.

Social Media Social No trackers, no cookies Free · no ads

Customize your widget

Button
Shown on the button; with Icon only it becomes the button's spoken name.
Fallback panel
Fallback networks

Loading networks…

Shown only where the device has no share sheet. Copy link is always included.
Share data
Blank shares the page the button is on.
Blank uses og:title or the page title.
Blank uses the meta description.
Light or dark
Match page reads the background behind the component.

Live preview

Exactly what your visitors will see

Embed code

<div data-a2z-kit="native-share-button" data-networks="facebook,x,linkedin,whatsapp,email"></div>
<script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>

One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.

Works with

How it works

The button calls navigator.share() from the W3C Web Share API with three fields: the page title, a short description and the address the kit resolves (your fixed URL, else the canonical link, else the address bar without #fragment and utm_, fbclid or gclid parameters). Empty fields are left out because some browsers refuse an empty string. If the browser lacks the API, if navigator.canShare() says no, or if the call is rejected for any reason other than the reader closing the sheet - a NotAllowedError inside a frame that was not given allow="web-share" is the usual one - the button opens a small dialog instead. That panel lists your fallback networks as tiles plus a read-only address with a Copy button; Escape or a click outside closes it and focus returns to the Share button.

Method

  • navigator.share({ title, text, url }) with empty fields omitted; navigator.canShare() checked first where it exists
  • Rejection with AbortError (sheet dismissed) = do nothing; any other rejection or a missing API = open the fallback panel
  • Fallback tiles = the chosen networks' documented share links, each value encodeURIComponent-encoded (apostrophes as %27)
  • Panel: role=dialog, aria-expanded/aria-controls on the button, Escape and outside click close, focus returns to the opener

Worked examples

A reader on an Android phone

Inputs: Page https://example.com/blog/spring-garden-guide, title A spring garden guide, meta description Easy wins for a first vegetable patch

Result: navigator.share({ url: "https://example.com/blog/spring-garden-guide", title: "A spring garden guide", text: "Easy wins for a first vegetable patch" })

The phone's own sheet opens with the reader's apps; A2Z counts one anonymous 'native' press only after the share completes.

The same page in Firefox on a desktop

Inputs: Fallback networks facebook,x,linkedin,whatsapp,email; reader picks X

Result: https://x.com/intent/post?text=A%20spring%20garden%20guide&url=https%3A%2F%2Fexample.com%2Fblog%2Fspring-garden-guide

No Web Share API, so the panel opens; the X tile posts the title and address, and the Copy box below holds the plain address.

Limitations

  • The share sheet's contents and look are the operating system's; they differ between iOS, Android, Windows and macOS.
  • Firefox on desktop and most Linux browsers have no Web Share API, so they always get the fallback panel.
  • Inside an iframe without allow="web-share" the share sheet is blocked by the browser; the panel is used instead.

Where publishers use it

  • A mobile-first news site replacing a row of twelve network icons with one Share button that opens whatever apps each reader actually uses
  • A recipe blog whose readers mostly send recipes to family on WhatsApp or iMessage - the device sheet offers both without the site guessing
  • An event page where desktop visitors on Firefox still get Facebook, LinkedIn, email and a copyable address from the same button
  • A SaaS changelog post shared into Slack or Teams from a laptop: Chrome and Edge on Windows and macOS show the system share dialog

Questions

Which browsers open the native share sheet?

Safari on iPhone, iPad and Mac, Chrome and other Chromium browsers on Android, Windows and ChromeOS, and Edge on Windows support navigator.share. Firefox on Android supports it; Firefox on desktop and most Linux browsers do not, so those visitors see the fallback panel. The page must be served over https.

Why does the preview show the panel instead of the share sheet?

The builder preview runs inside a frame. Browsers allow navigator.share in a cross-origin frame only when the frame tag carries allow="web-share", and the preview frame does not. On your own page the kit draws the button directly on the page, not in a frame, so the share sheet appears normally.

Can I choose which apps appear in the share sheet?

No. The sheet is drawn by the visitor's operating system from the apps they have installed and the order they use them in. You choose only the fallback networks shown where the sheet is unavailable - Facebook, X, LinkedIn, WhatsApp and Email by default.

What does the share sheet receive?

The title (your fixed title, else og:title, else the page title), a description (your text, else the meta description) and the page address. Apps decide what to use: Messages and WhatsApp usually show the address with a preview, Mail puts the title in the subject line.

Sources

  1. Web Share API - W3C . navigator.share(), navigator.canShare(), AbortError and NotAllowedError, the web-share permissions policy

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Native Share Button
https://a2z.tools/embed/native-share-button

Related widgets

More Social Media widgets →

  • Social Media Share Buttons

    Social Media Social New

    Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.

    Get code

  • Copy Link Button

    Social Media Social New

    A Copy link button or address box that puts a clean page URL on the clipboard and confirms it.

    Get code

  • Share by Email Button

    Social Media Social New

    An 'Email this page' button that opens the reader's mail app with your subject, message and the link.

    Get code

  • Share Page QR Code

    Social Media Social New

    A QR code of the current page so desktop readers can carry it to their phone - card, button or floating.

    Get code

  • Print Page Button

    Social Media Social New

    A Print this page button that opens the browser's print dialog and stays off the printed copy.

    Get code

  • Image Share Buttons

    Social Media Social New

    Pinterest-style Save and share buttons over your article images on hover - without touching your markup.

    Get code

Preview

CustomizeGet code
A2Z EMBEDS FOR YOUR WEBSITE