How to add copy/paste functionality to your Webflow blog

How to Add a Copy Button to Code Blocks on Your Blog

When I decided to create a blog on my own Webflow site, the first post I created was about JavaScript and so I wanted to make sure that it would be easy for visitors to grab the code snippet. I see myself creating many more JavaScript-related posts in the future, so this functionality is going to come in handy. In order to do this, I used… you guessed it! Some JavaScript.

This is a useful bit of code and I want to share it in this post. Which is funny… since I’m going to also be utilizing the Copy functionality to give you the code to use to create Copy functionality!

Step 1: Set up the <code> tags in your HTML

We’ll get to the JavaScript portion next, but essentially what it’s going to do is inject a ‘copy’ button element before any <code> elements on your page. So for any code that you want to be copyable, you’ll wrap it with the HTML <code> tags. With Webflow, the easiest way to do this is with an embed element (whether inside a rich text element or a standalone embed element). Learn more about the Webflow embed element here. The code you add inside the embed element will look something like this:

<code> THE CODE YOU WANT TO BE COPIED WILL GO HERE </code> 

Step 2: Give some style to your copy buttons

You'll also notice in the JavaScript, that a class called "copy-button" is going to be given to these buttons. If you don't want to write custom CSS for this, you can simply add a button element to the page in Webflow and give it a class of "copy-button". Style as you would any other Webflow element and then remove it from the page (best to add this button on your style guide page so the class is not accidentally deleted).

Step 3: Add the JavaScript to your page settings

Add this code before the closing body tag in your page’s settings and publish your site. I added comments throughout to explain what each part is doing.

You should now see that any <code> elements have the copy button. Test it out and see if you’re able to successfully copy the code!

Pro tip: I’m also using a code-highlighting script from Finsweet to create the syntax highlighting.

<script> 
  // Get all the code blocks on the page
  const codeBlocks = document.querySelectorAll("code");

  // Loop through each code block
  codeBlocks.forEach((codeBlock) => {
    // Create a button to copy the code
    const copyButton = document.createElement("button");
    copyButton.innerHTML = "Copy Code";
    copyButton.classList.add("copy-button");

    // Add the copy button to the code block
    codeBlock.parentNode.insertBefore(copyButton, codeBlock);

    // Add an event listener to the copy button
    copyButton.addEventListener("click", () => {
      // Create a temporary textarea element to copy the code
      const textarea = document.createElement("textarea");
      textarea.value = codeBlock.textContent;

      // Add the textarea to the page
      document.body.appendChild(textarea);

      // Select the text in the textarea
      textarea.select();

      // Copy the text to the clipboard
      document.execCommand("copy");

      // Remove the textarea from the page
      document.body.removeChild(textarea);

      // Change the button text to "Copied" temporarily
      copyButton.innerHTML = "Copied!";
      setTimeout(() => {
        copyButton.innerHTML = "Copy Code";
      }, 1000);
    });
  });
</script> 

I'm an expert in Webflow and have worked with founders and marketing teams all over the world to build and support marketing websites. Get in touch if you're interested in working together!