Copy to Clipboard

This will solve a constant need for users to copy some information to clipboard.

Loads
CDN ScriptDocumentationExample

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

<!-- [Webflow Trickery by CodeRaccoons]  -->
<script async src= "https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebflowTrickery@1.0.0/Dist/Functional/CopyToClipboard.min.js" ></script>
Copy Script

Required attributes

I want the contents on of this element to be copied
Attribute to add
Name
wt-copycb-element
Value
target
Instructions

Add this to the element that has the text that you want to get copied, please note that this functionality will only copy the text that is within this element.

How does it look?
Optional
I want this element to show a message when triggering copy to clipboard
Attribute to add
Name
wt-copycb-element
Value
textTarget
Instructions

When using the Copy to Clipboard functionality you can select an element to show a message, add this attribute to the text that you want to display this text change

How does it look?
I want this element to trigger the copy to clipboard functionality.
Attribute to add
Name
wt-copycb-element
Value
trigger
Instructions

This does not have a default functionality, it should be set along with a target attribute to work.

How does it look?
Optional
I want this text to be shown when the trigger attribute is pressed.
Attribute to add
Name
wt-copycb-message
Value
Copied!
Instructions

Replaces the message to show the element got copied to clipboard,

How does it look?
Optional
I want this class to be toggled on and off when the trigger gets clicked.
Attribute to add
Name
wt-copycb-active
Value
classname
Instructions

Add a class to change the style of the trigger element when the content is copied.

How does it look?

Optional Attributes

I want the contents on of this element to be copied
Attribute to add
Name
wt-copycb-element
Value
target
Instructions

Add this to the element that has the text that you want to get copied, please note that this functionality will only copy the text that is within this element.

How does it look?
Optional
I want this element to show a message when triggering copy to clipboard
Attribute to add
Name
wt-copycb-element
Value
textTarget
Instructions

When using the Copy to Clipboard functionality you can select an element to show a message, add this attribute to the text that you want to display this text change

How does it look?
I want this element to trigger the copy to clipboard functionality.
Attribute to add
Name
wt-copycb-element
Value
trigger
Instructions

This does not have a default functionality, it should be set along with a target attribute to work.

How does it look?
Optional
I want this text to be shown when the trigger attribute is pressed.
Attribute to add
Name
wt-copycb-message
Value
Copied!
Instructions

Replaces the message to show the element got copied to clipboard,

How does it look?
Optional
I want this class to be toggled on and off when the trigger gets clicked.
Attribute to add
Name
wt-copycb-active
Value
classname
Instructions

Add a class to change the style of the trigger element when the content is copied.

How does it look?

Working examples

Need more?

Do you need multiple instances of this Attribute?

All of our attributes follow the same structure for multiple instances!

In order to use multiple instances on an attribute add -n at the end of the value of the element attribute. being "n" a unique number.

This unique number is how we can tell between multiple instances.

For example, container-2, trigger-2, and target-2 will all be connected to the same instance.

This is what you need to add multiple instances of this:

First attribute instance
No items found.
Second instance
No items found.
Third instance
No items found.