HTML/CSS Copy to clipboard

Design help Custom code
1

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 !

Capture d’écran 2021-12-27 à 11.49.15
Capture d’écran 2021-12-27 à 11.49.152492×1328 208 KB

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

2

@vincent any idea please? :slight_smile:

3

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
4

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
5

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

1 Like
6

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

7

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
8

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 -->
        <script>
            document.body.addEventListener('click', documentClick, true)
            document.body.addEventListener('copy', documentCopy, true)

            async function documentClick(e) {
                if (e.target.parentNode.hasAttribute('vf-action')) {
                    if (e.target.parentNode.getAttribute('vf-action') === 'copy') {
                        document.execCommand('copy')

                        let text = e.target.textContent
                        e.target.textContent = 'Copied!'

                        setTimeout(function() {
                            e.target.textContent = text
                        }, 1000)

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

            function documentCopy(e) {
                //if (e.target.parentNode.classList.contains('clipboard-button')) {
                if (e.target.parentNode.hasAttribute('vf-action')) {
                    if (e.target.parentNode.getAttribute('vf-action') === 'copy-component') {
                        e.clipboardData.setData('application/json', JSON.stringify(componentClipboard));
                    } else if (e.target.parentNode.getAttribute('vf-action') === 'copy') {
                        e.clipboardData.setData('text/plain', e.target.textContent);
                    }
                    e.preventDefault()
                }
            }
        </script>```
1 Like
9

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

10

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.