Step 1 - Code
Below is some custom javascript that you should add before the closing <body> tag.
CUSTOM JS
<!--🟢 COPY BUTTON CODE 🟢-->
<script>
const copyBtns = document.querySelectorAll('[data-copy-button]');copyBtns.forEach(copyBtn => {
const inputId = copyBtn.getAttribute('data-copy-button');
const input = document.querySelector(`[data-input="${inputId}"]`); copyBtn.addEventListener('click', async () => {
try {
await navigator.clipboard.writeText(input.value);
console.log('Text copied to clipboard');
// Change button text to "Copied" and add class "success" for 3 seconds
const originalBtnText = copyBtn.innerHTML;
copyBtn.innerHTML = 'Copied';
copyBtn.classList.add('success');
setTimeout(() => {
copyBtn.innerHTML = originalBtnText;
copyBtn.classList.remove('success');
}, 3000);
} catch (err) {
console.error('Failed to copy text: ', err);
}
});
});
</script>
Step 2 - Attributes
Make sure your input and your copy button have attributes that look like data-input="INPUT_NAME" and data-copy-button="INPUT_NAME".
The "INPUT_NAME" is something that you pick. As long as the button and input match each other you should be fine.
Step 3 - Multiple inputs
If you have multiple input/button pairs on the same page be sure to change the "INPUT_NAME" so that each pair is unique.
Step 4 - Styling
When the copy button is clicked, a class of Success is added for 3 seconds. You can style it below.