SCRIPTWEBFLOWJAVASCRIPT

Bouton copier-coller

Permets à tes visiteurs de copier un texte en un clic, avec l'état de confirmation qui va avec. Trois étapes, trois minutes.

/ ÉTAPE 01

Copie-colle ce script dans le <body> de ta page

Ce JavaScript fait fonctionner le bouton : il lit l'élément ciblé, copie son contenu et bascule le libellé du bouton pendant deux secondes.

bouton-copier-coller.html
<script>
    document.querySelectorAll('.copy-btn').forEach(btn => {
      const originalText = btn.textContent;
      btn.addEventListener('click', async () => {
        const key = btn.getAttribute('data-copy-target');
        const selector = `[data-copy-item="${key}"]`;
        const target = document.querySelector(selector);
        if (!target) return;
        const text = target.innerText.trim();

        try {
          await navigator.clipboard.writeText(text);
          btn.textContent = 'Copié !';
          btn.classList.add('success');
          setTimeout(() => {
            btn.textContent = originalText;
            btn.classList.remove('success');
          }, 2000);
        } catch {
          // Gestion d'erreur possible
        }
      });
    });
</script>

/ ÉTAPE 02

Ajoute les classes essentielles pour faire fonctionner ton bouton

  1. 01Ajoute la classe "copy-btn" à ton ou tes boutons de copie sur la page.
  2. 02Ajoute la classe "copy-label" au texte de ton bouton.
  3. 03Crée la classe combinée "success" et donne-lui le style de ton choix dans Webflow.

/ ÉTAPE 03

Ajoute les attributs spécifiques pour cibler l'élément à copier

  1. 01Ajoute l'attribut "data-copy-target = texte1" à ton bouton.
  2. 02Ajoute l'attribut "data-copy-item = texte1" au texte à copier.

/ OÙ LE COLLER

DansWebflow, Paramètres › Custom code

CUSTOM CODE

PARAMÈTRES DU PROJET

Head code

<!-- vide -->

Footer code

<script> … </script>

Les codes personnalisés ne s'appliquent qu'après publication.

Footer code, jamais Head

Le script doit s'exécuter après le contenu de la page. Dans le Head, il ne trouverait rien à animer.

Une seule fois pour tout le site

Il se pose au niveau du projet, pas page par page. Les blocs le trouvent tout seuls.

Publier pour activer

Tant que le site n'est pas publié, le code personnalisé ne tourne pas, même en aperçu.

/ LES OPTIONS

Tout se pilote par classe et par attribut.

.copy-btn

classe

La classe à poser sur le bouton qui déclenche la copie.

.copy-label

classe

Le texte du bouton, remplacé pendant la confirmation.

data-copy-target

clé libre

Relie le bouton au texte qu'il doit copier.

data-copy-item

même clé

Marque l'élément dont le contenu sera copié.

.success

classe

Ajoutée au bouton pendant deux secondes après la copie.

/ À RETENIR

Plusieurs boutons sur la même page ? Change la valeur des attributs pour chaque paire, par exemple « texte2 » sur le bouton et sur son texte : chaque paire fonctionne de son côté.