cammywlin
(Cammy Lin)
October 22, 2017, 6:59am
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/
samliew
(webflowexpert.com)
October 22, 2017, 7:50am
2
Welcome to the Webflow forum!
Could you please edit 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!
cammywlin
(Cammy Lin)
October 22, 2017, 8:40am
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.
samliew
(webflowexpert.com)
October 22, 2017, 9:56am
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
cammywlin
(Cammy Lin)
October 22, 2017, 10:03pm
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”.
samliew
(webflowexpert.com)
October 22, 2017, 10:07pm
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.
cammywlin
(Cammy Lin)
October 22, 2017, 10:13pm
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
samliew
(webflowexpert.com)
October 22, 2017, 10:15pm
8
Replace the inner two lines that does nothing to:
new Clipboard('.btn');
cammywlin
(Cammy Lin)
October 22, 2017, 10:20pm
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>
samliew
(webflowexpert.com)
October 22, 2017, 10:22pm
10
I think you also cannot have an empty attribute src
in your script tag.