Has anyone found a way to create a copy to clipboard button in Webflow that can dynamically copy the link of a CMS item without manually creating a link for each button? Thank you!

Creating a copy to clipboard button in Webflow to dynamically copy the link of a CMS item is possible using a combination of Webflow settings and custom script. Here's how you can achieve it:

​

1. Add a Button in Your Collection Item

• Go to your Collection Page in Webflow.
• Add a Button inside each item in your Collection List.
• Set a unique class for this button so you can target it with custom script.

​

2. Add a Custom Attribute

• Select the button you just added.
• In the settings, add a custom attribute where the Key is data-url and the Value is the dynamic CMS URL. This can be done by linking the Value to the item's URL field.

​

3. Add Custom Script

• Open the Page Settings for your CMS Collection Page.
• Scroll to the “Before </body> tag” section.
• Insert a custom script that copies the URL from the button’s attribute to the clipboard. 

​

Here is a sample script to guide you:

document.querySelectorAll('.your-button-class').forEach(button => {
  button.addEventListener('click', function() {
    const url = this.getAttribute('data-url');
    navigator.clipboard.writeText(url).then(() => {
      alert('Link copied to clipboard!');
    }).catch(err => {
      console.error('Error copying to clipboard:', err);
    });
  });
});

4. Test Your Button

• Publish your site, and navigate to the CMS Collection Page.
• Click the button next to an item to ensure it copies the correct link to the clipboard.

​

Summary

To dynamically enable a copy to clipboard function for each CMS item’s link in Webflow, add a button within each item that includes a data attribute with the URL. Use a script to copy that attribute's value to the clipboard when the button is clicked.