ns-clipboard – Copier dans le presse-papier sur Webflow

ns-clipboard est un outil JavaScript ultra-léger permettant d’ajouter une fonctionnalité de copie au clic sur n’importe quel élément Webflow.
Aucun JS personnalisé à écrire : il suffit d’ajouter un attribut ns-clipboard.

Utilisation via CDN

<script src="https://cdn.jsdelivr.net/npm/@numeraswiss/tools-clipboard@1/clipboard.js"></script>

Ce script charge automatiquement ns-core si nécessaire.

Exemple simple

<div ns-clipboard="Ceci est un texte à copier">
  Cliquez ici pour copier
</div>

Si ns-clipboard n’est pas précisé, l’outil copiera textContent de l’élément.

Attributs disponibles

| Attribut | Description | |-------------------------|-----------------------------------------------------------------------------| | ns-clipboard | Texte à copier (sinon textContent sera utilisé) | | ns-clipboard-toast | Définit si un toast "Copié !" doit apparaître (true ou false) | | ns-clipboard-message | (à venir) Message personnalisé à afficher dans le toast |

Activation automatique

Tous les éléments ayant l’attribut [ns-clipboard] sont automatiquement activés.
L’outil observe aussi les éléments ajoutés dynamiquement (CMS, filtres, etc.).

Exemple Webflow complet

<!-- Exemple : copie dynamique avec feedback -->
<div ns-clipboard="Email copié !" class="bouton">
  Copier l'email
</div>

<!-- Option : désactiver le toast pour un élément spécifique -->
<div ns-clipboard="token-ABC123" ns-clipboard-toast="false">
  Copier sans feedback
</div>

<!-- Ou désactiver globalement dans le script -->
<script src="https://cdn.jsdelivr.net/npm/@numeraswiss/tools-clipboard@1/clipboard.js" ns-clipboard-toast="false"></script>

Développement local

pnpm build --filter ns-clipboard
pnpm serve

Puis dans ta page HTML :

<script src="http://127.0.0.1:5500/packages/ns-clipboard/dist/clipboard.js"></script>

Liens

• Fait partie de la suite nsTools : github.com/rricol/nsTools
• Développé par @rricol pour numera.swiss

Licence

MIT