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

¿Quieres mejorar tu atención al cliente y la interacción añadiendo la IA Conversacional de ElevenLabs a tu sitio web de Wix? Estás en el lugar adecuado. Esta guía te explica todo el proceso paso a paso y te ayuda a evitar los problemas más habituales.

Antes de empezar

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

1. Cuenta Wix Premium: la inserción de JavaScript personalizado solo está disponible en los planes Premium.
2. Cuenta de ElevenLabs: necesitas una cuenta de ElevenLabs para crear agentes de voz con IA conversacionales. Regístrate aquí.
3. Acceso al Editor de Wix con el modo desarrollador activado: necesitarás el modo desarrollador 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 IA Conversacional.
3. Configura tu agente conversacional y copia el código de inserción de JavaScript proporcionado.

Paso 2: activa el modo desarrollador en Wix

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

Nota: si no ves el modo desarrollador, asegúrate de estar usando el Editor completo de Wix y no Wix ADI (Inteligencia de Diseño Artificial).

Paso 3: añade el código de inserción de 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 correspondiente.
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 los cambios.

Problemas habituales y solución de problemas

¿Tienes algún problema al añadir un widget de IA Conversacional a tu sitio web de Wix? Sigue estos sencillos pasos para resolverlo.

Problema 1: el widget se desconecta o no 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 se haya eliminado de la lista de permitidos o esté configurada correctamente en el panel de control de ElevenLabs.

Problema 2: JavaScript no funciona

• Causa: el código JavaScript no se ha añadido correctamente.
• Solución: comprueba de nuevo que JavaScript esté pegado en el campo correcto de Código personalizado.

Problema 3: plan gratuito de Wix

• Causa: la inserción de JavaScript personalizado no es compatible con los planes gratuitos de Wix.
• Solución: actualiza a un plan Wix Premium.

Consejos avanzados

Si quieres ofrecer la mejor experiencia posible a quienes visitan tu web, consulta estas prácticas avanzadas recomendadas. 

Ajustar la lista de permitidos

Si tu widget sigue sin funcionar 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 de tu agente de IA Conversacional.
3. Asegúrate de que el dominio de tu sitio web se haya añadido correctamente. Si el problema persiste, prueba a eliminar tu dominio de la lista de permitidos y vuelve a probar.

Pruebas en un dominio activo

Es posible que el widget no funcione correctamente en el modo de vista previa de Wix. Publica tu sitio y pruébalo en el dominio activo para asegurarte de que funciona como esperas.

Pruebas de compatibilidad entre navegadores

Cuando tu widget esté activo, pruébalo en varios navegadores, como Chrome, Firefox, Edge y Safari. Algunas funciones pueden comportarse de forma distinta según el navegador debido a diferencias en la forma en que se procesa JavaScript.

1. Abre tu sitio web en cada navegador.
2. Interactúa con el widget y comprueba su capacidad de respuesta.
3. Busca problemas como estilos dañados o errores de funcionamiento. Si surgen problemas, revisa tu código JavaScript o contacta con el equipo de soporte de ElevenLabs para recibir orientación.

Adaptación a dispositivos móviles

Comprueba que el widget funcione sin problemas en dispositivos móviles, ya que muchos usuarios acceden a sitios web desde smartphones o tablets.

1. Usa el Editor móvil de Wix para obtener una vista previa del diseño móvil de tu sitio.
2. Prueba el widget en dispositivos físicos para confirmar que funciona bien y es fácil de usar.
3. Comprueba si hay elementos superpuestos o problemas de formato. Si necesitas hacer ajustes, usa 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 esperas, las herramientas para desarrolladores del navegador pueden ayudarte a identificar problemas.

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

Conclusión

Integrar el widget de IA Conversacional de ElevenLabs en Wix requiere una configuración cuidadosa, pero si sigues los pasos adecuados podrás ponerlo en marcha enseguida. Asegúrate de tener un plan Wix Premium, sigue los pasos anteriores y resuelve los problemas habituales cuando sea necesario. Si tienes más problemas, ponte en contacto con el equipo de soporte de ElevenLabs soporte para recibir ayuda.

O, si todavía no lo has hecho, regístrate hoy en la plataforma de agentes de IA conversacional.