Copy text to clipboard button

Someone mentioned this and thought it’d be a really cool little add on. This code is to add a button to copy text for your customers and can be linked to any field in a details section.

Screenshot 2023-05-10 at 22.00.53

You just need to add the view and field number

Javascript

$(document).on('knack-view-render.view_22', function() {
  var $button = $('<button class="copyText">Copy</button>');
  $('.field_10 .kn-detail-body').prepend($button);
  
  $button.click(function() {
    var $input = $('<input>');
    var copiedText = $('.field_10 .kn-detail-body span').text();
    
    $input.val(copiedText);
    $('body').append($input);
    $input.select();
    
    document.execCommand('copy');
    
    $input.remove();
    $button.html('Copied ✅');
  });
});

CSS

.copyText {
  margin:10px 0px!important;
  background:rgb(33, 136, 214);
  color:white;
  font-weight: bold;
  border-radius:.6em;
  padding:5px 7px;
  border:none!important;
  cursor:pointer;
}

Any questions just leave them below

5 Likes

Brilliant, thank you!

2 Likes

Great! But how I can find these view and field numbers?

Nevermind, I’ve managed to find the numbers. However, the code copies the CSS code and not the text in the field.

@Bruno have you added the correct field number? can you show me your code

1 Like

Thanks John! It works really well.

Can I change the word copy by a icon?