ZeroClipboard Starter Snippet - JSFiddle

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//rawgit.com/JamesMGreene/sandblaster/master/dist/sandblaster.min.js"></script>
<script src="//rawgit.com/zeroclipboard/zeroclipboard/master/dist/ZeroClipboard.min.js"></script>
<div id="warning"></div>

<button
  class="clipboard fa fa-copy"
  data-clipboard-text="Copied Button 1 Text"
  title="Copy button 1 text"></button>

<button
  class="clipboard fa fa-copy"
  data-clipboard-text="Copied Button 2 Text"
  title="Copy button 2 text"></button>

<div id="zcState">
    <h3>ZeroClipboard state: <button
  class="zc-state-updater fa fa-refresh"
  title="Refresh state"></button></h3>
    <pre></pre>
</div>

<div>
    <h3>Logs:</h3>
    <ul id="logger"></ul>
</div>

CSS

button.clipboard {
    padding: 3px;
}

/* FF button fix */
button.clipboard::-moz-focus-inner {
    margin: 1px -5px;
}

#zcState pre {
    width: 98%;
    height: 100px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: lightgray;
    border: 1px solid darkgray;
    padding: 2px;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

JavaScript

//
// Utility code
//
function showActive(el) {
    var $el = $(el);
    $el.fadeOut(10, function() { $el.fadeIn(90); });
}

var $logger = $("#logger");
function log(msg) {
    $logger.prepend("<li>" + msg + "</li>");
}


//
// Forcibly remove the JSFiddle iframe sandboxing with Sandblaster.js
// https://github.com/JamesMGreene/sandblaster
//
var result = sandblaster.detect();
if (result.framed && result.crossOrigin !== false && result.sandboxed !== false) {
    $("#warning").html('<p><strong>IMPORTANT:</strong> This JSFiddle can only work correctly if visiting the result view in the top frame!</p><p>Paste this URL into your browser\'s address bar: <a href="' + window.location.href + '">' + window.location.href + '</a></p>').after("<hr />");
}
else if (result.sandboxed && sandblaster.unsandbox()) {
    sandblaster.reload();
}

//
// Begin ZeroClipboard stuff
//
ZeroClipboard.config({
    forceHandCursor: true
});

var client = new ZeroClipboard($("button[data-clipboard-text]"));

client.on("error", function(e) {
    log("ERROR! [" + e.name + "] " + e.message);
});

client.on("ready", function(e) {
    log("Ready!");

    client.on("aftercopy", function(e) {
        log((e.success["text/plain"] ? "Copied" : "FAILED to copy") + ": " + e.data["text/plain"]);
        showActive(e.target);
    });
});

$(".zc-state-updater").on("click", function() {
  $("#zcState pre").text(JSON.stringify(ZeroClipboard.state(), null, 2));
});
$("#zcState pre").text(JSON.stringify(ZeroClipboard.state(), null, 2));