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

Updated: Sep 14, 2020


Tutorial Video



About the Tutorial

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

Tutorial Site


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


 

Method #1

Copy Text from a Regular Page

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

  • 1 Button Element to click to copy  /  #clickToCopy

  • 1 Text Element to display after copy function is successful  /  #successCopy

  • 1 Text Element to display the text we want to copy  /  #text2copy

  • 1 User Input Text Element to paste copied code  /  #checkCopy

  • 1 Text Element to display success message if copy matches  /  #itWorked

  • 1 Text Element to display failure message if copy does not match  /  #sorry

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


The Code


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

Copy Text from a Repeater

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

  • 1 dataset connected to restaurant database collection  /  #dataset1

  • 1 repeater element  /  #repeater1

  • 1 Button Element to click to copy promo code  /  #copyPromo

  • 1 Button Element to click to copy email  /  #copyEmail

  • 1 Button Element to link to dynamic page  /  #readMore

  • 1 Text Element to display after copy function is successful  /  #copy1

  • 1 Text Element to display after copy function is successful  /  #copy2