Easily add a "Copy to Clipboard" button using clipboard.js
Sooraj Gupta December 5, 2020
Simply add this library to your website folder and get a "copy to clipboard" icon appear next to any text desired to be copied using the button. The following steps are needed to include clipboard.js in your website:
Download clipboard.js
Download the zipped file then move the unzipped folder to your website folder.
DownloadAdd to your HTML file
First, place the following into the last line of the <head> section
<link href = "clipboard/clipboard.css"/>Then, place the following into the last line of the <body> section
<script src = "clipboard/clipboard.js"></script>Finally add the following line after the previous <script> tag
<script> Clipboard.init(); </script>Specify which text to be Copyable
In order to make sure the copy button shows up, you must specify the elements should be copyable. This is done by setting the data-clipboard attribute to "copy"
<h1 data-clipboard = "copy">Hello World!</h1>Download