<webcare-webshare> Web Component

A web component that uses the Web Share API to share a web site, falling back (on Desktop usually) to Copy to Clipboard.

• Demo
  • In use on the registration flow for conf.11ty.dev.
• Blog post
• Inspired by How to let the user share the website they are on—Thomas Steiner (web.dev)

Features

• Defaults to copy URL when Web Share API is not available.
• Optionally override with your own copy-able content.
• Custom button text when Web Share API is not available.

Installation

You can install via npm (@zachleat/webcare-webshare) or download the webcare-webshare.js JavaScript file manually.

npm install @zachleat/webcare-webshare --save

Add webcare-webshare.js to your site’s JavaScript assets.

Usage

Use share-text and share-url per the Web Share API. The button is un-disabled when initialized.

<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/">
	<button disabled>Share your ticket!</button>
</webcare-webshare>

Custom button text when Web Share API not available.

Copy to clipboard workflow only. Use the label-copy (Before) and label-after-copy (After) attributes.

<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" label-copy="📋 Copy your ticket URL" label-after-copy="✅ Copied to Clipboard">
	<button disabled>Share your ticket!</button>
</webcare-webshare>

Set custom share content for copying.

Copy to clipboard workflow only. Use copy-text to override share-url as the default content that is copied when using Copy to Clipboard.

<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" copy-text="Go to https://conf.11ty.dev/">
	<button disabled>Share your ticket!</button>
</webcare-webshare>