How to Create a Copy to Clipboard Button

May 9, 2023

In this video I will show you how to create a copy to clipboard button that you can assign to any block of text.

I will be using Elementor in this example, but since this is just using HTML and Javascript you can use this on any type of website.

Purchase Elementor Pro:
https://wickydesign.com/get-elementor

Timestamps:

  • 0:00 Introduction
  • 0:18 Tutorial Begins

JavaScript Code Snippet

				
					<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>
				
			

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources

Join Our Community

Wicky Design YouTube

Get our latest videos by subscribing for FREE to our YouTube channel. New videos are uploaded weekly!