jQuery Copy Button

There are plenty of small UX improvements we can make that save time and reduce friction for end users. One such improvement is the ability to copy specific content to the clipboard with a single click—whether it's a tracking code, a reference ID, or a chunk of pre-written text. It may only save a few seconds at a time, but when used wisely, these enhancements create a smoother, more intuitive experience. In this article, I'll walk through how to implement a lightweight copy-to-clipboard feature using jQuery. This method relies on HTML data attributes and class-based targeting, making it reusable and easy to drop into any part of your site without relying on IDs or heavy libraries.

Step 1: Add the jQuery Copy Script

Start by including the jQuery-based script that handles the copy-to-clipboard functionality. This script listens for clicks on any element with the copy-button class, retrieves the data-copytext value, and copies it to the user’s clipboard. You can place this script directly in your page's footer or enqueue it properly within your theme or plugin.

<script>
    jQuery(document).ready(function($) {
    $('.copy-button').on('click', function() {
        var copyText = $(this).data('copytext');
          copyToClipboard(copyText);
        });
    });

    function copyToClipboard(text) {
        var textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        alert('Copied to clipboard: ' + text);
    }
</script>

Step 2: Add the Copyable Element

To complete the setup, add the data-copytext attribute to any HTML element you want to make clickable. Be sure to also include the class copy-button on that same element. This tells the script which elements should trigger the copy action. You can use any tag—<span>, <div>, <button>, etc.—as long as it includes both the attribute and the class.

<div class="copy-button" data-copytext='Copy This Text'>
    <strong style="font-size:16px;">Copy This Text</strong> - Click to copy
</div>

Step 3: Add Visual Feedback (Optional but Recommended)

To improve the user experience even further, it’s a good idea to provide visual feedback when content is successfully copied. Instead of using an alert (which can be disruptive), you can update the element’s text temporarily to let the user know the action was successful. Here’s how you can do that with a simple enhancement to the existing script:

<script>
    jQuery(document).ready(function($) {
        $('.copy-button').on('click', function() {
            var $button = $(this);
            var copyText = $button.data('copytext');
            copyToClipboard(copyText);

            // Store original content
            var originalHTML = $button.html();
            
            // Show copied feedback
            $button.html('<em>Copied!</em>');
            
            // Restore after 2 seconds
            setTimeout(function() {
                $button.html(originalHTML);
            }, 2000);
        });
    });

    function copyToClipboard(text) {
        var textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
    }
</script>