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

Instructions

Make sure you have the VisualDX script in your <head>. Checkout the Quick Start for how to do this.

Add vdx-copy-button as an attribute name of the button you wish to use as the trigger for the copy action

Add vdx-copy-this as an attribute name of the element you wish to copy

Add vdx-copy-alert as an attribute name of the element you wish to display as the "Copied" alert

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

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"

Publish your site to staging and test out both the styles and the behaviour.

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

vdx-copy-button

Copied!

vdx-copy-this

Copied!

vdx-copy-alert

Copied!

Copied

Webflow Blue

#146ef5

McDonalds Yellow

#ffbc0d

Copied

UPS Brown

#644117