How to click a button to copy to clipboard.

Hey there is no "webstudio" way of doing it besides using JS like you mentioned

Is there a reason I can’t get this js solution to work on webstudio? https://finsweet.com/attributes/copy-to-clipboard

@John Siciliano I’m basically trying to migrate over an existing information page that has a couple instances of copy to clipboard buttons. Thanks for your help!

If you share a project link I can take a quick look

Home page:
https://birria-moreno.wstd.io/

Page where instance of button is:
https://birria-moreno.wstd.io/zelle

I dont see the script on that page

Let me see it looks like I had the html embed not showing on the project but I just added it to the end of the head

These are what current settings are set to as I copied over the component from the webflow project

Lets see the project link. No need to add it to the head btw. I would add it to the body and make sure 'client only' is set on the html embed.

Using project settings code doesnt render in the builder so you can't test it.. another reason to use embed

Another thing is that link should be a button.

links go places, buttons do things (like copy)

whats the #email-text

I dont see anything with that

I had it set a data variable so #email-text = “birriamoreno@yahoo.com”

In case I wanted to change the button text without affecting the functionality, but now I only want it to work 😅

in that case I think you want this

not sure exactly what that data attribute expects, but this binding just sets the value to the variable. THe attr might expect a selector though

Never thought about binding it, good idea

Global variables are coming out very soon btw so you can define email once on the global root and use it on any page

So just got to my laptop & was able to switch the link to a button, along with adding the html embed to the body. Still can’t get it to function properly, now wondering what it can be.. lol

Tackling one thing at a time 🙂

I chcekd the docs and it says

When clicking on the trigger element fs-copyclip-element = "click", the text of this element will be copied.

This means we cant pass it the value we want copied (ie no binding) instead it has to reference some other element.