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!

Yes, there is 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.

Here's a step-by-step guide on how to achieve this:

Step 1: Set up your CMS collection and create a reference field
First, you need to set up your CMS collection containing the items that you want to create links for. Create a reference field within the collection to reference the CMS item itself.

Step 2: Design your copy button
Create a button element on your Webflow page where you want the copy button to appear. You can style the button however you like using the Webflow Designer.

Step 3: Add custom attributes to the copy button
To make the copy button dynamic and able to copy different links based on the CMS item it is associated with, we'll use custom attributes. Select the copy button element, go to the Settings panel, and click on "Add Custom Attribute."

Add the following attributes:
- Attribute name: data-link
- Attribute value: {{link-url}}

Step 4: Add custom code
Next, you need to add custom code to handle the copy functionality. Click on the Page Settings icon in the Webflow Designer, go to the Custom Code tab, and click on the </> icon to add custom code to your project.

In the custom code section, you can use JavaScript to copy the value of the data-link attribute when the copy button is clicked.

Here's an example code snippet:

```

```

Make sure to paste the code snippet within the "" tag.

Step 5: Assign the CMS data to the copy button
Now, you need to connect the copy button to the relevant CMS data. In the Collection List or Collection Page where you want the copy buttons to appear, select the copy button element and bind the "data-link" attribute to the link field of the associated CMS item. To do this, go to the Settings panel, select the copy button element, click on "Bind to Field", and choose the appropriate field from the CMS collection.

That's it! Now, when you preview or publish the site, each copy button will dynamically copy the link of the associated CMS item when clicked.

Note: This solution requires the use of custom code, so be sure to test thoroughly and make any necessary adjustments to fit your specific project requirements.