I am trying to create a copy to clipboard button but instead of copying a preset text I want it to get a link for the CMS Item it relates to. So for example:
I have a collection list and each list has a slug/link that gets attached to it.
Once the user clicks the buttons, I want that link to be copied.
I don’t want to have to create a link for each button for each list item.
I know that there are some Javascript Libraries and snippets that can do the regular copy to clipboard but I was wondering if someone has already made that function work with a CMS item.
When editing a collection page, in the custom code section, you can Add Fields (essentially the attributes of the collection item) within your custom code. So essentially, if you take GraphicOwls’ snippet and use it within the custom code section of a collection page, you can do this:
Thank you! I think this code should work. I want to find a way to make it work outside a collection page, maybe by referencing the collection list. The page I am working is a long list of collection items and it should have a copy link button. But these items are populated automatically in the page. See example:
@tsantarem, I see what you are looking for. The website you have shared utilizes clipboard.js plugin which does have a way to work with Webflow’s CMS.
I found an article that sets up a Webflow CMS with clipboard.JS which you can read here:
Essentially, if you add an html embed within your collection, you can utilize the Add Fields and therefore setup the slug as data-clipboard-text’s value.
