Antes de usar el reproductor Text to Speech de VoiceDropper en tu sitio web, debes instalar la librería JavaScript de VoiceDropper. Esta librería carga el reproductor, habilita la reproducción y activa todas las funcionalidades interactivas.
VoiceDropper puede instalarse de diferentes formas según tu plataforma y flujo de trabajo. Por ejemplo, puedes añadirlo manualmente con una etiqueta <script> o utilizar integraciones específicas como el plugin de WordPress.
Importante: si la librería de VoiceDropper no está instalada, cualquier embed, shortcode o widget de Text to Speech no funcionará. Asegúrate siempre de que el script esté cargado correctamente antes de usar cualquier componente.
Instalación manual
La instalación manual es la forma más flexible de integrar VoiceDropper. Es ideal para sitios personalizados, sitios estáticos, frameworks o integraciones avanzadas.
Para instalar VoiceDropper manualmente, copia la URL de tu script desde la sección Embed del panel de tu proyecto o desde el panel de generación de audio.
Una vez tengas la URL, inclúyela en tu HTML dentro de <head> o antes del cierre de </body>.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>Después de añadir el script, puedes integrar el reproductor en cualquier parte de la página usando HTML.
Plugin de WordPress
El plugin oficial de VoiceDropper para WordPress instala y carga automáticamente la librería de VoiceDropper. No necesitas editar el tema ni añadir manualmente el script de instalación.
1. Instala y activa el plugin
Desde el escritorio de WordPress, ve a Plugins → Añadir nuevo plugin, busca VoiceDropper y, a continuación, instálalo y actívalo.
2. Crea un proyecto para tu sitio web
Cada sitio web debe estar conectado a su propio proyecto de VoiceDropper y a una client key única. En VoiceDropper, crea o abre el proyecto dedicado a este sitio, entra en la sección Instalación y copia la Client key.
3. Conecta WordPress
Abre VoiceDropper desde el menú de administración de WordPress, pega la client key y guárdala. Una vez conectado, el plugin cargará automáticamente la librería correcta de VoiceDropper en todo el sitio público.
4. Elige cómo integrar VoiceDropper
Después de conectar el proyecto, puedes publicar audio en WordPress de dos formas:
- Speech publicado: crea y publica un speech en VoiceDropper y pega su etiqueta embed en un bloque HTML personalizado de WordPress usando el Speech ID generado.
- Auto Mode: configura Auto Mode para el proyecto y define el elemento de la página que VoiceDropper debe leer. La experiencia de audio se generará automáticamente a partir de ese objetivo.
Ejemplo de Speech publicado
<voicedropper data-speech="[YOUR_SPEECH_ID]"></voicedropper>Ejemplo de Auto Mode
<voicedropper data-mode="auto" data-content-target="#article"></voicedropper>Shopify
Puedes instalar VoiceDropper editando el código de tu tema.
1. Abre el panel de Shopify
Accede a tu panel de administración.
2. Edita el código del tema
Ve a Tienda online → Temas, haz clic en los tres puntos y selecciona Editar código.
3. Abre el archivo principal
Abre theme.liquid dentro de la carpeta Layout.
4. Añade el script
Pégalo antes de </head>.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>5. Guarda los cambios
Guarda y verifica tu tienda.
Webflow
Puedes instalar VoiceDropper usando código personalizado.
1. Abre la configuración del proyecto
Accede a tu proyecto en Webflow.
2. Añade el script
Ve a Custom Code y pega el script en el campo Head Code.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>3. Publica el sitio
Guarda y publica los cambios.
Wix
Puedes instalar VoiceDropper mediante código personalizado.
1. Abre el panel de Wix
Accede a la configuración de tu sitio.
2. Añade código personalizado
Ve a Configuración → Código personalizado y haz clic en Añadir código.
3. Inserta el script
Pégalo en Head y aplícalo a Todas las páginas.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>4. Publica
Publica el sitio para activar VoiceDropper.
Squarespace
Puedes instalar VoiceDropper usando Code Injection.
1. Abre la configuración
Ve a Configuración → Avanzado → Code Injection.
2. Añade el script
Pégalo en la sección Header.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>3. Guarda
Guarda los cambios.
PrestaShop
Edita la plantilla del tema para añadir el script.
1. Accede a los archivos
Usa FTP o el gestor de archivos de tu hosting.
2. Abre el archivo
themes/YOUR_THEME/templates/_partials/head.tpl
3. Inserta el script
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>4. Limpia la caché
Vacía la caché y recarga el sitio.
Magento
1. Abre el panel
Ve a Contenido → Diseño → Configuración.
2. Edita el tema
Haz clic en Editar.
3. Añade el script
En HTML Head → Scripts and Style Sheets.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>4. Guarda y limpia caché
Guarda los cambios.
Joomla
1. Accede al panel
2. Ve a plantillas
Sistema → Plantillas
3. Abre index.php
4. Inserta el script
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>5. Guarda y verifica
Drupal
1. Accede al panel
2. Localiza el tema
themes/custom/YOUR_THEME/3. Edita la plantilla
html.html.twig o page.html.twig
4. Inserta el script
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>5. Limpia la caché
Configuración → Desarrollo → Rendimiento
6. Verifica
Comprueba que el reproductor funciona correctamente.