June 5, 2023

Create an Elementor Copy Link Button

Play Video

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.

    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');

    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.

Required Resources

Elementor Logo
Free Options
Credit to Wicky Design
Immerse yourself in the world of web design with Barbara and Mark, a talented husband and wife duo based in Philadelphia, PA. Their channel focuses on everything from web design and Elementor to WordPress and growing an online business. With their unique blend of experience and expertise, they offer invaluable tips, tutorials, and insights for both beginners and experts.
Create an Elementor Copy Link Button
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.