# Add copy to clipboard for wefblow element

**URL:** <https://community.weweb.io/t/add-copy-to-clipboard-for-wefblow-element/8429>\
**Category:** How do I?\
**Created:** [May 3, 2024, 9:56am UTC](https://community.weweb.io/t/add-copy-to-clipboard-for-wefblow-element/8429 "2024-05-03T09:56:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![VincentImhoff](https://avatars.discourse-cdn.com/v4/letter/v/4af34b/32.png) [@VincentImhoff](https://community.weweb.io/u/VincentImhoff)\
**Post date:** [May 3, 2024, 9:56am UTC](https://community.weweb.io/t/add-copy-to-clipboard-for-wefblow-element/8429/1 "2024-05-03T09:56:17Z")

</div>

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](http://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>

```

---

<div class="post-metadata">

**Author:** ![Doc](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/doc/32/8594_2.png) [@Doc](https://community.weweb.io/u/Doc)\
**Post date:** [May 6, 2024, 7:48am UTC](https://community.weweb.io/t/add-copy-to-clipboard-for-wefblow-element/8429/2 "2024-05-06T07:48:09Z")

</div>

Great question!

I would check out this community post [here](https://community.weweb.io/t/is-it-possible-to-create-a-workflow-to-copy-an-element-from-the-web-and-paste-it-in-other-project/2301) and [here](https://community.weweb.io/t/copy-path-to-clipboard/6603/2) that might help you with your idea.

Please keep me posted if the resources helped you.

Take care!