Return to Solutions Overview <-

How to have multiple "copy this element" buttons on your Webflow page

This is a sequel to my yesterday's post on "How to create your own Relume Library Ripoff". Please follow these general setup instructions as this is an advanced tutorial to iterate on these principles.

(Still under development as of March 15th 2023)

This is a sequel to my yesterday's post on "How to create your own Relume Library Ripoff".
Please follow these general setup instructions as this is an advanced tutorial to iterate on these principles.

Step 1:

Make sure your project set-up looks something like this

Step 2: (Give relevant elements relevant attributes)

Step 2.0

Add this attribute to the collection list or the collection list wrapper

Name: bmg_copy-this
Value: list

Step 2.1

Add this attribute to the button

Name: bmg_copy-this
Value: button

Step 2.2

Add this attribute to the snippet

Name: bmg_copy-this
Value: snippet

Step 3:

Paste this modified script in place of the script from the previous article:

<script>
// *** "copy this element" buttons code ***

// Define global values
const $_list = $('[bmg_copy-this="list"]')
const $_buttons = $('[bmg_copy-this="button"]')
const $_snippets = $('[bmg_copy-this="snippet"]')

// Define global strings
const s_item = '.w-dyn-item'

// Define global tracking values
var this_button_has_been_clicked = 0


// Main
$_list.find(s_item).each(function(i) {  

  // Set local variables
  var copyButton = $_buttons[i]
  var codeSnippet = JSON.parse( $_snippets[i].textContent )
  
  document.addEventListener("copy", (event) => {
  
    if ( this_button_has_been_clicked !== i ) {
      return // Prevent the code below to fire
    }             
    
    event.clipboardData.setData( "application/json", JSON.stringify(codeSnippet) )     
    event.preventDefault()
    
  })
  
  copyButton.onclick = function () {    
  
    this_button_has_been_clicked = i
    document.execCommand("copy")
    copyButton.innerText = "Copied to clipboard"
    changeButtonText()  
  
  }  
  
  function changeButtonText() {
  
    setTimeout(() => {
      copyButton.innerText = "Copy this element"
    }, 3000)  
  
  }

}) // End of main
</script>

beautiful ✨

Success! 🎉🎉🎉

FAQs

You still have an open question about BMG.studio and how we operate. Chances are good that you will find what you are looking for here:

Why does this FAQ exist?

Well. As of Wednesday, March 15th 2023, I think this component looks really cool.

Can I clone this FAQ component?

Yes. Yes you can. You can do so -> here <-

Still have questions?

It's okay to reach out. Use either email or our calendar tool