Plugin para sitios web

El plugin para sitios web de NameDrop permite a los visitantes escuchar cómo se pronuncia un nombre al pasar el cursor sobre él — directamente en tu sitio web. Es una sola etiqueta de script, ~22 KB, sin dependencias, y funciona en cualquier plataforma.

Véalo en acción

Visita keshavmalani.com para ver el plugin para sitios web en funcionamiento. Pasa el cursor sobre el nombre para escuchar la pronunciación.

Inicio rápido

Agrega esta línea al <head> de tu sitio web o antes de la etiqueta de cierre </body> — eso es todo:

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

Una vez cargado el script, tienes dos formas de agregar nombres pronunciables a tus páginas.

Opción A: Usa etiquetas `<namedrop>` (recomendado)

Envuelve cualquier nombre en una etiqueta <namedrop> para hacerlo interactivo. Esto te da control total sobre qué nombres se mejoran.

Nombres personales:

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

Nombres de marca:

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

Ejemplo de página completa:

<!doctype html>
<html>
  <head>
    <title>Nuestro equipo</title>
    <script src="https://namedrop.io/script/namedrop-integration.min.js" defer></script>
  </head>
  <body>
    <h1>Conoce a nuestro equipo</h1>
    <p>Nuestro CEO, <namedrop username="johndoe">John Doe</namedrop>, fundó la empresa en 2020.</p>
    <p>Somos socios orgullosos de <namedrop brandUsername="nike">Nike</namedrop>.</p>
  </body>
</html>

Opción B: Detección automática de enlaces

¿Ya enlazas a perfiles de NameDrop en tu sitio? El plugin detectará esos enlaces automáticamente y los convertirá en reproductores de audio — sin necesidad de cambios en el marcado.

<!-- Estos enlaces se convierten automáticamente en reproductores de audio -->
<a href="https://namedrop.io/johndoe">John Doe</a>
<a href="https://namedrop.io/brands/nike">Nike</a>

Los enlaces directos a archivos de audio (.mp3, .wav, .m4a, .ogg, .webm, .aac, .flac) también son compatibles y muestran un reproductor sin el icono de perfil.

¿Quieres mantener un enlace como enlace normal? Agrega data-namedrop-processed="true":

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

Puedes usar etiquetas <namedrop> y enlaces detectados automáticamente en la misma página — funcionan juntos sin conflictos.

Personalización

¿Quieres un aspecto más limpio sin el icono de NameDrop junto a los nombres? Agrega el atributo data-hide-icon a la etiqueta del script:

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

Los nombres aparecerán solo como texto subrayado. Al pasar el cursor, aparece un reproductor de audio compacto con play/pausa, una visualización de forma de onda y control de volumen. El reproductor se adapta automáticamente al esquema de colores claro u oscuro de tu sitio web.

Guía por plataforma

Plataforma	Cómo añadir el script
HTML estático	Agrégalo directamente a tu HTML
WordPress	Encabezado del tema, o un plugin como “Insert Headers and Footers”
Squarespace	Configuración → Inyección de código
Wix	Configuración del sitio → Código personalizado
Webflow	Configuración del proyecto → Código personalizado
Shopify	Edita `theme.liquid` o usa una app personalizada
React / Next.js	Usa el componente `<Script>` o agrégalo a tu plantilla HTML
Angular / Vue	Agrégalo a `index.html`

Preguntas frecuentes

¿Ralentiza mi sitio web?

No. El script se carga con defer (sin bloquear), pesa ~22 KB y el audio solo se obtiene cuando alguien hace clic en reproducir.

¿Funciona con aplicaciones de una sola página o contenido cargado dinámicamente?

Sí. El plugin observa el nuevo contenido añadido a la página después de la carga, por lo que funciona con React, Vue, Angular y contenido AJAX.

¿Qué pasa si un perfil aún no tiene grabación?

El botón de reproducción muestra un breve estado de error. El texto del nombre permanece visible y funcional.

¿El plugin hace solicitudes al cargar la página?

No se precarga ningún audio. Las solicitudes a la API solo ocurren cuando alguien hace clic en reproducir.

¿Necesitas ayuda?

Contáctanos en hello@namedrop.io — estaremos encantados de ayudarte con la configuración.