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

¿Quieres llevar tu sitio web de Ghost al siguiente nivel? ElevenLabs’ Conversational AI transforma la interacción con clientes. Al añadir el Conversational AI de ElevenLabs a tu plataforma Ghost, puedes ofrecer soporte al cliente interactivo y realista que acerca a tu audiencia a tu marca.

Antes de empezar

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

1. Un sitio web de Ghost: Necesitas un plan de pago o una instancia de Ghost autogestionada. JavaScript personalizado no es compatible con el plan gratuito de Ghost.
2. Acceso al panel de administración de Ghost: Necesitarás acceso a la configuración de Inyección de Código o al Editor.
3. Una cuenta de ElevenLabs: Configura un agente de Conversational AI y copia su código de inserción JavaScript.

Guía paso a paso

Opción 1: Añadir el widget globalmente usando Inyección de Código

Si quieres que el widget aparezca en todas las páginas de tu sitio web, utiliza la función de Inyección de Código de Ghost.

Paso 1: Prepara tu widget

1. Inicia sesión en tu cuenta de ElevenLabs.
2. Ve a la sección de Conversational AI y configura tu agente.
3. Copia el código de inserción JavaScript proporcionado.

Paso 2: Accede a la configuración de Inyección de Código

1. Inicia sesión en tu Panel de Administración de Ghost.
2. Ve a Configuración > Inyección de Código.

Paso 3: Inserta el código JavaScript

1. Pega el código JavaScript copiado en el campo de Pie de Página del Sitio.
2. Guarda tus cambios.

Paso 4: Prueba la integración

1. Abre tu sitio web de Ghost para asegurarte de que el widget aparece y funciona como se espera.
2. Si no se muestra, verifica la colocación del código y la configuración de ElevenLabs.

Opción 2: Añadir el widget a páginas o publicaciones específicas usando el signo más

Si prefieres que el widget aparezca solo en ciertas páginas o publicaciones, puedes insertarlo directamente en el contenido usando el signo más en el Editor de Ghost.

Paso 1: Prepara tu widget

1. Copia el código de inserción JavaScript desde tu cuenta de ElevenLabs.

Paso 2: Edita una publicación o página en Ghost

1. Abre el Editor de Ghost para la página o publicación donde quieres añadir el widget.
2. Haz clic en el signo más (+) para abrir el menú de bloques.

Paso 3: Inserta un Bloque HTML

1. Selecciona HTML de las opciones de bloque.
2. Pega el código JavaScript en el bloque HTML.

Paso 4: Publica y prueba

1. Guarda y publica la página o publicación.
2. Abre la página para confirmar que el widget se muestra y funciona como se espera.

Problemas comunes y solución de problemas

¿La integración no funciona como esperabas? Sigue estos pasos para resolver los problemas que enfrentas.

Problema 1: El widget no se carga

• Causa: El código JavaScript está mal añadido o incompleto.
• Solución: Verifica la colocación del código y confirma que tu agente de ElevenLabs está correctamente configurado.

Problema 2: Conflictos de scripts

• Causa: Otros scripts personalizados en la configuración de Inyección de Código pueden estar en conflicto con el widget.
• Solución: Desactiva temporalmente otros scripts para probar conflictos. Vuelve a añadirlos uno por uno para identificar el problema.

Consejos avanzados

¿Buscas más formas de personalizar el widget? Consulta los consejos a continuación para obtener ayuda.

• Personalización de la ubicación del widget: Usa CSS para ajustar la apariencia o posición del widget cuando se añade a través de Inyección de Código o el bloque HTML. Si quieres que el widget aparezca en una ubicación consistente (por ejemplo, pie de página o barra lateral), edita los archivos de tema de Ghost. Añade el código de inserción JavaScript al archivo default.hbs, luego vuelve a subir tu tema.
• Adaptabilidad móvil: Prueba el widget en dispositivos móviles para asegurarte de que se escala y funciona correctamente. Usa la vista previa responsiva de Ghost o prueba directamente en dispositivos físicos.
• Pruebas en diferentes navegadores: Verifica que el widget funcione en navegadores populares, incluidos Chrome, Firefox, Safari y Edge, para asegurar la consistencia para todos los usuarios.
• Depuración de problemas de JavaScript: Usa las herramientas de desarrollo del navegador (por ejemplo, Chrome DevTools) para inspeccionar cualquier error en la Consola. Soluciona problemas como dependencias faltantes o conflictos de scripts.

Reflexiones finales

Integrar el widget de Conversational AI de ElevenLabs en Ghost es sencillo y flexible, permitiéndote mejorar la interactividad de tu sitio web con un esfuerzo mínimo. Si encuentras problemas, revisa los pasos, prueba a fondo o contacta con ElevenLabs soporte si es necesario.

Regístrate para Conversational AI hoy mismo para comenzar.