Copy to Clipboard

Create a button that will copy any piece of text, including links, to the clipboard.
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How to add Copy to Clipboard in Webflow?[.c-title_step]

Use Refokus Copy to Clipboard tool to create a button that will copy any piece of text, including links, to the clipboard. 

This tool is great for when you want to allow the user to copy blocks of texts, or URLs, or even color codes from a styleguide.


[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

[.c-text_step]Paste the following script in the “Before tag" field under the "Custom Code" section in the page settings.[.c-text_step]

<script src="https://tools.refokus.io/copy-to-clipboard/bundle.v1.0.0.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

Everything is made using custom attributes, so when we say “Add” that means“Add a custom attribute”.

Add [.c-tool_tag]r-copy-to-clipboard="value"[.c-tool_tag]  to the element that will have the event to copy the text. The value would change depending on what you want to do:


To Copy a specific text, the value of [.c-tool_tag]r-copy-to-clipboard[.c-tool_tag] should be “any text you want”.



If you want to copy the text of a different element, the value of [.c-tool_tag]r-copy-to-clipboard[.c-tool_tag] should be “1”, and add the attribute custom-element with the element selector/class as value, i.e [.c-tool_tag].c-code[.c-tool_tag]


To Copy the inner text of the button, the value of [.c-tool_tag]r-copy-to-clipboard[.c-tool_tag] should be “1” and no other attribute is needed.



To Copy the current URL, the value of[.c-tool_tag] r-copy-to-clipboard[.c-tool_tag] should be “url”




Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.