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

La IA Conversacional de ElevenLabs es una potente herramienta de atención al cliente para crear experiencias interactivas basadas en IA que aumentan la interacción. Si tienes una web de WordPress, puedes integrar fácilmente HTML y JavaScript personalizados, incluidas funciones dinámicas como la IA Conversacional de ElevenLabs.

En esta guía te mostramos cómo añadir el widget de IA Conversacional a tu sitio de WordPress mediante bloques de HTML personalizado para páginas concretas e inyección de código para funciones globales.

Antes de empezar

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

1. Plan de WordPress: para usuarios de WordPress.com, se necesita un plan Business o Commerce para añadir JavaScript personalizado. 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: resulta útil estar familiarizado con añadir bloques, editar páginas o usar plugins.

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 IA Conversacional.
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 concreta con bloques de HTML personalizado

Para mostrar el widget en una página concreta, utiliza el bloque de HTML personalizado de WordPress.

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

Paso 3: añade el script globalmente mediante un plugin o los ajustes del tema

Para asegurarte de que el widget funciona correctamente, debes incluir el fragmento < script > de forma global.

Opción A: usar un plugin (recomendado para quienes no son desarrolladores)

1. Instala y activa un plugin como Header Footer Code Manager.
2. Ve a los ajustes del plugin y crea un fragmento de código nuevo.
3. Pega el fragmento < script > en la sección Footer.
4. Configura el fragmento para que se ejecute en All Pages.
5. Guarda los cambios.

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

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

Paso 4: publica y prueba

1. Visita la página en la que añadiste el widget para confirmar que aparece y funciona correctamente.
2. Prueba el widget en varios dispositivos y navegadores para asegurarte de que funciona sin problemas.

Problemas habituales y solución de problemas

¿Te cuesta poner en marcha el widget? Estos consejos pueden ayudarte. 

Problema 1: el widget no se muestra

• Causa: faltan fragmentos de < script > o < div >, o están mal colocados.
• Solución: comprueba que < script > se haya añadido globalmente y que < div > esté colocado en la página.

Problema 2: el widget está desalineado

• Causa: alineación del bloque o falta de estilos.
• Solución: usa las herramientas de alineación de bloques de WordPress o añade CSS personalizado para colocar correctamente el widget.

Problema 3: conflictos entre 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 conseguir que el widget funcione como quieres. 

• Personalizar el widget: usa la sección Personalizar > CSS adicional de WordPress para dar estilo al widget y asegurarte de que encaja con el diseño de tu sitio.
• Pruebas en distintos dispositivos: prueba el widget en ordenadores, tabletas y dispositivos móviles para garantizar una experiencia de usuario coherente.
• Widgets específicos por página: si quieres que el widget aparezca solo en páginas concretas, evita añadir el fragmento < script > globalmente. En su lugar, inclúyelo en un plugin o bloque destinado a esas páginas.

Reflexiones finales

Añadir el widget de IA Conversacional de ElevenLabs a tu web de WordPress es una forma eficaz de interactuar con visitantes mediante experiencias basadas en IA. Tanto si lo insertas en una sola página como en todo tu sitio, WordPress te ofrece las herramientas necesarias para integrarlo sin problemas.

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

O, si aún no lo has hecho, regístrate hoy en la plataforma Agents de ElevenLabs para empezar el proceso.