Make a "copy to clipboard" button on Sitejet

Helpdesk Website Builder
1

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

2

Hi @Billmounten76_DaMan :wave:

Welcome to this awesome community! :man_dancing:

Here is a simple solution:

How To Copy to Clipboard

:bulb: I’m using Sitejet in cPanel, so I’m not sure if this works on sitejet.io. :man_shrugging:
If you’re also using cPanel, I can guide you further on how to do this.

Regards
Richard

3

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!

4

and yes I am using sitejet for cpanel

5

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!

6

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

1 Like
7

im using this code and it works:

<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.

8

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

  1. This link I posted first is only valid for single-line text, not paragraphs:
  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.
:sunglasses:

1 Like
9

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 .

10

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!

11

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!