How to Copy Text to the Clipboard in Webflow

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

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.

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