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
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'.
The Code
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
Copy Text from a Dynamic Page
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:
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.
The Code
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
by Code Queen
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