So this is the scenario – you have this text on your website and would like to have a button that would allow the visitor to copy the text into clipboard using one click, without requiring them to select the text manually. Thankfully, there is a clipboard.js library, allowing us to perform different kinds of scenarios easily. Let me show you one of the examples, implemented into WordPress.
If you check the clipboard.js website, it says “No dependencies”. This means that we will not have to add jQuery or any other library for clipboard.js to work (although in WordPress case, this is no big deal because most websites load jQuery anyway, with or without the reason to do so 🙂 ).
So let’s load the main library file:
The next step is to initialize new object like this:
I like to keep things in their own script files, so we need to enqueue this one as well:
For my own convenience, I set this script to load in footer, hence the “true” keyword.
And now we need some HTML:
You can easily recognize .copy-letter-button class, which connects the button with clipboard object, while data-clipboard-target does the rest. As you can see in my example, it needs to match the <div> or any other element with corresponding ID which contains the text you want to have copied into clipboard. Also, data-clipboard-action can be set to either cut or copy, but cut will work only on some form elements <textarea> e.g).
Make sure you check my Codepen example to see this in action.