Copy & Paste Components

This code is a snippet taken from my custom webflow library, I'm currently working to a v1 release later in 2022.

Learn how to implement this

Component

Copy Element

The following code is the component you want your users to be able to copy. To find get this code you'll need to copy the component you wish to share from within the Webflow designer and then paste it into the clipboard inspector.

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"5d94809b-7508-4634-0475-55106b28a395","tag":"div","classes":["f311f515-b7f6-4143-3f1a-8c87f2cc6f3c"],"children":["e9db499b-be19-15e6-e171-e086bc3e6481"],"type":"Block","data":{"tag":"div","text":false}},{"_id":"e9db499b-be19-15e6-e171-e086bc3e6481","tag":"h2","classes":["2f6f6576-4980-5165-f679-f8082f477189"],"children":["9375ec3c-c239-792e-de67-e81ed54e007f"],"type":"Heading","data":{"tag":"h2"}},{"_id":"9375ec3c-c239-792e-de67-e81ed54e007f","text":true,"v":"Component"}],"styles":[{"_id":"f311f515-b7f6-4143-3f1a-8c87f2cc6f3c","fake":false,"type":"class","name":"component-example","namespace":"","comb":"","styleLess":"display: flex; width: 100%; height: 450px; margin-top: 1rem; margin-bottom: 0.5rem; padding-right: 15px; padding-bottom: 15px; justify-content: center; align-items: center; border-top-style: solid; border-top-width: 15px; border-top-color: hsla(0, 0.00%, 0.00%, 0.00); border-right-style: solid; border-right-width: 15px; border-right-color: hsla(0, 0.00%, 0.00%, 0.00); border-bottom-style: solid; border-bottom-width: 15px; border-bottom-color: hsla(0, 0.00%, 0.00%, 0.00); border-left-style: solid; border-left-width: 15px; border-left-color: hsla(0, 0.00%, 0.00%, 0.00); border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-image: @img_62b58eee8fac367151ac7614; background-position: 50% 50%; background-size: auto; text-align: center;","variants":{},"children":[],"createdBy":"58bae69f8495d36c26de922d","selector":null},{"_id":"2f6f6576-4980-5165-f679-f8082f477189","fake":false,"type":"class","name":"Heading","namespace":"","comb":"","styleLess":"background-color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 7.5rem; line-height: 110%; background-clip: text;","variants":{},"children":[],"createdBy":"58bae69f8495d36c26de922d","selector":null}],"assets":[{"cdnUrl":"https://assets.website-files.com/62b570707eb0e3ec82025758/62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash.jpg","siteId":"62b570707eb0e3ec82025758","width":1500,"isHD":false,"height":2250,"fileName":"62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash.jpg","createdOn":"2022-06-24T10:16:14.669Z","origFileName":"pawel-czerwinski-ruJm3dBXCqw-unsplash.jpg","fileHash":"1c11a710646f70aa619b6226649b9ff9","variants":[{"_id":"62b58ef250a0c9a7686f10c7","origFileName":"pawel-czerwinski-ruJm3dBXCqw-unsplash-p-500.jpeg","fileName":"62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-500.jpeg","format":"jpeg","size":52550,"width":500,"quality":100,"s3Url":"https://s3.amazonaws.com/webflow-prod-assets/62b570707eb0e3ec82025758/62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-500.jpeg","cdnUrl":"https://assets.website-files.com/62b570707eb0e3ec82025758/62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-500.jpeg"},{"_id":"62b58ef250a0c90bad6f10c8","origFileName":"pawel-czerwinski-ruJm3dBXCqw-unsplash-p-800.jpeg","fileName":"62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-800.jpeg","format":"jpeg","size":109923,"width":800,"quality":100,"s3Url":"https://s3.amazonaws.com/webflow-prod-assets/62b570707eb0e3ec82025758/62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-800.jpeg","cdnUrl":"https://assets.website-files.com/62b570707eb0e3ec82025758/62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-800.jpeg"},{"_id":"62b58ef250a0c9f7eb6f10c9","origFileName":"pawel-czerwinski-ruJm3dBXCqw-unsplash-p-1080.jpeg","fileName":"62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-1080.jpeg","format":"jpeg","size":175944,"width":1080,"quality":100,"s3Url":"https://s3.amazonaws.com/webflow-prod-assets/62b570707eb0e3ec82025758/62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-1080.jpeg","cdnUrl":"https://assets.website-files.com/62b570707eb0e3ec82025758/62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-1080.jpeg"}],"mimeType":"image/jpeg","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/62b570707eb0e3ec82025758/62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash.jpg","thumbUrl":"https://assets.website-files.com/62b570707eb0e3ec82025758/62b58eee8fac367151ac7614_pawel-czerwinski-ruJm3dBXCqw-unsplash-p-130x130q80.jpeg","_id":"62b58eee8fac367151ac7614","updatedOn":"2022-06-24T10:16:19.003Z","fileSize":359101}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

How To

To replicate this functionality you'll need to copy the code from the body of this page and apply the following two Custom Attributes to elements on your page.

The first attribute will need to be applied to the button you'd like to trigger the copying, this custom attribute is;

[does="copy-component-button"]

The second attribute will tell the script what content to copy, in this case the content we're trying to copy is the code generated by webflow for each component, in this example the block of code above is that content, you'll be able to see it has the following attribute;

[does="component"]

It is recommended to set the display of this code block to none in production. To get the components code for copying you'll need to copy the component you'd like to share in the webflow designer and then paste it into the clipboard inspector

For this script to work both of these attributes have to be on elements with the same direct parent, the script supports multiple instances on the same page, however they can not share the same direct parent.

Notes

This is a guide based on Vimalan's guide, I've customised the code to fit my library and altered it for multiple instances on the same page. You can see his video guide here.