Simple Elementor Copy Text And Link URL To Clipboard Button

In this tutorial, you will learn how to add a copy paste button to Elementor Heading and Text Editor elements.

This button will allow users to either copy the text content of the elements, or copy their URL (both of which can be dynamic).

Here is a live example of what we will create in this tutorial:

Elementor Copy Paste Button Code

First, you will need this Elementor copy paste button code snippet on your page.

Copy paste the code below in an HTML element. Importantly, place the HTML element after ALL elements on which you want a copy paste button added. Lower on the page.

<script> 
/* Please login to get the code 
 * The code will be for the Simple Elementor Copy Text And Link URL To Clipboard Button tutorial 
 * Found at this URL https://element.how/elementor-copy-paste-clipboard-button/ 
 */ 
</script>

Then, add the required class names to your elements

This will work on any element really, but is tested working on the Heading and Text Editor elements.

Go under Advanced > Custom CSS, and give the class name copyPaste to the elements where you want a copy paste button.

If you want them to copy paste the URL instead, give them both the class name copyPaste and copyPasteURL

With the copyPasteURL class name, the link of the heading will be copied to the clipboard, instead of its text content.

Adjusting the code

On the front end, you should see the copy paste buttons already.

To adjust their styles, go in the HTML element, and adjust the CSS variables you will find there.

Lower down, in the JavaScript, you can also adjust the SVG to your own icon if you prefer.

In the JavaScript is also where you will be able to edit the Copy and Copied! texts.

Finally, enjoy your Elementor Copy Paste Buttons!

I really hope you found this tutorial useful.

Cheers!