nl-click-&-copy

Copie au clic Webflow

Permettez à vos utilisateurs de copier n'importe quel texte en un seul clic. Script Vanilla JS léger, compatible avec les tooltips et 100% piloté par les attributs.

Installation :

≃ 10 minutes

Poids :

1 ko

June

2026

Description

Un script 100% Vanilla JS utilisant l'API navigator.clipboard pour offrir une expérience de copie fluide et moderne à vos utilisateurs.

💡 Fonctionnement : Le script détecte le clic sur n'importe quel élément portant l'attribut "trigger". Il peut soit copier le texte du bouton lui-même, soit aller chercher le texte d'un autre élément (comme un bloc de code) grâce à un système d'ID partagé.

Caractéristiques :

⚡️ Feedback visuel intégré : Le script gère nativement deux types de retours : le remplacement temporaire du texte du bouton ou l'affichage d'une info-bulle (tooltip) personnalisée.
🌐 Compatibilité Webflow Localization : Les messages de succès (ex: "Copié !") sont définis dans les attributs, ce qui les rend traduisibles nativement via l'outil de localisation de Webflow.
🎯 100% Custom Attributes (Zéro classe CSS) : Aucune contrainte de style. Vous créez votre bouton et votre bulle d'info comme vous le souhaitez dans le Designer, le script s'occupe du reste.
⚡️ Ultra léger : Moins de 1ko, zéro dépendance (pas de jQuery).

⚠️ Important

Structure des tooltips : Pour le mode "Texte bloc", votre div de message de succès (la bulle) doit être un frère direct (sibling) de votre élément cliquable dans la hiérarchie Webflow.
Sécurité : L'API Clipboard nécessite une connexion sécurisée (HTTPS) pour fonctionner. Elle est active sur tous les sites Webflow publiés, mais peut ne pas fonctionner en mode "Aperçu" local dans certains navigateurs.

‍

Custom attributes

💡 Cliquez sur l'attribut ou la valeur ci dessous pour le copier !

nl-click-copy

trigger

Obligatoire. À mettre sur l'élément qui doit déclencher la copie au clic.

nl-click-copy-id

votre-id

Optionnel. Permet de lier un trigger à une cible. Si absent, le script copie le texte du trigger.

nl-click-copy-msg

Copié !

Optionnel. Le message de succès qui remplacera le texte du bouton.

nl-click-copy-msg

tooltip

Optionnel. À mettre sur la Div "bulle" pour qu'elle s'affiche au clic.

Installation :

Étape 1 : Copiez ce code dans le before body de votre page

<!--{ NL-click-&-copy }-->
<script src="https://cdn.jsdelivr.net/gh/nicolas-leitao/webflow-scripts/nl-click-copy.js" defer></script>

Copier

Étape 2 : Configurer le déclencheur

Sélectionnez l'élément sur lequel l'utilisateur doit cliquer (Bouton, Lien, text bloc ou Div) et ajoutez l'attribut nl-click-copy="trigger".

Étape 3 : Définir la cible (Facultatif)

Si vous voulez copier le texte du bouton lui-même : Vous n'avez rien d'autre à faire.
Si vous voulez copier le texte d'un autre élément : Donnez un ID identique au déclencheur et à la cible via l'attribut nl-click-copy-id="mon-id".

Étape 4 : Choisir le type de Feedback

Remplacement de texte : Sur votre trigger, ajoutez nl-click-copy-msg="Copié !". Le texte du bouton changera pendant 1,5 seconde.
Affichage d'une bulle (Tooltip) : Créez une div pour votre message de succès, donnez-lui l'attribut nl-click-copy-msg="tooltip" et masquez-la (display: none). Assurez-vous qu'elle est située dans le même parent que votre trigger.

Exemples de config :

Pour un bouton (comme l'étape 1 de ce tutoriel)

Sur le texte à copié :
nl-click-copy-id=votre-id
Sur le bouton :
nl-click-copy=trigger
nl-click-copy-id=votre-id
nl-click-copy-msg=Copied !

Pour une copie d'un texte avec tooltip (comme les attributes de cette page)

Sur le texte à copié :
nl-click-copy-id=trigger
Sur la tooltip :
nl-click-copy-msg=tooltip

Screenshot de la configuration du mode tooltip du script nl-clic&copy