A Clean URL Copy Feature Using Clean JavaScript an

Because who doesn’t appreciate a great user experience?

Better than copy pasting it from the address bar!
Because with all the refers and stuff sharing URLs has become super annoying…

I had some trouble implementing an interactive URL copy feature in my Webflow projects. I like this functionality myself a lot, because sharing a link with colleagues than copy pasting it from the address bar with all the refers and stuff is super annoying.

can significantly enhance the user experience on your website, by allowing visitors to effortlessly copy the URL of your webpages and share them.

It was important for me to use clean JavaScript, meaning the code is straightforward, maintainable, and efficient. By using JavaScript, we ensure broad compatibility and easy integration with your existing Webflow site or project.

The functionality of our URL copy feature is built upon the Clipboard API, a powerful tool in the modern web development toolkit. The Clipboard API provides a way to hook into the native clipboard functionality of the user's operating system, enabling you to programmatically copy and paste text.

Why is the Clipboard API so important? Well, it streamlines the process of sharing content. Instead of manually selecting and copying a URL, your website visitors can now do so with a single click. It makes sharing easier and faster, which could lead to increased user engagement, more return visits, and wider dissemination of your content.

Script

<!-- Share with Copy-Link -->
<script>
  document.getElementById("copy-link").addEventListener("click", async (event) => {
    event.preventDefault();
    const currentUrl = window.location.href;
if (!navigator.clipboard) {
  document.getElementById(&quot;copy-status&quot;).textContent = &quot;Your browser doesn't support Clipboard API.&quot;;
  return;
}

try {
  await navigator.clipboard.writeText(currentUrl);
  document.getElementById(&quot;copy-status&quot;).textContent = &quot;URL Copied!&quot;;
} catch (err) {
  console.error(&quot;Failed to copy URL: &quot;, err);
  document.getElementById(&quot;copy-status&quot;).textContent = &quot;Failed to copy URL.&quot;;
}

// Use setTimeout to clear the message after 3 seconds
setTimeout(() =&gt; {
  document.getElementById(&quot;copy-status&quot;).textContent = &quot;&quot;;
}, 3000);

});
</script>

Documentation

Script Overview

This script adds a "click" event listener to an HTML element (identified by the ID "copy-link"). When this element is clicked, the script attempts to copy the current page's URL to the clipboard using the Clipboard API. The outcome of this operation is then displayed in another HTML element (identified by the ID "copy-status"). The status message will disappear after 3 seconds.

Detailed Description

1. The document.getElementById("copy-link") function gets the HTML element with the ID "copy-link". This should be the element that the user clicks on to copy the URL.
2. The addEventListener("click", async (event) => {...} function adds a click event listener to the "copy-link" element. When the element is clicked, the provided asynchronous function is executed.
3. event.preventDefault(); prevents the default action associated with the click event. For example, if the "copy-link" element is a hyperlink, it would prevent the page from navigating to the hyperlink's URL.
4. const currentUrl = window.location.href; gets the current page's URL.
5. The script then checks if the navigator.clipboard object is available. If not, it updates the "copy-status" element to indicate that the browser does not support the Clipboard API, and then returns early to stop execution.
6. The script attempts to copy the current page's URL to the clipboard using navigator.clipboard.writeText(currentUrl). This operation returns a Promise.
7. If the Promise is fulfilled (the copy operation is successful), the script updates the "copy-status" element to indicate success ("URL Copied!").
8. If the Promise is rejected (the copy operation fails), the script logs the error to the console and updates the "copy-status" element to indicate failure ("Failed to copy URL.").
9. Regardless of whether the operation was successful or not, the script uses setTimeout to clear the "copy-status" element's text after a delay of 3 seconds.

HTML Elements Required

This script requires two HTML elements:

• An element with the ID "copy-link". This is the element that the user clicks on to copy the current page's URL. It can be any type of element, but it's typically a button or a hyperlink.
• An element with the ID "copy-status". This is the element where the script displays the outcome of the copy operation. It can be any type of element that can contain text, such as a p or div element.

Errors and Debugging

If the script fails to copy the URL or fails to update the status message, make sure that:

• The "copy-link" and "copy-status" elements exist in the HTML and are not being removed or having their IDs changed dynamically by other JavaScript code.
• The Clipboard API is available in your browser and context. Some older browsers do not support the Clipboard API, and even some modern browsers only support it in secure contexts (HTTPS).
• Your HTML and script are loaded in the correct order. If the script runs before the HTML elements it references are loaded, it will not work correctly.