Copy to Clipboard from a Regular Page, Dynamic Page and Repeater

Wix released the Copy to Clipboard function.  This function will allow a User to copy text onto their device's clipboard.  (See a copy of their code in the image below.) This tutorial will show you how to take the example code Wix provided, and modify it by using 3 different methods of real use-case scenarios.

 Follow Along #1

Link to Tutorial Site: https://codequeen.wixsite.com/copy-to-clipboard

Method #1

In our example, we used the following elements with the following ID names:

We used the properties panel to make sure the success and failure text elements were set to 'hidden on load'.

 import wixWindow from 'wix-window';
 let copyFunction;
 let true;
 
 $w.onReady(function () {
  $w("#clickToCopy").onClick((event) => {
  let text = $w('#text2copy').text;
  wixWindow.copyToClipboard(text)
  .then(() => {
  $w('#successCopy').show();
  })
  .catch((err) => {
  console.log(err)
  });
  });
 
  //If you do not require the person to paste the copied text onto your page, then you can delete the code between here .....
 
  $w("#checkCopy").onKeyPress((event) => {
  let key = event.key;
  $w('#sorry').hide();
  $w('#itWorked').hide();
  if (key === "Enter") {
 
  console.log("Pressed Enter key on Password field"); //You can change the text of this line or delete it
  let toCheck = $w("#text2copy").text;
  let theCopied = $w("#checkCopy").value;
 
  if (toCheck === theCopied) {
  $w('#itWorked').show();
  $w('#sorry').hide();
  } else {
  $w('#sorry').show();
  $w('#itWorked').hide();
  }
  } else {
  console.log("Did not press Enter key."); //You can change the text of this line or delete it
  }
  });
 
  //.....and up to here. Do not delete the last line.
 
 });
 

Method #2

In our example, we used the following elements with the following ID names:

We used the properties panel to make sure that #copy1 and #copy2 were set to 'hidden on load'.

 import wixWindow from 'wix-window';
 let copyFunction;
 let true;
 
 $w.onReady(function () {
 
  $w("#dataset1").onReady(() => {
 
  $w("#repeater1").onItemReady(($item, itemData, index) => {
  let thePromo = itemData.promoCode;
  let theEmail = itemData.email;
 
  $item("#copyPromo").onClick((event) => {
  wixWindow.copyToClipboard(thePromo) //This should match the variable for the promo code
  .then(() => {
  $item('#copy1').show(); //This is the success message that you will show after the copying function is successful
  })
  .catch((err) => {
  console.log(err)
  });
  });
 
  $item("#copyEmail").onClick((event) => {
  wixWindow.copyToClipboard(theEmail) //This should match the variable for the email
  .then(() => {
  $item('#copy2').show(); //This is the success message that you will show after the copying function is successful
  })
  .catch((err) => {
  console.log(err)
  });
  });
  });
 
  });
 
 });
 

Method #3

 Are you trying to copy static text on a dynamic page?

Then follow method #1 instead!

In our example, we used the following elements with the following ID names:

We used the properties panel to make sure that #copy1 , #copy2 and #copy3 were set to 'hidden on load'.  We connected all of our elements to the dynamic dataset.  The only elements we did not connect are the 3 text elements that were used to display the 'successful' message.

 import wixWindow from 'wix-window';
 import wixLocation from 'wix-location';
 let url = wixLocation.url;
 let copyClipboard;
 var true;
 
 $w.onReady(function () {
 
  $w("#dynamicDataset").onReady(() => {
  let currentListing = $w("#dynamicDataset").getCurrentItem(); //This line gets the current item in the database
  let thePromo = currentListing.promoCode; //This line gets the value from the promoCode field in the database
  let theEmail = currentListing.email; //This line gets the value from the email field in the database
 
  $w("#copyPromo").onClick((event) => {
  wixWindow.copyToClipboard(thePromo) //This should match the variable for the promo code
  .then(() => {
  $w('#copy1').show(); //This is the success message that you will show after the copying function is successful
  })
  .catch((err) => {
  console.log(err)
  });
  });
 
  $w("#copyEmail").onClick((event) => {
  wixWindow.copyToClipboard(theEmail) //This should match the variable for the email
  .then(() => {
  $w('#copy2').show(); //This is the success message that you will show after the copying function is successful
  })
  .catch((err) => {
  console.log(err)
  });
  });
 
  });
 
  $w("#copyURL").onClick((event) => {
  wixWindow.copyToClipboard(url) //This should match the variable for the dynamic URL
  .then(() => {
  $w('#copy3').show(); //This is the success message that you will show after the copying function is successful
  })
  .catch((err) => {
  console.log(err)
  });
  });
 
 });
 

If you wan't to share a static URL instead of the dynamic page URL, you can replace that piece of corresponding code with the following:

  //Make sure to place this code within the onReady section of your code. It does not necessarily have to be placed within the onReady of the dataset.
 
 $w("#copyURL").onClick((event) => {
  wixWindow.copyToClipboard("www.codequeen.co") // Replace the text within the quoatation marks with your custom text or URL
  .then(() => {
  $w('#copy3').show(); //This is the success message that you will show after the copying function is successful
  })
  .catch((err) => {
  console.log(err)
  });
 });
 

Author

Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.

Online Booking: Discovery Session

Contact Form: Send project details