Hello, I’m creating a saas related to webflow and the storage of customer reviews.
I would like to create a review component gallery for webflow.
For that I need to create a copy to clipboard with the json of the component. I’ve created a code that works on a webflow site or in my vs with live server but nothing works on weweb. Whether in the body of the page, in an html element or directly in a workflow in a button.
Here’s an example of the code I tested on the page in an html element
Translated with DeepL.com (free version)
//
button class=“object-clone-btn”>Copier les données
<script>
const wfO = {
type: "@webflow/XscpData",
payload: {
nodes: [
{
_id: "6b18f88e-2216-e967-4525-58ab9eb19361",
type: "Paragraph",
tag: "p",
classes: [],
children: ["6b18f88e-2216-e967-4525-58ab9eb19362"],
data: {
devlink: { runtimeProps: {}, slot: "" },
displayName: "",
attr: { id: "" },
xattr: [],
search: { exclude: false },
visibility: { conditions: [] },
},
},
{
_id: "6b18f88e-2216-e967-4525-58ab9eb19362",
text: true,
v: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
},
],
styles: [],
assets: [],
ix1: [],
ix2: { interactions: [], events: [], actionLists: [] },
},
meta: {
unlinkedSymbolCount: 0,
droppedLinks: 0,
dynBindRemovedCount: 0,
dynListBindRemovedCount: 0,
paginationRemovedCount: 0,
universalBindingsRemovedCount: 0,
},
};
document.addEventListener(
"copy",
(event) => {
let data = JSON.stringify(wfO);
console.log("Object copied");
console.log(data);
if (event.clipboardData) {
event.clipboardData.setData("application/json", data);
} else if (window.clipboardData) {
window.clipboardData.setData("application/json", data);
}
event.preventDefault(); // Empêcher l'action par défaut pour toutes les copies
},
true
);
document.querySelectorAll(".object-clone-btn").forEach((item) => {
item.addEventListener("click", (event) => {
event.preventDefault();
console.log("Button clicked");
document.execCommand("copy");
});
});
</script>