How to create your own Relume Library ripoff

Well... as a short personal disclaimer: I have nothing against the fantastic work the Relume team is doing. It's just about the ideal purpose of why we all love no-code tools in and of themselves: To expand access to sophisticated and useful technology so that software developers aren't the only ones benefiting from the wonderful wonders of the Internet.

Relume Library Ripoff
Leon Barth
CEO at BMG.studio

(This is an old solution from https://leon-barth.com/ originally published by Leon Barth on September 11, 2022 at 1:24 pm. Since then, Webflow has made major changes to its internal clipboard data system & BMG has created a revised version of the technique below for its https://bmg.studio/form/library project. Feel free to connect with us on social media to get a better insight into how this technique currently works)

---

Well... as a short personal disclaimer: I have nothing against the fantastic work the Relume team is doing.

It's just about the ideal purpose of why we all love no-code tools in and of themselves: To expand access to sophisticated and useful technology so that software developers aren't the only ones benefiting from the wonderful wonders of the Internet.

Here is the article explaining the groundbreaking findings I made.

Getting started

Step 1: (Dynamic setup)

Create a new collection

With collection fields like these

And build a setup that looks a bit like the one pictured above. (I invite you to get creative once you understand the structure).

Step 2: (Static setup)

Create a folder to store these potential 100s of static elements

Create your first static element. For this tutorial I'm going to do them 1 element per page. It should potentially be possible to have only one page with multiple elements.

Don't forget to turn off indexing! (Remove content from Google's index)

Paste the code: <meta name="robots" content="noindex">

Step 3:

Build your 1st element

Step 4:

Go to preview

And make a proper screenshot of your creation

Step 5:

Copy (Ctrl/Cmd C) your element

Step 6:

Go to the "Clipboard Inspector"

And paste (Ctrl/Cmd V) your element

Step 7:

Select the entire JSON text and press copy

Step 8:

Create your new CMS entry and paste in your JSON text snippet

Step 9: (Prepare dynamic pages)

Your dynamic template should by now look something like the image above

Step 9.1:

Your copy button should have the ID of: copy-button

Step 9.2:

And the text block/ paragraph where your JSON snippet goes should have a class of: snippet

And set it to display none!

Step 10:

Copy this snippet:

<script>
let copyButton = document.getElementById("copy-button")
let dataconst codeSnippet = JSON.parse(document.querySelector(".snippet").textContent)

document.addEventListener("copy", (event) => {

  event.clipboardData.setData( "application/json", JSON.stringify(codeSnippet) )
  event.preventDefault()
  
})

copyButton.onclick = function () {

  document.execCommand("copy")
  copyButton.innerText = "Copied to clipboard"
  changeButtonText()
  
}

function changeButtonText() {

  setTimeout(() => {
    copyButton.innerText = "Copy this element"  
  }, 3000)
  
}
</script>

And paste it into your code embed of choice

Step 11: (Have fun!)

Copy something to your clipboard

And paste it within your projects!

Success! 🎉🎉🎉

A special thank you goes to the FinSweet Pro Group for having a special conglomeration of talent, Jean-Philippe Trinh for giving me direction & Vimalan Vijay for his incredibly useful loom video.

I hope this will be very useful for all creators.

I personally come from a marketing background and have always loved Clickfunnels. Since Clickfunnels technology is very outdated but their sales concepts are evergreen, I am now able to create a copy and paste library for Funnel users who are not very technical.

I look forward to seeing what you come up with.
You can send me your ideas at email@leon-barth.com.

You want to use these concepts for multiple "copy this element" buttons on your page?

Then check out this article --> leon-barth.com/solution/multiple-copy-this-element-buttons-on-your-webflow-page

Share Article

Experience the BMG.studio Advantage

Ready to elevate your web projects to new heights? Partner with BMG.studio and unlock a world of possibilities. Our team of full-stack engineers....