Simple Elementor Copy Text And Link URL To Clipboard Button
Get Premium

Simple Elementor Copy Text And Link URL To Clipboard Button

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

Simple Elementor Copy Text And Link URL To Clipboard Button

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!

Simple Elementor Copy Text And Link URL To Clipboard Button

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

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

Leave a Reply