Copy-able code snippets in Webflow

Hi all!

I’d like to know if anyone’s figured out how to create a code cell you can copy & paste from in webflow.

The code would NOT be executable. Rather, we want a user to click a small icon which copies the code into their clipboard.

You can see an example of what we’re looking for in the the docs of this page:

(The box up top).

Have been searching for a while without luck. Any help would be appreciated.

Hey @Justin_Tenuto - try this:

Embed this where you want your code block to appear:

<div class="CodeSnippet">
  <button class="CopyButton"><i class="far fa-copy"></i> Copy Code</button>
  <div class="codeCopied">
    Copied to clipboard!
  <pre class="snippet"><code class="json" >
    const userAction = async () => {
  const response = await fetch('', {
    method: 'POST',
    body: myBody, // string or object
    headers: {
      'Content-Type': 'application/json'
  const myJson = await response.json(); //extract JSON from the http response
  // do something with myJson

Embed this in the sitewide/page level head tag:

<link rel="stylesheet" href="" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
    <link rel="stylesheet"    href="//">
    <script src="//"></script>
    <link rel="stylesheet" href="" integrity="sha512-xYwrX34LRktCfb+3WW0FtJf6qEc2tcJet152No8epFPBoM4qNaaVk5xdfCYI0Ns0H2jD0Isc3VoShSMv6zzpPA==" crossorigin="anonymous" />
            * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      .CodeSnippet {
        max-width: 800px;
        width: 100%;
        margin: 0px auto;
        min-width: 300px;
        position: relative;
      .snippet {
        font-size: 16px;
      .CopyButton {
        position: absolute;
        top: 15px;
        right: 15px;
        background-color: #3e66fc;
        border: none;
        outline: none;
        color: white;
        padding: 9px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-family: monospace;
        font-weight: 500;
        transition: all .2s ease;
      .CopyButton:hover {
        background-color: #3B5CF1;
      .codeCopied {
        background-color: #2D53F5;
        padding: 9px 15px;
        color: white;
        position: absolute;
        right: 15px;
        bottom: -10px;
        font-family: monospace;
        display: inline-block;
        border-radius: 5px;
        transition: all .3s ease;
        opacity: 0;
      .codeCopied-active {
        bottom: 55px;
        opacity: 1;
      .fa-copy {
        pointer-events: none;
        /* width */
        .CodeSnippet ::-webkit-scrollbar {
    width: 8px;
  /* Track */
  .CodeSnippet ::-webkit-scrollbar-track {
    background: #071725;
  .CodeSnippet /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #2D53F5;
  /* Handle on hover */
  .CodeSnippet ::-webkit-scrollbar-thumb:hover {
    background: #3B5CF1;

Finally, embed this in the sitewide/page level body tag:

<script src=""></script>
            new ClipboardJS('.CopyButton', {
          target: function(trigger) {
              return trigger.nextElementSibling.nextElementSibling.firstChild;
      window.addEventListener('click', (e)=>{
              if (window.getSelection) {window.getSelection().removeAllRanges();}
              else if (document.selection) {document.selection.empty();}

Let me know if this gives you any issues!