Get a professional website for $99 per month. One week turnaround.

How to Create a Copy to Clipboard Button

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