Streaming live at 10am (PST)

Use Javascript to Copy to Clipboard


#1

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/


#2

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!


#3

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.


#4

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


#5

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


#6

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.


#7

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:


#8

Replace the inner two lines that does nothing to:

new Clipboard('.btn');

#9

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>

#10

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


#11

Rookie mistake! :roll_eyes:

It works now!!! :raised_hands:t3:

Thank you so so much :star_struck: