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

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.

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'.

Code used:

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

• 1 Text Element to connect to category / #category

• 1 Text Element to connect to restaurant name / #title

• 1 Text Element to connect to description / #description

• 1 Text Element to connect to contact name / #contact

• 1 Text Element to connect to email / #email

• 1 Image Element to connect to restaurant image / #image1

• 1 Image Element to connect to contact image / #image2

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

Code used:

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 #2

Copy Text from a Dynamic Page

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

Then follow method #1 instead!

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

• 1 dynamic dataset connected to restaurant database collection / #dynamicdataset

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

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

• 1 Button Element to click to copy current dynamic page URL / #copyURL

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

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

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

• 1 Text Element to connect to category / #category

• 1 Text Element to connect to restaurant name / #title

• 1 Text Element to connect to description / #description

• 1 Text Element to connect to contact name / #contact

• 1 Text Element to connect to email / #email

• 1 Image Element to connect to restaurant image / #image1

• 1 Image Element to connect to contact image / #image2

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.

Code used:

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 wasn'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)
  });
});