Velo by Wix Tutorial: How to Use Copy to Clipboard API?

This API allows the user to copy text to their clipboard.

As simple as it sounds, it is fun to know that one can have a copy button that can copy text from a text element or from text input elements.

In this tutorial, you will learn how to;

1. Add a button that copies text from text input element

2. Disable the button after clicking it

3. Change the button's label after clicking it

4. Enable and return button text after one second using setTimeout() method.

---

MY ELEMENTS AND DESIGNS

Text Input

Input Element

We will use this element to add the text we want to copy.

Button

Copy Button

We will use this button to copy the text inside our text input element.

---

Understanding the code

Here, I will explain the concept of my code and the achievement of having an interactive and user-friendly copy to clipboard feature in your WIX website.

import wixWindow from 'wix-window';

To begin our code, we need to first import our wixWindow API

import wixWindow from 'wix-window';

$w.onReady(() => {

});

Next, we will need onReady function to allow the elements and code to run before the user starts interacting with the elements.

import wixWindow from 'wix-window';

$w.onReady(() => {
    $w("#copyButton").onClick(() => {
    
    });

});

I then added onClick() to the "copy button"

import wixWindow from 'wix-window';

$w.onReady(() => {
    $w("#copyButton").onClick(() => {
    
    let textMessage = $w("#textInput").value;
    
    });

});

I assign a variable to the input value of my text input element. This variable will hold the text inside my text input and will be passed to the copyToClipboard API to be copied.

NOTE: if you want to copy a text from a text element, replace this line of code

let textMessage = $w("#textInput").value;

with this line of code.

let textMessage = $w("#textElementID").text;

---

Moving forward...

import wixWindow from 'wix-window';

$w.onReady(() => {
    $w("#copyButton").onClick(() => {
    
    let textMessage = $w("#textInput").value;
    
    wixWindow.copyToClipboard(textMessage)
            .then(() => {
    
        });
    });
});

I added the actual line of code where the copyToClipboard API actually copies the text and then prompts the next action to be take. This is explained in the next step.

import wixWindow from 'wix-window';

$w.onReady(() => {
    $w("#copyButton").onClick(() => {
    
    let textMessage = $w("#textInput").value;
    
    wixWindow.copyToClipboard(textMessage)
            .then(() => {
    
                $w("#copyButton").disable();
                $w("#copyButton").label = 'Copied!';
    
        });
    });
});
    

I then decided to disable my button and change its label to 'Copied!' In this case, the user will know their text has been copied.

---

THE FUNCTION

After copying my text, I want the button to be enabled and I also want the label to go back to 'Copy Text'. To achieve this, I wrote a function with a setTimeout() method that will automatically enable and change my button's label after one second.

function returnToDefault() {
    if ($w("#copyButton").disable()) {
        setTimeout(function () {
            $w("#copyButton").enable();
            $w("#copyButton").label = 'Copy Text';
        }, 1000)
    }
}
    

My function is

returnToDefault();

I need to insert this name into my main code at the part that commences what happens next after the text is copied.

import wixWindow from 'wix-window';

$w.onReady(() => {
    $w("#copyButton").onClick(() => {
    
    let textMessage = $w("#textInput").value;
    
    wixWindow.copyToClipboard(textMessage)
            .then(() => {
    
                $w("#copyButton").disable();
                $w("#copyButton").label = 'Copied!';
                
                returnToDefault();//MY FUNCTION
    
        });
    });
});
    

Now that my function is within this code, my button will automatically enable and change its label after one second.

---

TAKE AWAY

setTimeout(function(){ 

    expression

}, 1000);

In JavaScript, the setTimeout() method performs an expression after a certain millisecond.

---

FINAL CODE

import wixWindow from 'wix-window';

$w.onReady(() => {
    $w("#copyButton").onClick(() => {

        let textMessage = $w("#textInput").value;

        wixWindow.copyToClipboard(textMessage)
            .then(() => {
                $w("#copyButton").disable();
                $w("#copyButton").label = 'Copied!';


                returnToDefault();


            })
    })
});


//Add a function to enable button and change the label after 1 second

function returnToDefault() {
    if ($w("#copyButton").disable()) {
        setTimeout(function () {
            $w("#copyButton").enable();
            $w("#copyButton").label = 'Copy Text';
        }, 1000)
    }
}