AttRibutes
Copy to Clipboard
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

Copy to Clipboard

Copy content to the clipboard with a single click in Webflow.

Watch a quick tutorial

Copy to Clipboard • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Click trigger

Add to Button, Text link, Link block, Div

fs-copyclip-element
=
"
click
"

Copy this

Add to Button, Text link, Link block

fs-copyclip-element
=
"
copy-this
"

Copy sibling

Add to Button, Text link, Link block, Div

fs-copyclip-element
=
"
copy-sibling
"

Copy string

Add to element with fs-copyclip-element = "click"

fs-copyclip-element
=
"
TEXT_CONTENT
"

Optional attributes

Message

Add to element with fs-copyclip-element = "click"

fs-copyclip-message
=
"
TEXT_CONTENT
"

Active class

Add to element with fs-copyclip-element = "click"

fs-copyclip-active
=
"
CLASS_NAME
"

Duration

Add to element with fs-copyclip-element = "click"

fs-copyclip-duration
=
"
TIME_IN_MS
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-copyclip
></script>

Copy Script
2

Choose the method you want

Copy Button Content
Copy Another Content
Copy Sibling
Copy String
3

Add this required attribute to the element

Click Trigger

Click on this element to copy text content.
fs-copyclip-element
=
"
click
"

Clicking on the element activates the copy-to-clipboard feature. By default, the content of the trigger element itself is copied.

Add this attribute:
Name
fs-copyclip-element
Copy
Value
click
Copy
Add it to those type(s) of element(s):
Button
Text Link
Link Block
Div Block
EXAMPLE

if you have a button labeled "Copy me," the text "Copy me" will be copied to the clipboard.

3

Add these required attributes to the elements

Click Trigger

Click on this element to copy text content.
fs-copyclip-element
=
"
click
"

Clicking on the element activates the copy-to-clipboard feature. By default, the content of the trigger element itself is copied.

Add this attribute:
Name
fs-copyclip-element
Copy
Value
click
Copy
Add it to those type(s) of element(s):
Button
Text Link
Link Block
Div Block
EXAMPLE

if you have a button labeled "Copy me," the text "Copy me" will be copied to the clipboard.

Copy This

Define the element to be copied
fs-copyclip-element
=
"
copy-this
"

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

This option should be used when intending to copy text from a different element on the page.

Add this attribute:
Name
fs-copyclip-element
Copy
Value
copy-this
Copy
Add it to those type(s) of element(s):
Text Block
Paragraph
Heading
Input
Text Area
Select
3

Add these required attributes to the elements

Click Trigger

Click on this element to copy text content.
fs-copyclip-element
=
"
click
"

Clicking on the element activates the copy-to-clipboard feature. By default, the content of the trigger element itself is copied.

Add this attribute:
Name
fs-copyclip-element
Copy
Value
click
Copy
Add it to those type(s) of element(s):
Button
Text Link
Link Block
Div Block
EXAMPLE

if you have a button labeled "Copy me," the text "Copy me" will be copied to the clipboard.

Copy Sibling

Copy the text content of a Trigger's sibling
fs-copyclip-element
=
"
copy-sibling
"

Clicking on the trigger element specified by fs-copyclip-element = "click" will copy the text from this sibling element.

Add this attribute:
Name
fs-copyclip-element
Copy
Value
copy-sibling
Copy
Add it to those type(s) of element(s):
Text Block
Paragraph
Heading
Input
Text Area
Select
NOTE

A key advantage of using "copy-sibling" is the elimination of the need for numbering instances (1, 2, 3, etc.) as required by the "copy-this" approach. This is particularly useful when there are multiple copy buttons paired with various text elements to copy, since "copy-this" necessitates assigning a unique instance number to each pair.

In contrast, "copy-sibling" simplifies setup by not requiring the declaration of new instances, but it does require that the trigger element and the element containing the text to be copied share a sibling relationship under the same parent in the HTML structure.

3

Add these required attributes to the elements

Click Trigger

Click on this element to copy text content.
fs-copyclip-element
=
"
click
"

Clicking on the element activates the copy-to-clipboard feature. By default, the content of the trigger element itself is copied.

Add this attribute:
Name
fs-copyclip-element
Copy
Value
click
Copy
Add it to those type(s) of element(s):
Button
Text Link
Link Block
Div Block
EXAMPLE

if you have a button labeled "Copy me," the text "Copy me" will be copied to the clipboard.

Copy String

Copy a specific string of text
fs-copyclip-text
=
"
TEXT_CONTENT
"

Clicking on the trigger element defined with fs-copyclip-element = "click" will result in the copying of the text string specified as your value.

EXAMPLE

Use this method to copy a text that you're not showing on the page.

Add this attribute:
Name
fs-copyclip-text
Copy
Value
TEXT_CONTENT
Copy
Example:
fs-copyclip-text = "Copy this text string"
Add it to any element with
fs-copyclip-element = "click"
4

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

settings

Message

Display a message when the trigger is clicked
fs-copyclip-message
=
"
TEXT_CONTENT
"

When you click on the trigger element specified with fs-copyclip-element = "click", the text added in the value field will be displayed on the trigger button.

Add this attribute:
Name
fs-copyclip-message
Copy
Value
TEXT_CONTENT
Copy
Example:
fs-copyclip-message = "Copied!"
Add it to any element with
fs-copyclip-element = "click"
script icon
Script tag
?

Active Class

Change the styling of the trigger element upon click
fs-copyclip-activeclass
=
"
CLASS_NAME
"

When clicking on the trigger element defined by fs-copyclip-element = "click", a specified CSS class will be added to the element. This allows to change the look of the element to emphasize the fact it's been clicked.

Add this attribute:
Name
fs-copyclip-activeclass
Copy
Value
CLASS_NAME
Copy
Example:
fs-copyclip-activeclass = "is-active"
Default:
fs-copyclip-activeclass = "is-copyclip-active"
Add it to any element with
fs-copyclip-element = "click"
script icon
Script tag
?

Duration

Set the duration of the success Message option
fs-copyclip-duration
=
"
TIME_IN_MS
"

Use these attributes to adjust the animation timing of the copied message.

Add this attribute:
Name
fs-copyclip-duration
Copy
Value
TIME_IN_MS
Copy
Example:
fs-copyclip-duration = "200"
Default:
fs-copyclip-duration = "500"
Add it to any element with
fs-copyclip-element = "click"
script icon
Script tag
?
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-copyclip-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-copyclip-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-copyclip-instance = "1"
fs-copyclip-instance = "2"
fs-copyclip-instance = "button"
fs-copyclip-instance = "link"
Learn more ways to set up multiple instances and how it works

Still need help?

Get Support