# Make a "copy to clipboard" button on Sitejet

**URL:** <https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182>\
**Category:** Website Builder\
**Tags:** cms\_element\
**Created:** [April 27, 2024, 3:59am UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182 "2024-04-27T03:59:06Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Billmounten76\_DaMan](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@Billmounten76\_DaMan](https://community.sitejet.io/u/Billmounten76_DaMan)\
**Post date:** [April 27, 2024, 3:59am UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/1 "2024-04-27T03:59:06Z")

</div>

Im a newbie and cant find any instruction on how to add a copy to clipboard button on sitejet. There are tutorials on elementor and wordpress but nothing seems to work. Thank you in advance. Please explain like im a 5 year old. Chees

---

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [April 27, 2024, 5:41pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/2 "2024-04-27T17:41:17Z")

</div>

Hi @Billmounten76_DaMan 👋

Welcome to this awesome community! 🕺

Here is a simple solution:

> [How To Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)

💡 I’m using Sitejet in cPanel, so I’m not sure if this works on [sitejet.io](http://sitejet.io). 🤷‍♂️  
If you’re also using cPanel, I can guide you further on how to do this.

Regards  
Richard

---

<div class="post-metadata">

**Author:** ![Billmounten76\_DaMan](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@Billmounten76\_DaMan](https://community.sitejet.io/u/Billmounten76_DaMan)\
**Post date:** [April 27, 2024, 5:59pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/3 "2024-04-27T17:59:08Z")

</div>

Thank you so very much. My experience with HTML and Javascript is very limited.  
Do I ad the code into the element or to the page in general at the lower right? If answer is to the page, how do I integrate the javascript into the current javascript already showing up?  
Thanks again for taking the time to explain to a complete newbie. I’m actually done with my first site. This is the last step. I learned a lot! Cheers!

---

<div class="post-metadata">

**Author:** ![Billmounten76\_DaMan](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@Billmounten76\_DaMan](https://community.sitejet.io/u/Billmounten76_DaMan)\
**Post date:** [April 27, 2024, 6:00pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/4 "2024-04-27T18:00:05Z")

</div>

and yes I am using sitejet for cpanel

---

<div class="post-metadata">

**Author:** ![Billmounten76\_DaMan](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@Billmounten76\_DaMan](https://community.sitejet.io/u/Billmounten76_DaMan)\
**Post date:** [April 28, 2024, 12:20pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/5 "2024-04-28T12:20:46Z")

</div>

One of the problem I’m encountering is that all the tutorials say “just add the code” and I don’t know how to add the code. I’ve tried adding it and it doesn’t work. Any specific assistance would be greatly appreciated. Please explain like I’m a 5 year old. Thank you!

---

<div class="post-metadata">

**Author:** ![Billmounten76\_DaMan](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@Billmounten76\_DaMan](https://community.sitejet.io/u/Billmounten76_DaMan)\
**Post date:** [April 28, 2024, 12:46pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/6 "2024-04-28T12:46:32Z")

</div>

well I just learned that the website needs to be published for the code to take effect so I might be making progress

---

<div class="post-metadata">

**Author:** ![Billmounten76\_DaMan](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@Billmounten76\_DaMan](https://community.sitejet.io/u/Billmounten76_DaMan)\
**Post date:** [April 28, 2024, 1:10pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/7 "2024-04-28T13:10:41Z")

</div>

im using this code and it works:

```auto
<p id="myText">Hello World</p>
<button class="btn" onclick="copyContent()">Copy!</button>

<script>
  let text = document.getElementById('myText').innerHTML;
  const copyContent = async () => {
    try {
      await navigator.clipboard.writeText(text);
      console.log('Content copied to clipboard');
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  }
</script>

```

but I cant figure out how to link the text I want to copy to this code. when i replace 'my text, with the element ID from the text box i want to copy it stops working. Thank you.

---

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [April 28, 2024, 2:18pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/8 "2024-04-28T14:18:51Z")

</div>

Hi Bill!  
No worries, I’m also a 5y old… 🤣

1. This link I posted first is only valid for single-line text, not paragraphs:

> [@Richard\_Honey](#):
>
> How To Copy to Clipboard

1. The method you found (good job!) will not work if you change the link from “myText” to something else. A workaround would be to replace “Hello World” with all the text that you want to be copied. Keep in mind that by doing that, the text will also be displayed in that specific paragraph (`<p>`) section. Also note that the method you found does not produce an alert (return message) that notifies the user that the text is successfully copied.

Apart from that, we’ll need the professionals (André/Martin/etc) to show us how to style this correctly.  
🕶

---

<div class="post-metadata">

**Author:** ![Billmounten76\_DaMan](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@Billmounten76\_DaMan](https://community.sitejet.io/u/Billmounten76_DaMan)\
**Post date:** [April 28, 2024, 3:34pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/9 "2024-04-28T15:34:30Z")

</div>

Thanks. I’m using your workaround for now because I have a deadline but if I have more than one text to copy its reverting back to the text I entered in the first code. I placed the button in more than one location on the site but it will only copy the text from the first button. Any quick fixes? Thank you very much for helping on a Sunday. I really do appreciate it .

---

<div class="post-metadata">

**Author:** ![Billmounten76\_DaMan](https://avatars.discourse-cdn.com/v4/letter/b/b5ac83/32.png) [@Billmounten76\_DaMan](https://community.sitejet.io/u/Billmounten76_DaMan)\
**Post date:** [April 28, 2024, 4:00pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/10 "2024-04-28T16:00:57Z")

</div>

I figured it out. I changed the name of the const in the code attached to each button. So it’s working for now although with a MacGyver special. If you or anyone else could explain how to link text from a different element to my button code I would really appreciate it. Thanks again!

---

<div class="post-metadata">

**Author:** ![Richard\_Honey](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/richard_honey/32/2905_2.png) [@Richard\_Honey](https://community.sitejet.io/u/Richard_Honey)\
**Post date:** [April 28, 2024, 5:02pm UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/11 "2024-04-28T17:02:34Z")

</div>

Correct!  
Each instance should have its own unique id.

As for the linking to other elements - yeah, let’s leave that for the pros - I also tried to figure it out, but it clashes with the elements’ default css under the hood. Tricky to override.  
You’re welcome.  
Enjoy your week!

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [September 5, 2024, 8:39am UTC](https://community.sitejet.io/t/make-a-copy-to-clipboard-button-on-sitejet/3182/12 "2024-09-05T08:39:17Z")

</div>