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.
<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
- 01Ajoute la classe
"copy-btn"à ton ou tes boutons de copie sur la page. - 02Ajoute la classe
"copy-label"au texte de ton bouton. - 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
- 01Ajoute l'attribut
"data-copy-target = texte1"à ton bouton. - 02Ajoute l'attribut
"data-copy-item = texte1"au texte à copier.
/ OÙ LE COLLER
Dans
Webflow, Paramètres › Custom code
CUSTOM CODE
PARAMÈTRES DU PROJET
Head code
Footer code
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.
ATTRIBUT
TYPE
RÔLE
.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é.
/ DANS LA MÊME FAMILLE
Les autres blocs
d'interaction.
/ PLUS DE SCRIPTS
Continue à équiper
tes projets.
SCRIPTJAVASCRIPTAnnée de copyright automatiqueNe touche plus jamais à la date affichée dans ton footer.GRATUIT · 0,2 KO · 2 ÉTAPES
SCRIPTJAVASCRIPT · CSSBouton quantité personnaliséUn sélecteur de quantité pour tes boutiques e-commerce ou tes systèmes de devis.GRATUIT · 1,2 KO · 3 ÉTAPES
SCRIPTJAVASCRIPTSlider avant / aprèsUn slider interactif avec effet avant / après, à poser sur n'importe quelle image.GRATUIT · 4,9 KO · 2 ÉTAPES











