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

¿Buscas mejorar tu atención al cliente y la interacción añadiendo el Conversational AI de ElevenLabs a tu sitio web de Wix? Has llegado al lugar correcto. Esta guía te lleva paso a paso por todo el proceso, ayudándote a evitar errores comunes.

Antes de empezar

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

1. Cuenta premium de Wix: Insertar JavaScript personalizado solo está disponible en planes Premium.
2. Cuenta de ElevenLabs: Necesitas una cuenta de ElevenLabs para crear agentes de Conversational AI. Regístrate aquí.
3. Acceso al Editor de Wix con el Modo Dev habilitado: Necesitarás el Modo Dev para añadir código personalizado a tu sitio.

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 conversacional y copia el código de inserción JavaScript proporcionado.

Paso 2: Habilita el Modo Dev en Wix

1. Abre tu sitio de Wix en el Editor.
2. Haz clic en Modo Dev en el menú superior para habilitar funciones avanzadas como añadir código personalizado.

Nota: Si el Modo Dev no es visible, asegúrate de estar usando el Editor completo de Wix, no el Wix ADI (Artificial Design Intelligence).

Paso 3: Añade el código de inserción JavaScript

1. Ve a Configuración > Código Personalizado en el Editor de Wix.
2. Haz clic en + Añadir Código Personalizado.
3. Pega el código JavaScript de ElevenLabs en el campo proporcionado.
4. En Aplicar Código A, selecciona Todas las Páginas (o elige una página específica para el widget).
5. Guarda y publica tus cambios.

Problemas comunes y solución de problemas

¿Has encontrado un problema al añadir un widget de Conversational AI a tu sitio web de Wix? Sigue estos sencillos pasos para resolver tu problema.

Problema 1: El widget se desconecta o no se carga

• Causa: Configuración incorrecta de la lista de permitidos o uso de un plan gratuito de Wix.
• Solución: Asegúrate de que la URL de tu sitio esté eliminada de la lista de permitidos o correctamente configurada en el panel de ElevenLabs.

Problema 2: JavaScript no funciona

• Causa: El código JavaScript no se añadió correctamente.
• Solución: Verifica que el JavaScript esté pegado en el campo correcto bajo Código Personalizado.

Problema 3: Plan gratuito de Wix

• Causa: Insertar JavaScript personalizado no está permitido en planes gratuitos de Wix.
• Solución: Actualiza a un plan Premium de Wix.

Consejos avanzados

Si buscas crear la mejor experiencia posible para los visitantes de tu sitio web, consulta estas prácticas avanzadas.

Ajustar la lista de permitidos

Si tu widget aún no funciona después de insertar el código, sigue estos pasos:

1. Inicia sesión en tu cuenta de ElevenLabs.
2. Ve a la configuración de la lista de permitidos para tu agente de Conversational AI.
3. Asegúrate de que el dominio de tu sitio web esté correctamente añadido. Si los problemas persisten, intenta eliminar tu dominio de la lista de permitidos y vuelve a probar.

Prueba en un dominio en vivo

El widget puede no funcionar correctamente en el modo de vista previa de Wix. Publica tu sitio y pruébalo en el dominio en vivo para asegurarte de que funcione como se espera.

Pruebas de compatibilidad entre navegadores

Una vez que tu widget esté en vivo, pruébalo en varios navegadores, como Chrome, Firefox, Edge y Safari. Algunas funciones pueden comportarse de manera diferente en cada navegador debido a variaciones en cómo se maneja JavaScript.

1. Abre tu sitio web en cada navegador.
2. Interactúa con el widget y verifica su capacidad de respuesta.
3. Busca problemas como estilos rotos o errores en la funcionalidad. Si surgen problemas, revisa tu código JavaScript o contacta con el soporte de ElevenLabs para obtener orientación.

Adaptabilidad móvil

Verifica que el widget funcione sin problemas en dispositivos móviles, ya que muchos usuarios acceden a sitios web a través de smartphones o tabletas.

1. Usa el Editor Móvil de Wix para previsualizar el diseño móvil de tu sitio.
2. Prueba el widget en dispositivos físicos para confirmar su funcionalidad y facilidad de uso.
3. Revisa si hay elementos superpuestos o problemas de formato. Si se necesitan ajustes, utiliza las herramientas de diseño móvil de Wix para optimizar la ubicación y el tamaño.

Consejos para depurar JavaScript

Si tu widget no funciona como se espera, las herramientas de desarrollador del navegador pueden ayudar a identificar problemas.

1. Abre tu sitio en un navegador (se recomienda Chrome).
2. Haz clic derecho en cualquier parte de la página y selecciona Inspeccionar para abrir DevTools.
3. Ve a la pestaña Consola y busca mensajes de error relacionados con el widget.
4. Si ves errores, verifica el código de inserción JavaScript y asegúrate de que todas las URLs necesarias estén añadidas a la lista de permitidos. Este método también puede resaltar dependencias faltantes u otros problemas que impiden que el widget funcione correctamente.

Reflexiones finales

Integrar el widget de Conversational AI de ElevenLabs en Wix requiere una configuración cuidadosa, pero con los pasos correctos, puedes tenerlo funcionando en poco tiempo. Asegúrate de tener un plan Premium de Wix, sigue los pasos anteriores y soluciona los problemas comunes según sea necesario. Si encuentras más problemas, contacta con el soporte de ElevenLabs para obtener ayuda.

O, si aún no lo has hecho, regístrate para Conversational AI hoy.