How to Create a Copy to Clipboard Button

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://wicky.co/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>
				
			

Free Brand Messaging Worksheet

Define Your Voice and Connect with Your Audience

More Free Resources

Let's Work Together

Big ideas start with a quick chat. Let’s talk!