Functional
Copy to Clipboard
Set any element on the page as a click trigger for copy to clipboard functionality.
Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
CLICK TRIGGER
I want this
Button, Link Block, Text Link or Div
to be the copy to clipboard trigger
See how it works
Add this attribute
Description
Name
fs-copyclip-element
Value
click
When clicking on the element, copy to clipboard functionality will be initiated.
By default, this will copy the content of the trigger button. If you have a button with the "Copy me" text, this "Copy me" text will be copied to the clipboard.
By default, this will copy the content of the trigger button. If you have a button with the "Copy me" text, this "Copy me" text will be copied to the clipboard.
COPY TARGET
I want to copy the content of this
Text Block, Paragraph, Heading, Input, Text Area, Select
element
See how it works
Add this attribute
Description
Name
fs-copyclip-element
Value
copy-this
When clicking on the trigger element fs-copyclip-element = "click", the text of this element will be copied.
This is optional to add and should only be used when the text of a different element on the page will be copied.
There are options for selecting which text to copy.
This is optional to add and should only be used when the text of a different element on the page will be copied.
There are options for selecting which text to copy.
COPY SIBLING
I want to copy the content of this
Text Block, Paragraph, Heading, Input, Text Area, Select
element, which is a sibling of the click trigger.
See how it works
Add this attribute
Description
Name
fs-copyclip-element
Value
copy-sibling
When clicking on the trigger element fs-copyclip-element = "click", this text of this sibling element will be copied.
A benefit of using "copy-sibling" is that it doesn't need instances numeration (1, 2, 3...) like the "copy-this" version. If you have many copy buttons with many different text elements to copy, "copy-this" this requires each new instance to have a instance number on it. "copy-sibling" does not need to declare new instances.
Requires a html sibling relationship. Both the click trigger element and this copy-sibling element must be under the same parent with a sibling relationship.
A benefit of using "copy-sibling" is that it doesn't need instances numeration (1, 2, 3...) like the "copy-this" version. If you have many copy buttons with many different text elements to copy, "copy-this" this requires each new instance to have a instance number on it. "copy-sibling" does not need to declare new instances.
Requires a html sibling relationship. Both the click trigger element and this copy-sibling element must be under the same parent with a sibling relationship.
Add this attribute
Description
Name
fs-copyclip-text
Value
"Copy this text string"
When clicking on the trigger element (fs-copyclip-element = "click"), the text string set as your value will be copied.
Where?
This attribute should be added to the same element that has the click trigger, fs-copyclip-element = "click"
Add this attribute
Description
Name
fs-copyclip-message
Value
Copied!
When clicking on the trigger element (fs-copyclip-element = "click"), this text will show on the trigger button.
Where?
This attribute should be added to the same element that has the click trigger, fs-copyclip-element = "click"
Option
ACTIVE CLASS
I want to change the style of the element when the content is copied
See how it works
Add this attribute
Description
Name
fs-copyclip-active
Value
class-name
When clicking on the trigger element (fs-copyclip-element = "click"), this css class will be added to an element.
Where?
This attribute should be added to the element that will get the class added to it when the click trigger is clicked.
Add this attribute
Description
Name
fs-copyclip-duration
Value
500
By default, the success state has a duration of 500ms. This duration can be modified with the fs-copyclip-duration attribute.
Where?
This attribute should be added to the same element that has the click trigger, fs-copyclip-element = "click"
You may need multiple instances of this Attribute!
All of our attributes follow the same structure for multiple instances!
To use a second, third, or fourth instance on an attribute add -x at the end of the value of the element attribute. "x" must be a unique number. This unique number is how you link elements to instances. For example, list-3, trigger-3, and target-3 will all be connected to the same instance.
Example of this solution:
Attributes that must have instances
Second instance example
Third instance example
fs-copyclip-element = "click"
fs-copyclip-element = "click-2"
fs-copyclip-element = "click-3"
fs-copyclip-element = "copy-this"
fs-copyclip-element = "copy-this-2"
fs-copyclip-element = "copy-this-3"
Working examples
See this solution working live in this Webflow project.
Example 1
Copy me
Example 2
Copy this
Copy this --->
I am the text that will be copied.
Example 3
Copy siblings
Copy sibling
I am the sibling element that will be copied
Example 4
Copy string
Combinations using Copy to Clipboard:
You can combine this Attribute with others to create more complex solutions.
Frequently Asked Questions
Everything you need to know about this attributes solution.
No FAQ items found yet. Join Finsweet Community on Slack if you have any question related to this solution.
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
