Comment copier un texte dans le presse-papier avec Webflow ?
Apprenez à ajouter un bouton "Copier" dans Webflow pour copier du texte dans le presse-papier avec l'API Clipboard.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un bouton "Copier" pour copier du texte dans le presse-papier depuis Webflow.
Exemple
Cliquez pour copier
| ID / Classe | Élément | Rôle |
|---|---|---|
| copy-text | Text Block ou Div | Contenu à copier |
| copy-btn | Link Block ou Button | Bouton déclencheur |
| copy-feedback | Text Block | Message de confirmation |
1. Créez les éléments dans Webflow
Créez un Text Block avec l'ID copy-text contenant le texte à copier. Ajoutez un bouton avec l'ID copy-btn. Optionnel : ajoutez un Text Block avec l'ID copy-feedback affichant "Copié !" en display none par défaut.
2. Ajoutez ce script dans le <body>
document.getElementById('copy-btn').addEventListener('click', function() {
const text = document.getElementById('copy-text').textContent;
navigator.clipboard.writeText(text).then(function() {
const feedback = document.getElementById('copy-feedback');
if (feedback) {
feedback.style.display = 'block';
setTimeout(function() { feedback.style.display = 'none'; }, 2000);
}
});
});3. Publiez et testez
Cliquez sur le bouton : le texte est copié et le message "Copié !" s'affiche 2 secondes. Si vous voulez copier un champ input, remplacez .textContent par .value.
Conclusion
Le bouton copier améliore l'UX sur les contenus techniques. Cas d'usage :
- Copier un code promo sur une landing page
- Copier un snippet de code dans un tutoriel
- Copier un lien de parrainage
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
