How to Copy Text to the Clipboard in Webflow

Learn how to add a “Copy” button in Webflow to copy text to the clipboard with the Clipboard API.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add a “Copy” button to copy text to the clipboard from Webflow.

Example

Click to copy

https://gemeos.wf/academie/copy-to-clipboard-webflow

ID / Class	Element	Role
copy-text	Text Block or Div	Content to copy
copy-btn	Link Block or Button	Trigger button
copy-feedback	Text Block	Confirmation message

1. Create the elements in Webflow

Create a Text Block with the ID copy-text containing the text to copy. Add a button with the ID copy-btn. Optional: add a Text Block with the ID copy-feedback showing “Copied!” with display set to none by default.

2. Add this script in the <body>

document.getElementById('copy-btn').addEventListener('click', function() {
  const text = document.getElementById('copy-text').textContent;
  navigator.clipboard.writeText(text).then(function() {
    const feedback = document.getElementById('copy-feedback');
    if (feedback) {
      feedback.style.display = 'block';
      setTimeout(function() { feedback.style.display = 'none'; }, 2000);
    }
  });
});

3. Publish and test

Click the button: the text is copied and the “Copied!” message appears for 2 seconds. If you want to copy an input field, replace .textContent with .value.

good to know

The navigator.clipboard.writeText() API requires HTTPS to work. In Webflow preview (on webflow.io), it works. On a custom domain, make sure your SSL certificate is active. On older browsers without Clipboard API support, use document.execCommand('copy') as a fallback.

Conclusion

The copy button improves UX for technical content. Use cases:

Copy a promo code on a landing page
Copy a code snippet in a tutorial
Copy a referral link

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss