Create an Elementor Copy Link Button

What is the Tutorial About?

Creating an Elementor Copy Link Button on your WordPress website is a simple yet effective way to enhance user experience. This tutorial by Wicky Design will guide you through the process of setting up this feature, which allows users to easily copy the current webpage’s URL to their clipboard.

Tutorial Steps

1. Set Up Your Button:
   Start by adding a button widget to your Elementor template. Change the button text to “Copy Link”. Under the link section, add a pound or hash symbol (#). Then, in the CSS ID section, name it “copyURL”.
2. Add an HTML Widget:
   Next, you need to add an HTML widget to your template. This widget will contain a JavaScript code that enables the “Copy Link” functionality.
3. Insert the JavaScript Code:
   The JavaScript code waits for a click on the button, copies the current URL to the user’s clipboard, and then displays an alert saying “URL copied successfully”. If there’s an issue, it will display “Error copying URL to clipboard”. Make sure to replace the ID in the code with the ID you used for your button.

   <script>
   const copyBtn = document.getElementById('copyURL');
   
   copyBtn.addEventListener('click', () => {
     const url = window.location.href;
     navigator.clipboard.writeText(url).then(() => {
       alert('URL copied successfully!');
     }).catch(() => {
       alert('Error copying URL to clipboard');
     });
   });
   </script>

   Source: Wicky Design

4. Prevent Page Jumping:
   By default, clicking the button will cause the page to jump to the top due to the hash symbol in the button link. To prevent this, remove the hash symbol from the button link. Then, go to the Advanced section of the button settings, scroll down to CSS, and paste in the following code:

   selector:hover {
     cursor: pointer;
   }

   This code ensures that the cursor changes to a pointer when hovering over the button, indicating that it’s clickable.

Use Cases for this Tutorial

• Blog Posts:
  Readers can easily share your blog posts with others by copying the link.
• Product Pages:
  Customers can share your products with friends or on social media.
• Event Pages:
  Attendees can quickly share event details with others.