Add a “Copy” Button to All Squarespace Code Blocks

Want to make it easy for visitors to copy your code snippets on Squarespace? With just a small tweak, you can add a tiny “Copy” button to the top-right corner of every code block on your site. Here’s how.

Step 1: Add the CSS

Go to Design → Custom CSS in Squarespace and paste this:

/* Style for the copy button */
.sqs-copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
  padding: 2px 5px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #f0f0f0;
  z-index: 10;
}

/* Ensure code block container is positioned relatively so absolute button works */
.sqs-block-code {
  position: relative;
}

Step 2: Add the JavaScript

Add a Code Block or use Settings → Advanced → Code Injection → Footer and paste:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const codeBlocks = document.querySelectorAll('.sqs-block-code');

  codeBlocks.forEach(block => {
    if (!block.querySelector('.sqs-copy-button')) {
      const button = document.createElement('button');
      button.className = 'sqs-copy-button';
      button.textContent = 'Copy';
      block.appendChild(button);

      button.addEventListener('click', () => {
        const codeElement = block.querySelector('pre') || block;
        const codeText = codeElement.textContent;

        navigator.clipboard.writeText(codeText).then(() => {
          button.textContent = 'Copied!';
          setTimeout(() => (button.textContent = 'Copy'), 1500);
        });
      });
    }
  });
});
</script>

Step 3: Save and Test

Refresh your site and hover over any code block. The small “Copy” button should appear in the top-right corner. Click it to copy the code instantly.

To ensure the code is showing in the block, remember to make sure the “Display Source Code’ toggle is turned on.

Pro Tip: This works for all .sqs-block-code blocks, so you don’t have to modify individual blocks.

---

Check out our library of code snippets and site enhancements.

---

---