Categories
JavaScript

JavaScript for optimizers #12: Copy to clipboard button

Losing your coupon code sucks. A copy to the clipboard button would have saved me the hassle of convincing the customer service that I received one.

Our hypothetical case for this chapter is about adding a copy to a clipboard button for users that get a coupon code offered on a webpage.

Business case: Copy to clipboard button

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that users call customer service because they lost their coupon code, we expect that adding a copy to clipboard button will cause an decrease in complaints.”

To test this hypothesis, we’re going to apply the changes below:

Clicking the button will copy the code so you can paste it anywhere you want
Clicking the button will copy the code so you can paste it anywhere you want

The code used in the experiment

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

//variables
var getCopyToClipboardButton = document.querySelector(".clipboard > a");
var getCouponCode = document.querySelector(".couponCode").innerText;

//event listeners
getCopyToClipboardButton.addEventListener("click", function() {
  copyToClipboard(this, getCouponCode);
});

//functions
function copyToClipboard(button, code) {
  var tempInput = document.createElement("input");
  tempInput.style = "position: absolute; left: -1000px; top: -1000px";
  tempInput.value = code;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
  disableButton(button);
}

function disableButton() {
  getCopyToClipboardButton.style.pointerEvents = "none";
  getCopyToClipboardButton.style.cursor = "default";
  getCopyToClipboardButton.style.transition = "1s";
  getCopyToClipboardButton.innerHTML = `COPIED TO CLIPBOARD <i class="fas fa-clipboard-check"></i>`;
  getCopyToClipboardButton.style.backgroundColor = "#549612";
}

Breakdown of the code

1. New syntax

The breakdown starts by going over all the new syntax in the example above. Since this article is part of a series, make sure you check the syntax’s complete documentation in the previous articles.

function() {} is an anonymous function. A function without an identifier is called an anonymous function. When you give a function an identifier you probably want to call it later.

Sometimes you just need to input a function without the need of calling it later. The .addEventListener method doesn’t take straight-up code for example. You need to wrap the code in a function for it to execute.

You can make the function anonymous to make the code lighter to run.

The keyword this references a value depending on the way that a function is called. In our example, we refer to the event. When you use it within an object you will refer to the object it is contained in. 

The best way to get a better understanding of this keyword is trying out what this outputs at different positions in the code. Giving more information about this will probably just confuse you.

.select() is a method that selects and returns all the text within an input field or text area.

.execCommand(“copy”) is a method that copies the current selection to the user’s clipboard. Although .execCommand is deprecated we can still use this command because it is supported by most modern browsers.

Most browsers support the copy command

Most browsers support the copy command

.removeChild() is a method that can be used to remove a child from a parent element. 

2. Logic

//variables

We will start by declaring our variables. Let’s open up a comment with two forwards slashes to indicate this section.

var getCopyToClipboardButton = document.querySelector(".clipboard > a");

In the first line of code, we select the copy the clipboard button using the querySelector method. We are looking for the anchor tag because we want register clicks later on.

We assign this anchor element to the newly declared getCopyToClipboardButton variable.

var getCouponCode = document.querySelector(".couponCode").innerText;

In the second line of code we select the coupon code using the querySelector method. The innerText method makes sure that we get this value as a string. We assign this string to the newly declared getCouponCode variable.

//event listeners

Then we want to declare our eventlisteners. We open up a comment again to indicate the start of this section.

getCopyToClipboardButton.addEventListener("click", function() {

This event listener listens for clicks on the getCopyToClipboardButton anchor. We indicate that we want to listen for clicks by passing down “click” as the first argument.

copyToClipboard(this, getCouponCode);

The second argument is an anonymous function that calls the copyToClipboard function and passes down the event and the coupon code.

});

We close our function, event listener, and end the statement.

//functions

Then we are going to declare our functions that we called earlier. We open up a comment again to start this section.

function copyToClipboard(button, code) {

We start our copyToClipboard function with two arguments that we pass down in our function call. We are going to call the first argument button and second argument code.

var tempInput = document.createElement("input");

The only way to get the coupon code to the clipboard is by selecting and copying it from a text area or input field. The problem is that the coupon code is just a simple div. 

In this line, we create a temporary input element with the createElement method. We assign this temporary element to the newly declared tempInput variable. We are going to use this to copy our code.

tempInput.style = "position: absolute; left: -1000px; top: -1000px";

We can only copy to clipboard from the input field when it exists in the DOM. Since we don’t want to show this to our user we add some CSS to hide it.

tempInput.value = code;

We set the coupon code that we saved earlier as a string to the value of the input field. 

document.body.appendChild(tempInput);

Then we add our hidden input field to the DOM so we can select and copy the value.

This is what it would look like if we would not have hidden it.
This is what it would look like if we would not have hidden it.
tempInput.select();

We select our input field with the .select method.

document.execCommand("copy");

In this line, we copy the selected element. We can now paste the code everywhere we want!

document.body.removeChild(tempInput);

Because we don’t need the element anymore, we remove the element from the DOM with the removeChild method.

disableButton(button);

Here we call a new function called disableButton. We pass down the button that has been passed down when this function was called.

}

Then we close our copy function.

function disableButton() {

This function is created so we can give the user some confirmation of their copied code. We will do this by changing the style of the button.

getCopyToClipboardButton.style.pointerEvents = "none";
getCopyToClipboardButton.style.cursor = "default";

These two lines of code disables the mouse pointer from changing to a hand. Indicating the element is not clickable anymore.

getCopyToClipboardButton.style.transition = "1s";

We can make the transition to the disabled button more smoothly by adding a 1 second delay.

getCopyToClipboardButton.innerHTML = `COPIED TO CLIPBOARD &lt;i class="fas fa-clipboard-check"&gt;&lt;/i&gt;`;

Here we change the innerHTML of the anchor to give the text confirmation. We also add a different clipboard icon with a check.

getCopyToClipboardButton.style.backgroundColor = "#549612";

We also change the disabled button to green for that extra bit of confirmation.

Before
Before clicking
After
After clicking
}

Finally, we close the function.

3. Exercise

The best way to learn JavaScript is to try it. 

I want you to change the code so the button returns to the original state on hover. This way the user can copy the code again if needed.

Exercise example
Exercise example

Can’t figure it out? Send me a message on LinkedIn, and I will help you out! Check out the solution.

New resource: How to win your first a/b test on a zero budget?

A zero budget conversion optimization process with Google Optimize and JavaScript.

Download now