I’m building a site for a client and I use the Finsweet “Copy to Clipboard” functionality so people can copy an email. For some reason it doesn’t work on mobile. (probably due to regulations)
Now I look for an alternative; User clicks on the button and it autoselects the email above so the user can click “Copy” themselves due to the native os. I looked at certain ways to do that but nothing works.
By testing this you can find out if the problem is related to a specific device or browser, or if there is something wrong with the implementation on your website.
I tested the button on android (chrome) and it worked just fine.
I just checked and it works but on my own page it doesn’t. How is that possible? I didnt use media queries and the attributes stick to the button no matter the device… whys that happening then
Beautiful design btw!
Its hard to tell what’s breaking the function by looking at the read-only link.
Could you share the stage-link (.webflow.io) aswell?
Thanks for the link. I just tested it on Android/Chrome and it worked just fine.
My guess is that if you clear your cache on your mobile browser it will fix it.
If you dont want to delete your cache you can also test it with inkognito mode and if it will work there it will work for all other website-visitors aswell.
I dont know if this fixed it, but I see that you use the “copy sibling” option, but the trigger-button and the text-element are not in a direct siblings-relation.
Okay. Then it might be a conflict with one of the other scripts on your website.
I tested the button on an empty page and it worked on my end.
To find out what’s breaking the function you might remove all your custom code on your website and see if the button works. If it does – put the scripts back piece by piece and test the button each time. As soon as the button doesnt work again, you find out which script is causing the conflict.
what about write and use function for clipboard instead using library. to copy text is 2-3 lines.
Principle example:
WF element or whatever…
<!-- Prefilled email input or paragraph or text ..... -->
<input id="my-email" type="text" value="user@example.com" readonly />
<!-- Button to copy email -->
<button on:click={copyText}>Copy Email</button>
<script>
async function copyText() {
const email = document.getElementById("my-email").value;
try {
await navigator.clipboard.writeText(email);
console.log('Email copied to clipboard!');
// Optional: you could display a notification or update the UI
} catch (err) {
console.error('Failed to copy: ', err);
}
}
</script>
it should work as it works in each browser and it is well documented. Not sure about WF so I can be wrong.
