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!
TL;DR
- Add a button to your CMS Collection List with a unique
idorclass. - Use a hidden Text element to pull the CMS item URL and use this in your JavaScript.
- Implement custom JavaScript to copy the CMS URL to the clipboard on button click, targeting each button and related hidden Text element based on their classes.
Creating a dynamic copy-to-clipboard button in Webflow for CMS item links is achievable using a combination of Webflow and custom JavaScript. Here's how you can do it:
1. Add a Button to Your Collection List
- Go to your CMS Collection List where you want to add the copy button.
- Add a Button element inside the Collection Item.
- Set a unique
idorclassfor this button to target it with JavaScript later.
2. Access the CMS Link
- In the Button or nearby Elements, use a Text element to dynamically pull the CMS item URL (e.g., using a Field connected to the Slug).
- Ensure that this Text element is set to “Visible: Hidden” using the CSS style so it’s not displayed on your site but can be accessed by JavaScript later.
3. Implement Custom JavaScript
- Go to the Custom Code section of your Webflow project (Settings > Custom Code > Footer Code).
- Add a script to listen for the button click event and copy the respective CMS URL to the clipboard. The basic idea would be to fetch and copy the URL stored in the hidden Text element related to the button.
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.your-button-class').forEach(function (button) {
button.addEventListener('click', function () {
// Locate the hidden Text element with the URL
var cmsURL = this.closest('.collection-item-class').querySelector('.hidden-url-class').innerText;
// Copy to clipboard
navigator.clipboard.writeText(cmsURL).then(function () {
alert('Link copied to clipboard!');
}, function (err) {
console.error('Could not copy text: ', err);
});
});
});
});
- Replace
.your-button-class,.collection-item-class, and.hidden-url-classwith the appropriate classes you have assigned.
Summary
To dynamically copy a CMS item link in Webflow, add a button and hidden text for the link within your Collection List. Use JavaScript to copy the link from the hidden text element when the button is clicked. This approach ensures a scalable solution without manually setting each link.
