Copy to Clipboard Button

Creating a copy to clipboard button is Webflow is a lot easier than you might think, and since I have no other interesting information to add to the introduction, let's get straight into it!

Firstly, add this code to your before the </body> tag in your Webflow project settings.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

<script>
new Clipboard('.copy-button');
</script>

Change the new Clipboard value to whatever class name you are using for your button, or just add on the "copy-button" class to the buttons you want to use for users to copy to clipboard.

Next, add a custom <a> attribute to the same button. The name will be: "data-clipboard-text" and the value will be whatever value you want the user to have copied to the clipboard.

Once you've done this, you can already publish to staging and make sure the button is working.

You will notice that there is no "Copied!" message or anything to let the user know it has been copied. Either way, it will still work fine, so the only thing left to do is add in that tooltip. Once you've designed a tooltip, simply hide it and add in an interaction to show when people click on the clipboard button.

That's it folks!