How to Create a Copy Code Button in Webflow
Manual copy-paste? That’s so 2010. Here’s how to add a slick Copy Code button that your users (and your sanity) will thank you for.
Javascript
Copy Code
<script>
document.addEventListener("DOMContentLoaded", function () {
const copyButton = document.querySelector('.name-of-the-copy-code-button-div');
const copyBodyText = document.querySelector('.class-name-of-the-text-content-you-want-to-copy');
const copyText = copyButton.querySelector('.the-class-name-of-the-text-within-copy-button');
if (copyButton && copyBodyText) {
copyButton.addEventListener('click', (event) => {
event.preventDefault(); // Prevents Webflow from navigating
// Copy the content from the provided text
const tempElement = document.createElement('textarea');
tempElement.value = codeRichText.innerText.trim(); // Gets text content
document.body.appendChild(tempElement);
tempElement.select();
document.execCommand('copy');
document.body.removeChild(tempElement);
// Smoothly transition text
copyText.style.opacity = '0'; // Fade out
setTimeout(() => {
copyText.innerText = 'Copied!';
copyText.style.opacity = '1'; // Fade in
}, 200);
// Revert back after timeout
setTimeout(() => {
copyText.style.opacity = '0'; // Fade out
setTimeout(() => {
copyText.innerText = 'Copy Code';
copyText.style.opacity = '1'; // Fade in
}, 200);
}, 2000);
});
}
});
</script>Why this tiny button packs a big punch
Adding a Copy Code button isn’t just a nice-to-have. It’s a user experience glow-up. Here’s why it’s worth the few extra minutes:
- Saves time. No need to drag, highlight, and pray they copied the whole thing.
- Feels seamless. One click. Boom. Copied.
- Looks polished. Interactive elements show your site means business.
- Keeps users engaged. They stick around longer when your site’s easy to use.
This button might be small, but it makes your site feel 10x more professional.
How to set it up in Webflow
How to get the functionality working on your button?
- First of all you need the class names of 3 things, the div/button class name of the copy-code button, the class-name of the text within the copy-code-button, and the class-name of the content you want to copy.
- After you have collected the 3 needed class names, copy the code above and paste it in your webflow page settings in the body code.
- You then want to replace class-names for each relevant places in the code:
- name-of-the-copy-code-button
- class-name-of-the-text-content-you-want-to-copy
- the-class-name-of-the-text-within-copy-button
- Save. Publish. Done 🎯
Now you've got a clean, functional Copy Code button that makes your site smarter, smoother, and slicker. And hey, no more Ctrl+C chaos.
