The Web Share API allows users to share content from a web page directly via native sharing options, like sending a link through messaging apps or social media. This feature is supported on most modern mobile browsers but not on all desktop browsers.

If the Web Share API is unsupported, the script provides a fallback that reveals custom sharing options, such as copying the URL or sharing on Facebook, Twitter, or LinkedIn.

How to Use the Script:

  1. Add Attribute share: Add this to the element that will trigger the share.
  2. Add the share-option attribute to indicate whether the Web Share API is supported. Include the is-hidden class to keep it hidden on initial load. For the button that copies the URL to the clipboard, use the share-copy attribute. The text that changes when the URL is copied should have the share-copy-text attribute (change to “Copied”). Finally, use share-facebook, share-twitter, and share-linkedin attributes for the corresponding social share links.
  3. Copy the script and paste it just before the closing </body> tag. <script src="https://cdn.jsdelivr.net/gh/jeminids/webflow-codes@share_v3.0/share.min.js"></script>
  4. It's done 🎉