Use Javascript to Copy to Clipboard

Hi, I would like to make a button that the user can click and my email address is copied to their clipboard.

How can I integrate this script https://clipboardjs.com/ to make it work?

Read-Only Link: https://preview.webflow.com/preview/cammywlin?preview=7906e543b8f260dd1a51f149bf370559

Published Link: http://cammywlin.webflow.io/

Welcome to the Webflow forum!

Could you please edit Screenshot_2017-08-16_140811 and provide ALL the necessary details in your post so we can take a look at your site/issue?

In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above before someone has to ask.

Hope to hear from you soon. Thanks!

Hi @samliew, I have added the links. Please let me know if there’s more information needed.

I can’t find an example of where this was implemented, but basically, I want the user to click a button and this will copy a specific text into their clipboards.

I have an example on my own site https://samliew.com/nric-generator

The section “Copy text from attribute” is what you need, on top of including the script from a CDN on the page.


Also, feel free to contact me for further code help and/or customization of third-party plugins

Sorry to be a pain, but this is the code I’m trying to add before the tag:

<!-- Copy to Clipboard  -->
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $.getScript('https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js', function() {
    $(".btn").btn({
    <data-clipboard-text="cammywlin@gmail.com">
    });
  });
});
</script>

What am I doing wrong? I have also assigned my ‘div link’ as “btn”.

You cannot put HTML tags this way inside JavaScript. See the developer console for errors.

Add custom attributes to your button using the designer instead.

I have added the custom attributes to my button and modified the code to this:

<!-- Copy to Clipboard  -->
<script src>
var Webflow = Webflow || [];
Webflow.push(function() {
  $.getScript('https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js', function() {
    $(".btn").btn({
    });
  });
});
</script>

It still is not working :frowning_face:

Replace the inner two lines that does nothing to:

new Clipboard('.btn');

Do you mean like below? It is still not working. Thanks for your patience in looking at this.

<!-- Copy to Clipboard  -->
<script src>
var Webflow = Webflow || [];
Webflow.push(function() {
  $.getScript('https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js', function() {
  new Clipboard('.btn');
  });
});
</script>

I think you also cannot have an empty attribute src in your script tag.

Rookie mistake! :roll_eyes:

It works now!!! :raised_hands:t3:

Thank you so so much :star_struck: