How to add an attribute:

close icon
Hey! Give us some feedback here.
Functional

Copy to Clipboard

Set any element on the page as a click trigger for copy to clipboard functionality.

Copy to Clipboard
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
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.

navigator arrow
CLICK TRIGGER
I want this
button icon

Button, Link Block, Text Link or Div

to be the copy to clipboard trigger
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-copyclip-element
copy icon
Value
click
copy icon
Check live example here
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.
how to add copyclip click attribute
navigator arrow
COPY TARGET
I want to copy the content of this

Text Block, Paragraph, Heading, Input, Text Area, Select

element
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-copyclip-element
copy icon
Value
copy-this
copy icon
Check live example here
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.
how to add copy this attribute
navigator arrow

Option

I want to copy the text of the "click" trigger button
See how it works
see webflow attributes
Attribute
Option / Functionality
Name
fs-copyclip-copy
copy icon
Value
copy-me
copy icon
When clicking on the trigger element (fs-copyclip-element = "click"), the text of the button element will be copied.

This attribute should be added to the same element that has the click trigger, fs-copyclip-element = "click"
navigator arrow
Option
COPY STATIC STRING
I want this to copy a specific string of text
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-copyclip-text
copy icon
Value
"Copy this text string"
copy icon
Check live example here
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"
navigator arrow
Option
MESSAGE
I want to show this message on the button when the content is copied
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-copyclip-message
copy icon
Value
Copied!
copy icon
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"
navigator arrow
Option
ACTIVE CLASS
I want to change the style of the element when the content is copied
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-copyclip-active
copy icon
Value
class-name
copy icon
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.
navigator arrow
Option
DURATION
I want to change the time of the copied message animation
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-copyclip-duration
copy icon
Value
500
copy icon
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"

Working examples

See this solution working live in this Webflow project.

Example 1
Copy me
Copy me
Copy and paste this example directly on Webflow
copy icon
Copy this example
Example 2
Copy this
Copy this --->

I am the text that will be copied.

Copy and paste this example directly on Webflow
copy icon
Copy this example
Example 3
Copy siblings
Copy sibling

I am the sibling element that will be copied

Copy and paste this example directly on Webflow
copy icon
Copy this example
Example 4
Copy string
Copy string
Copy and paste this example directly on Webflow
copy icon
Copy this example

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

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