Website-Plugin

Das NameDrop Website-Plugin ermöglicht Besuchern, die Aussprache eines Namens durch Hovern darüber zu hören — direkt auf Ihrer Website. Es ist ein einziger Script-Tag, ca. 22 KB, ohne Abhängigkeiten und funktioniert auf jeder Plattform.

In Aktion sehen

Besuchen Sie keshavmalani.com, um das Website-Plugin live zu erleben. Hovern Sie über den Namen, um die Aussprache zu hören.

Schnellstart

Fügen Sie diese Zeile zum <head> Ihrer Website oder vor dem schließenden </body>-Tag hinzu — das war’s:

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

Sobald das Script geladen ist, haben Sie zwei Möglichkeiten, aussprechbare Namen zu Ihren Seiten hinzuzufügen.

Option A: `<namedrop>`-Tags verwenden (empfohlen)

Umschließen Sie jeden Namen mit einem <namedrop>-Tag, um ihn interaktiv zu machen. So behalten Sie die volle Kontrolle darüber, welche Namen erweitert werden.

Persönliche Namen:

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

Markennamen:

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

Vollständiges Seitenbeispiel:

<!doctype html>
<html>
  <head>
    <title>Unser Team</title>
    <script src="https://namedrop.io/script/namedrop-integration.min.js" defer></script>
  </head>
  <body>
    <h1>Lernen Sie unser Team kennen</h1>
    <p>Unser CEO, <namedrop username="johndoe">John Doe</namedrop>, gründete das Unternehmen im Jahr 2020.</p>
    <p>Wir sind stolze Partner von <namedrop brandUsername="nike">Nike</namedrop>.</p>
  </body>
</html>

Option B: Automatische Link-Erkennung

Sie verlinken bereits auf NameDrop-Profile auf Ihrer Website? Das Plugin erkennt diese Links automatisch und wandelt sie in Audio-Player um — keine Markup-Änderungen erforderlich.

<!-- Diese Links werden automatisch zu Audio-Playern -->
<a href="https://namedrop.io/johndoe">John Doe</a>
<a href="https://namedrop.io/brands/nike">Nike</a>

Direkte Audio-Datei-Links (.mp3, .wav, .m4a, .ogg, .webm, .aac, .flac) werden ebenfalls unterstützt und zeigen einen Player ohne Profilicon.

Möchten Sie einen Link als regulären Link behalten? Fügen Sie data-namedrop-processed="true" hinzu:

<a href="https://namedrop.io/johndoe" data-namedrop-processed="true">Regulärer Link</a>

Sie können <namedrop>-Tags und automatisch erkannte Links auf derselben Seite verwenden — sie funktionieren gemeinsam ohne Konflikte.

Anpassung

Möchten Sie ein saubereres Erscheinungsbild ohne das NameDrop-Icon neben Namen? Fügen Sie das Attribut data-hide-icon zum Script-Tag hinzu:

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

Namen erscheinen dann nur als unterstrichener Text. Beim Hovern erscheint ein kompakter Audio-Player mit Abspielen/Pausieren, einer Wellenform-Visualisierung und Lautstärkeregelung. Der Player passt sich automatisch dem hellen oder dunklen Farbschema Ihrer Website an.

Plattform-Leitfaden

Plattform	So fügen Sie das Script hinzu
Statisches HTML	Direkt in Ihr HTML einfügen
WordPress	Theme-Header oder ein Plugin wie „Insert Headers and Footers”
Squarespace	Einstellungen → Code-Einbettung
Wix	Website-Einstellungen → Benutzerdefinierter Code
Webflow	Projekteinstellungen → Benutzerdefinierter Code
Shopify	`theme.liquid` bearbeiten oder eine benutzerdefinierte App verwenden
React / Next.js	`<Script>`-Komponente verwenden oder zu Ihrer HTML-Vorlage hinzufügen
Angular / Vue	Zu `index.html` hinzufügen

FAQ

Verlangsamt es meine Website?

Nein. Das Script wird mit defer geladen (nicht blockierend), ist ca. 22 KB groß und Audio wird nur abgerufen, wenn jemand auf Abspielen klickt.

Funktioniert es mit Single-Page-Apps oder dynamisch geladenen Inhalten?

Ja. Das Plugin überwacht neue Inhalte, die nach dem Laden zur Seite hinzugefügt werden, sodass es mit React, Vue, Angular und AJAX-Inhalten funktioniert.

Was passiert, wenn ein Profil noch keine Aufnahme hat?

Der Abspiel-Button zeigt einen kurzen Fehlerstatus. Der Namenstext bleibt sichtbar und funktional.

Sendet das Plugin Anfragen beim Seitenladen?

Es wird kein Audio vorab abgerufen. API-Anfragen erfolgen nur, wenn jemand auf Abspielen klickt.

Benötigen Sie Hilfe?

Kontaktieren Sie uns unter hello@namedrop.io — wir helfen Ihnen gerne beim Setup.