Comment copier un texte dans le presse-papier avec Webflow ?

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

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