Plugin de site web

Le Plugin de site web NameDrop permet aux visiteurs d’entendre comment un prénom se prononce en le survolant — directement sur votre site web. C’est une seule balise script, environ 22 Ko, zéro dépendance, et ça fonctionne sur n’importe quelle plateforme.

Voyez-le en action

Visitez keshavmalani.com pour voir le Plugin de site web en direct. Survolez le prénom pour entendre la prononciation.

Démarrage rapide

Ajoutez cette ligne dans le <head> de votre site web ou avant la balise fermante </body> — c’est tout :

<script src="https://namedrop.io/script/namedrop-integration.min.js" defer></script>

Une fois le script chargé, vous avez deux façons d’ajouter des prénoms prononçables à vos pages.

Option A : Utiliser les balises `<namedrop>` (recommandé)

Entourez n’importe quel prénom avec une balise <namedrop> pour le rendre interactif. Cela vous donne un contrôle total sur les prénoms améliorés.

Prénoms personnels :

<namedrop username="johndoe">John Doe</namedrop>

Noms de marque :

<namedrop brandUsername="nike">Nike</namedrop>

Exemple de page complète :

<!doctype html>
<html>
  <head>
    <title>Notre équipe</title>
    <script src="https://namedrop.io/script/namedrop-integration.min.js" defer></script>
  </head>
  <body>
    <h1>Rencontrez notre équipe</h1>
    <p>Notre PDG, <namedrop username="johndoe">John Doe</namedrop>, a fondé l'entreprise en 2020.</p>
    <p>Nous sommes fiers partenaires de <namedrop brandUsername="nike">Nike</namedrop>.</p>
  </body>
</html>

Option B : Détection automatique des liens

Vous liez déjà vers des profils NameDrop sur votre site ? Le plugin détectera ces liens automatiquement et les convertira en lecteurs audio — sans modifications de balisage.

<!-- Ces liens deviennent des lecteurs audio automatiquement -->
<a href="https://namedrop.io/johndoe">John Doe</a>
<a href="https://namedrop.io/brands/nike">Nike</a>

Les liens directs vers des fichiers audio (.mp3, .wav, .m4a, .ogg, .webm, .aac, .flac) sont également pris en charge et affichent un lecteur sans l’icône de profil.

Vous souhaitez garder un lien comme lien ordinaire ? Ajoutez data-namedrop-processed="true" :

<a href="https://namedrop.io/johndoe" data-namedrop-processed="true">Lien ordinaire</a>

Vous pouvez utiliser à la fois les balises <namedrop> et les liens auto-détectés sur la même page — ils fonctionnent ensemble sans conflits.

Personnalisation

Vous souhaitez un aspect plus épuré sans l’icône NameDrop à côté des prénoms ? Ajoutez l’attribut data-hide-icon à la balise script :

<script src="https://namedrop.io/script/namedrop-integration.min.js" data-hide-icon defer></script>

Les prénoms apparaissent uniquement comme texte souligné. Au survol, un lecteur audio compact apparaît avec lecture/pause, une visualisation de la forme d’onde et un contrôle du volume. Le lecteur s’adapte automatiquement au thème clair ou sombre de votre site.

Guide par plateforme

Plateforme	Comment ajouter le script
HTML statique	Ajoutez directement dans votre HTML
WordPress	En-tête du thème, ou un plugin comme “Insert Headers and Footers”
Squarespace	Paramètres → Injection de code
Wix	Paramètres du site → Code personnalisé
Webflow	Paramètres du projet → Code personnalisé
Shopify	Modifiez `theme.liquid` ou utilisez une application personnalisée
React / Next.js	Utilisez le composant `<Script>` ou ajoutez à votre modèle HTML
Angular / Vue	Ajoutez à `index.html`

FAQ

Est-ce que ça ralentit mon site web ?

Non. Le script se charge avec defer (sans blocage), fait environ 22 Ko, et l’audio n’est récupéré que lorsque quelqu’un clique sur lecture.

Est-ce que ça fonctionne avec les applications monopages ou le contenu chargé dynamiquement ?

Oui. Le plugin surveille le nouveau contenu ajouté à la page après le chargement, donc il fonctionne avec React, Vue, Angular et le contenu AJAX.

Que se passe-t-il si un profil n’a pas encore d’enregistrement ?

Le bouton de lecture affiche brièvement un état d’erreur. Le texte du prénom reste visible et fonctionnel.

Le plugin fait-il des requêtes au chargement de la page ?

Aucun audio n’est pré-récupéré. Les requêtes API ne se produisent que lorsque quelqu’un clique sur lecture.

Besoin d’aide ?

Contactez-nous à hello@namedrop.io — nous serons heureux de vous aider à la configuration.