Utilities

Copy to Clipboard

Easily Copy Text, Links, or Emails with a Button Click Using `vdx-copy-button` and `vdx-copy-this` Attributes. Zero code 100% Javacript solutions

Add Slider Attribute

Firstly, make sure you have the VisualDX script before your </body>. Checkout the Quick Start for how to do this.

Add Copy Attribute to Button

Copy this attribute:

vdx-copy-button

Paste vdx-copy-button into the Custom Attribute Name of the Button you wish to use as the trigger for the copy action and give it a unique Value. eg. copy-text

Body
Button
Text Block
Text Block
Button
Style
Settings
Interactions
Link
Custom Attributes
Name
vdx-copy-button
Value
copy-text

Add Copy This Attribute to Text Block

Copy this attribute:

vdx-copy-this

Paste vdx-copy-this into the Custom Attribute Name of the Text Block element you wish to copy and give it the same unique Value as the Button eg. copy-text

Body
Button
Text Block
Text Block
Text Block
Style
Settings
Interactions
Link
Custom Attributes
Name
vdx-copy-this
Value
copy-text

Add Copy Alert Attribute to Text Block

Copy this attribute:

vdx-copy-alert

Paste vdx-copy-alert into the Custom Attribute Name of the Text Block element you wish to copy and give it the same unique Value as the Button eg. copy-text

Body
Button
Text Block
Text Block
Text Block
Style
Settings
Interactions
Link
Custom Attributes
Name
vdx-copy-alert
Value
copy-text

If there are multiple instances on the same page, simply give each attribute the same value

** To copy page URL use the social share solution here

For example:

  • vdx-copy-button = "title" and vdx-copy-this = "title" and vdx-copy-alert = "title"
  • vdx-copy-button = "subtitle" and vdx-copy-this = "subtitle" and vdx-copy-alert = "subtitle"
  • vdx-copy-button = "webflow-blue" and vdx-copy-this = "webflow-blue" and vdx-copy-alert = "webflow-blue"

A few examples of Copy to Clipboard in action

Copied
Webflow Blue
#146ef5
McDonalds Yellow
#ffbc0d
Copied
UPS Brown
#644117
00:00
Buy Me a Beer