Create a Copy-to-Clipboard Button for Your WordPress Site

What is the tutorial about?

Learn how to create a copy-to-clipboard button for your WordPress website, allowing users to easily copy and share text content. This versatile solution uses Elementor, HTML, and JavaScript, and can be implemented on any type of website. Provided by Wicky Design the tutorial will break down the steps to help you get started.

Use Cases for this Tutorial

• Bloggers who want to make it easy for readers to share quotes or snippets from their posts.
• Developers creating documentation, enabling users to quickly copy code snippets.
• E-commerce sites offering promo codes that users can copy and use at checkout.
• Educational websites providing formulas, definitions, or other text content that users may want to copy and reference later.

Required Code

Source: https://wickydesign.com/how-to-create-a-copy-to-clipboard-button/

<button onclick="copyText()">Copy all text to your clipboard!</button>


<script>

function copyText() {

  // Get the div element

  var divElement = document.getElementById("copytextid");


  // Create a range object

  var range = document.createRange();


  // Select the contents of the div element

  range.selectNode(divElement);


  // Add the range to the user's selection

  window.getSelection().addRange(range);


  // Copy the selected text to the clipboard

  document.execCommand("copy");


  // Give a visual feedback to the user that the text has been copied

  alert("Text has been copied!");

}

</script>