HTML/CSS Copy to clipboard

Hi everyone, hope Santa’s been really grateful to you this year !

Anyway, I am looking for my Santa who could help me integrating some custom code (maybe JS?)

Problem :

I am making resumes (Curriculum Vitae) for students to help them having another approach to companies, to do that I have made a website with login/signup feature by using memberstack, from now on, I would like my users to click a button to copy (HTML and CSS) from the resume they like and paste it in their webflow account. The trigger will be on a specific button that will do the copy/paste action.

As you can see on the screenshot below, I took the example of Flowbase that is doing it really good so far.

If anyone has a solution and would like to take part to this topic, I would be very glad to get an answer ! :slight_smile:

I am not sharing my read only link because it is not relevant to the case, everything is in the problem description.

Thanks to you all !

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@vincent any idea please? :slight_smile:

Santa brought me the gift of learning Pokemon to teach my kids how to play, so you decide how grateful it was :joy:

Ok, so, what Flowbase do is absolutely neat, allowing you to copy and paste components from their site to your projects.

But I don’t know how it works. I tried, quickly, but didn’t succeed. It is on my list to try again or ask :smiley:

1 Like

I just gave it an extra look. By inspecting what I can copy from Webflow it seems to be some json data. But if I copy them back from the inspector, they are now paired with a bunch of ascii data and Webflow doesn’t recognize the paste from there.

I’ll ask devs around me and be back, let’s figure that out. I found this cool tool on the way : Clipboard Inspector

1 Like

the answer probably is here angular - How to copy a JSON data to the clipboard with the button - Stack Overflow

1 Like

I’m also watching this thread closely - been digging at this for weeks now.

Hi Vincent!

Shame on me… I did not get any notifications from your reply, let me apologize !

I am taking a look at your links and actually, copying a text by using a script is not that complicated, however copying the whole DOM elements is quite tricky at the moment.

I’ll get back on this thread if I get any results in the future :wink:

1 Like

Ok so I have an update that I have not tried yet but it seems to be the good custom code to insert in your project :

<!-- Copy Component for Webflow -->
            document.body.addEventListener('click', documentClick, true)
            document.body.addEventListener('copy', documentCopy, true)

            async function documentClick(e) {
                if ('vf-action')) {
                    if ('vf-action') === 'copy') {

                        let text =
               = 'Copied!'

                        setTimeout(function() {
                   = text
                        }, 1000)

                    } else if ('vf-action') === 'copy-component') {
                        let el =
                        const componentSrc = el.getAttribute('vf-component-src')
                        const response = await fetch(`${componentSrc}/configuration.json`)
                        componentClipboard = await response.json()
                        el.querySelector('span:not(.material-icons)').textContent = "Copied! ⭢ Press Cmd + V in Webflow to Paste"

            function documentCopy(e) {
                //if ('clipboard-button')) {
                if ('vf-action')) {
                    if ('vf-action') === 'copy-component') {
                        e.clipboardData.setData('application/json', JSON.stringify(componentClipboard));
                    } else if ('vf-action') === 'copy') {
1 Like

hi @Flower thanks for init idea snippet. :hugs:

Hey Samuel,

I hope your having a good weekend :call_me_hand:

Whilst browsing the forum I came across this post and recognised the code. :sweat_smile: If you have any questions feel free to reply, I’m happy to help.