Cómo añadir el widget de Conversational AI de ElevenLabs a tu sitio web de WordPress

El Conversational AI de ElevenLabs es una potente herramienta de atención al cliente para crear experiencias interactivas impulsadas por IA que aumentan la interacción. Si tienes un sitio web de WordPress, puedes integrar fácilmente HTML y JavaScript personalizados, incluyendo funciones dinámicas como el Conversational AI de ElevenLabs.

En esta guía, te mostraremos cómo añadir el widget de Conversational AI a tu sitio de WordPress usando Bloques HTML Personalizados para páginas específicas e Inyección de Código para funcionalidad global.

Conversational AI

Dale voz a tus agentes en la web, dispositivos móviles o via telefonía en unos pocos minutos. IA Conversacional con baja latencia, capacidad de configuración completa y escalabilidad perfecta.

Antes de empezar

Antes de comenzar, asegúrate de tener lo siguiente:

1. Plan de WordPress: Para usuarios de WordPress.com, se requiere un plan Business o Commerce para añadir JavaScript personalizado. Los usuarios de WordPress autohospedado pueden añadir código sin estas restricciones.
2. Cuenta de ElevenLabs: Configura tu agente de voz IA en ElevenLabs y copia el código de inserción, que incluye fragmentos de < script > y < div >.
3. Conocimientos básicos de WordPress: Familiaridad con la adición de bloques, edición de páginas o uso de plugins es útil.

Guía paso a paso

Paso 1: Prepara tu widget de ElevenLabs

1. Inicia sesión en tu cuenta de ElevenLabs.
2. Ve a la sección de Conversational AI.
3. Configura tu agente de IA y copia el código de inserción, que incluye:
4. • Un fragmento de < script > para cargar la funcionalidad del widget.
   • Un fragmento de < div > para definir dónde aparecerá el widget.

Paso 2: Añade el widget a una página específica usando bloques HTML personalizados

Para mostrar el widget en una página específica, usa el Bloque HTML Personalizado de WordPress.

1. Inicia sesión en tu panel de WordPress.
2. Navega a Páginas y crea una nueva página o edita una existente.
3. Haz clic en el icono + para añadir un nuevo bloque.
4. Busca y selecciona HTML Personalizado de las opciones de bloque.
5. Pega el fragmento de < div > de tu código de inserción de ElevenLabs en el bloque.
6. Haz clic en Vista previa para confirmar que el widget se está renderizando correctamente.
7. Publica o actualiza la página para hacer los cambios en vivo.

Paso 3: Añade el script globalmente usando un plugin o configuraciones de tema

Para asegurar que el widget funcione correctamente, necesitas incluir el fragmento de < script > globalmente.

Opción A: Usar un plugin (recomendado para no desarrolladores)

1. Instala y activa un plugin como Header Footer Code Manager.
2. Navega a la configuración del plugin y crea un nuevo fragmento de código.
3. Pega el fragmento de < script > en la sección de Footer.
4. Configura el fragmento para que se ejecute en Todas las Páginas.
5. Guarda tus cambios.

Opción B: Añadir el script directamente a tu tema

1. Ve a Apariencia > Editor de temas en tu panel de WordPress.
2. Abre el archivo footer.php de tu tema activo.
3. Pega el fragmento de < script > justo antes de la etiqueta de cierre < /body >.
4. Guarda el archivo.

Paso 4: Publica y prueba

1. Visita la página donde añadiste el widget para confirmar que aparece y funciona correctamente.
2. Prueba el widget en múltiples dispositivos y navegadores para asegurar que funcione sin problemas.

Problemas comunes y solución de problemas

¿Tienes dificultades para poner en marcha el widget? Estos consejos pueden ayudarte.

Problema 1: El widget no se muestra

• Causa: Fragmentos de < script > o < div > faltantes o mal ubicados.
• Solución: Verifica que el < script > esté añadido globalmente y el < div > esté colocado en la página.

Problema 2: El widget está desalineado

• Causa: Alineación de bloque o estilo faltante.
• Solución: Usa las herramientas de alineación de bloques de WordPress o añade CSS personalizado para posicionar el widget correctamente.

Problema 3: Conflictos con plugins

• Causa: Otros plugins interfieren con la ejecución de JavaScript.
• Solución: Desactiva los plugins uno por uno para identificar el conflicto.

Consejos avanzados

Consulta estos consejos para obtener más ayuda y hacer que el widget funcione como deseas. 

• Personalización del widget: Usa la sección Personalizar > CSS adicional de WordPress para estilizar el widget, asegurando que coincida con el diseño de tu sitio.
• Pruebas en diferentes dispositivos: Prueba el widget en dispositivos de escritorio, tabletas y móviles para asegurar una experiencia de usuario consistente.
• Widgets específicos de página: Si deseas que el widget aparezca solo en páginas específicas, evita añadir el fragmento de < script > globalmente. En su lugar, inclúyelo dentro de un plugin o bloque que apunte a esas páginas.

Reflexiones finales

Añadir el widget de Conversational AI de ElevenLabs a tu sitio web de WordPress es una forma efectiva de interactuar con los visitantes mediante interacciones impulsadas por IA. Ya sea que lo estés integrando en una sola página o en todo tu sitio, WordPress proporciona las herramientas necesarias para una integración sin problemas.

Sigue los pasos aquí descritos, prueba tu implementación a fondo y haz los ajustes necesarios. Si encuentras problemas, no dudes en contactar con el soporte de ElevenLabs para obtener ayuda.

O, si aún no lo has hecho, regístrate para ElevenLabs Plataforma de Agentes hoy mismo para comenzar el proceso.