Get Premium

Simple Elementor Copy Text And Link URL To Clipboard Button

Element.How also offers premium tutorials! Check them here:

Table of Contents

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.

Simple Elementor Copy Text And Link URL To Clipboard Button 1

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

Simple Elementor Copy Text And Link URL To Clipboard Button 2

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

Simple Elementor Copy Text And Link URL To Clipboard Button 3

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.

Simple Elementor Copy Text And Link URL To Clipboard Button 4

Finally, enjoy your Elementor Copy Paste Buttons!

I really hope you found this tutorial useful.

Cheers!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

16 Responses

  1. Your tutorials have always been SO incredibly helpful and when I spotted this on my hunt for a solution for a site I'm working on, I was thrilled it was you 🙂 Any chance there's a "paste" button tutorial to go with this?

  3. For some reason, i can not have more than 1 copy paste button? I have repeated the HTML code block and applied CSS class "copyPaste" to 3 Heading elements, but the button only appears once? Any ideas why?

    Thanks

      1. That's right! The code is needed only one time on the page, even if you have many copy paste elements.

      1. Thanks. I did that, but the button is then not clickable. My question was whether there is any way to make it work.

    2. Greetings!

      To make it work in a popup, be certain to add the HTML element in the popup.

      Then, delete these two lines:

      if (window.ElementorCopyPasteEnabled) return;
      window.ElementorCopyPasteEnabled = true;

      And change this line:

      const copyPasteElements = document.querySelectorAll('.copyPaste');

      to this instead:

      const copyPasteElements = document.querySelectorAll('.elementor-popup-modal .copyPaste');

      Cheers!

  5. Hi this website is a great resource.

    The code has suddenly stopped copying all the text now, so when we click "copy" it now only copies the first line of text?

    I am guessing it's due to an Elementor update of some sort?

    1. Greetings Talat!

      My demo is running the latest version of Elementor, and it copies everything as it should... try again on a new page to see if it works as it should maybe?

  6. Greetings,

    My issue is, when I give the css class to a container with a couple of headings and text elements, when you press "Copy" it only copies the first Heading.
    Is there a way to make it copy the whole container?
    Thank you

    1. Greetings,

      I suggest you use only a single text element, and add all the headings and paragraphs in it, instead of using multiple elements.

      Cheers!

Leave a Reply