Share URL

Share a URL with Web Share, copy to clipboard or to social media

Share URL logo


  • Native Web Share API is used if available
  • Copy to clipboard
  • Share directly to social platforms
  • Updates text on share success


Your browser does not support the Web Share API. Check your browser support at Can I Use. The below examples will only show the copy to clipboard button.



Web Component

Fallback element


$ npm install @nigelotoole/share-url --save-dev


Import or add the JS into your project, add the elements to your HTML and initialize the plugin if needed.


import { ShareUrl, ShareUrlAuto } from 'share-url.js';


<script src="share-url.js" type="module"></script>

Web Component

import { ShareUrl } from 'share-url-wc.js';


<script src="share-url-wc.js" type="module"></script>

Initialize JS

// Initialize a single element
const ShareUrlDefault = ShareUrl({ 
  selector: '#share-url--default'

// Initialize all elements with default options
// These can be overridden by reinitializing or from data attributes on the element.



<button class="share-url">Share link</button>

Web Component

<share-url><button>Share link</button></share-url>


The options can be set via initialization in the JS or by attributes on the element, which will be given the highest priority. The property is changed from camel case to dash case with with the prefix 'share' added for the JS version e.g. "activeClass" to "share-active-class".

<button class="share-url" data-share-active-class="is-open">
<share-url active-class="is-open">
Property Default Type Description
selector '.share-url' String || Element Container element selector.
activeClass 'is-active' String CSS class when share has been successful.
action 'share' String Action keyword (share, clipboard, twitter, facebook, mastodon, linkedin) or a url e.g. "".
url document.location.href String URL to share.
title document.title String Title text to share.
urlParameter 'url' String Parameter for the url e.g.
titleParameter 'text' String Parameter for the title e.g.
textSelector null String Element to update the text, the element itself is the default.
textLabel '' Sting Initial text on the element, existing text is the default.
textSuccess 'Shared' String Text shown when a share is successful.
maintainSize false Boolean Element will maintain its size after text is changed to prevent layout jank.
fallback false Boolean Element is a fallback for the Share API and will not be displayed if Share is available.


Supports all modern browsers at the time of release.

Demo site

Clone the repo from Github and run the commands below.

$ npm install
$ npm run dev


How to let the user share the website they are on by Thomas Steiner, webcare-webshare Web Component by Zach Leatherman and Adding a “share to mastodon” link to any web site – and here by Christian Heilmann.

HTML web components by Jeremy Keith, HTML web components by Jim Nielsen, The different ways to instantiate a Web Component and Progressively enhancing a Web Component by Chris Ferdinandi.