Website Plugin

Esta página aún no está disponible en tu idioma.

The NameDrop Website Plugin lets visitors hear how a name is pronounced by hovering over it — right on your website. It’s a single script tag, ~22 KB, zero dependencies, and works on any platform.

See it in action

Visit keshavmalani.com to see the Website Plugin live. Hover over the name to hear the pronunciation.

Quick start

Add this line to your website’s <head> or before the closing </body> tag — that’s it:

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

Once the script is loaded, you have two ways to add pronounceable names to your pages.

Option A: Use `<namedrop>` tags (recommended)

Wrap any name in a <namedrop> tag to make it interactive. This gives you full control over which names are enhanced.

Personal names:

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

Brand names:

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

Full page example:

<!doctype html>
<html>
  <head>
    <title>Our Team</title>
    <script src="https://namedrop.io/script/namedrop-integration.min.js" defer></script>
  </head>
  <body>
    <h1>Meet Our Team</h1>
    <p>Our CEO, <namedrop username="johndoe">John Doe</namedrop>, founded the company in 2020.</p>
    <p>We are proud partners with <namedrop brandUsername="nike">Nike</namedrop>.</p>
  </body>
</html>

Option B: Automatic link detection

Already linking to NameDrop profiles on your site? The plugin will detect those links automatically and convert them into audio players — no markup changes needed.

<!-- These links become audio players automatically -->
<a href="https://namedrop.io/johndoe">John Doe</a>
<a href="https://namedrop.io/brands/nike">Nike</a>

Direct audio file links (.mp3, .wav, .m4a, .ogg, .webm, .aac, .flac) are also supported and show a player without the profile icon.

Want to keep a link as a regular link? Add data-namedrop-processed="true":

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

You can use both <namedrop> tags and auto-detected links on the same page — they work together without conflicts.

Customization

Want a cleaner look without the NameDrop icon next to names? Add the data-hide-icon attribute to the script tag:

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

Names will appear as underlined text only. On hover, a compact audio player appears with play/pause, a waveform visualization, and volume control. The player automatically adapts to your website’s light or dark color scheme.

Platform guide

Platform	How to add the script
Static HTML	Add directly to your HTML
WordPress	Theme header, or a plugin like “Insert Headers and Footers”
Squarespace	Settings → Code Injection
Wix	Site Settings → Custom Code
Webflow	Project Settings → Custom Code
Shopify	Edit `theme.liquid` or use a custom app
React / Next.js	Use the `<Script>` component or add to your HTML template
Angular / Vue	Add to `index.html`

FAQ

Does it slow down my website?

No. The script loads with defer (non-blocking), is ~22 KB, and audio is only fetched when someone clicks play.

Does it work with single-page apps or dynamically loaded content?

Yes. The plugin watches for new content added to the page after load, so it works with React, Vue, Angular, and AJAX content.

What if a profile doesn’t have a recording yet?

The play button shows a brief error state. The name text stays visible and functional.

Does the plugin make requests on page load?

No audio is pre-fetched. API requests only happen when someone clicks play.