How to Create a “Click to Copy” Button

A “click to copy” button will copy any text displayed on the button to the clipboard when clicked. This makes it easy for your visitors to copy information, such as one-time-use coupon codes, offered on your lightboxes.

To add a “click to copy” button to your lightbox form, follow the instructions below.

Part 1: Set up Your Click-to-Copy JavaScript

First, create a lightbox with a button showing a coupon code (or other text you want visitors to copy).

Copy the JavaScript code below, and paste it into a text editor.

function copyToClipboard(elem)
{
    // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) 
    {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else 
    {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) 
        {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try 
    {
        succeed = document.execCommand("copy");
    } catch(e) 
    {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") 
    {
        currentFocus.focus();
    }
    
    if (isInput) 
    {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else 
    {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

var couponElement = document.getElementById('BUTTON_NAME');
var couponText = couponElement.innerText;

 $( "#BUTTON_NAME" ).click(function()
 {
    copyToClipboard(couponElement);
    couponElement.innerText = "Copied";
    setTimeout(function()
    {
        couponElement.innerText = couponText;
    }, 1000);
 });
Now replace the two BUTTON_NAME values with the ID of the button you’re using. You can find a list of all of our button IDs below.

Main Page Buttons

slot 1: button1
slot 2: button2
slot 3: button3
slot 4: button4

Thank You Page Buttons

slot 1: thxbutton1
slot 2: thxbutton2
slot 3: thxbutton3
slot 4: thxbutton4

Extra Page 1 Buttons

slot 1: ep1button1
slot 2: ep1button2
slot 3: ep1button3
slot 4: ep1button4

Extra Page 2 Buttons

slot 1: ep2button1
slot 2: ep2button2
slot 3: ep2button3
slot 4: ep2button4

Extra Page 3 Buttons

slot 1: ep3button1
slot 2: ep3button2
slot 3: ep3button3
slot 4: ep3button4

Extra Page 4 Buttons

slot 1: ep4button1
slot 2: ep4button2
slot 3: ep4button3
slot 4: ep4button4

For example, if you wanted to use the button in slot 1 on your thank you page, the edited section of code with the button IDs filled in would look like this:

var couponElement = document.getElementById('thxbutton1');
var couponText = couponElement.innerText;

 $( "#thxbutton1" ).click(function()
 {

Part 2: Add Your Button’s JavaScript to a Box

In your Digioh account, click your name in the upper-right corner, then select “Custom Javascript (Boxes).”

Digioh custom javascript menu

On the next page, paste your copied JavaScript code into the code area, set the code to fire after display, and enter the ID for the lightbox you’re setting up a “click to copy” button on. You can find your lightbox ID here.

Turn the code on, and save your changes. The end result should look like the screenshot below.

digioh custom javascript editor

Once your Custom JS code is published, your “click to copy” button will be ready to go!

If you’d like help setting up a “click to copy” button, send us an email, and we’ll be glad to help!

Related Reading: