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