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:
1. name-of-the-copy-code-button
2. class-name-of-the-text-content-you-want-to-copy
3. 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.