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://gemeosagency.com/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

How to Copy Text to the Clipboard in Webflow

Example

1. Create the elements in Webflow

2. Add this script in the <body>

3. Publish and test

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

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials