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

¿Quieres mejorar la experiencia de tus clientes? IA conversacional puede ayudarte. Al añadir la IA conversacional de ElevenLabs a tu sitio web de Webflow, visitantes podrán mantener conversaciones naturales como si estuvieran hablando realmente con alguien de tu equipo. 

En esta guía, te explicaremos cómo añadir el widget de IA conversacional de ElevenLabs a tu sitio web de Webflow e integrarlo mediante HTML personalizado y JavaScript.

Antes de empezar

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

1. Cuenta de Webflow: necesitas un Workspace Core, Growth, Agency o Freelancer activo, o un Site Plan, para acceder al Embed Element.
2. Cuenta de ElevenLabs: configura tu agente de voz IA conversacional en ElevenLabs y copia el código de inserción proporcionado, que incluye fragmentos de < script > y < div >.
3. Conocimientos del Designer de Webflow: es útil tener conocimientos básicos sobre cómo añadir y editar Embed Elements en Webflow.

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. 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 en la página.

Paso 2: Añade el widget a una página de Webflow

Para mostrar el widget en una página concreta, usa el Embed Element.

1. Abre tu proyecto de Webflow en el Designer.
2. Ve a la página en la que quieres que aparezca el widget.
3. En el panel Elements, arrastra el Embed Element a la ubicación que quieras de la página.
4. En el editor de código del Embed Element, pega el fragmento de < div > del código de inserción de ElevenLabs.
5. Haz clic en Save & Close para aplicar los cambios.

Nota: el Embed Element actúa como marcador de posición para tu widget en el Designer. El widget real solo se mostrará cuando publiques el sitio.

Paso 3: Añade el script de forma global

Para que el widget funcione correctamente, debes incluir el fragmento de < script > de forma global en tu sitio.

1. Ve a tu Dashboard de Webflow y abre Project Settings.
2. Ve a la pestaña Custom Code.
3. Pega el fragmento de < script > en la sección Footer Code. Así te aseguras de que el script se cargue en todas las páginas donde se use el widget.
4. Haz clic en Save Changes.

Paso 4: Publica y prueba

1. Publica tu sitio en el dominio de pruebas de Webflow o en tu dominio personalizado.
2. Abre tu sitio en un navegador para comprobar que el widget aparece y funciona como esperas.

Importante: el código personalizado no se muestra en el Designer de Webflow. Debes publicar tu sitio para ver el widget en funcionamiento.

Problemas habituales y soluciones

¿Tienes problemas para configurar la integración? No te preocupes: estos consejos deberían ayudarte.

1. El widget no aparece

• Causa: faltan fragmentos de < script > o < div >, o están mal colocados.
• Solución: asegúrate de que el fragmento de < script > esté en la sección Footer Code y de que el de < div > esté correctamente colocado en un Embed Element.

2. El widget está desalineado

• Causa: el Embed Element está mal colocado o tiene un estilo incorrecto.
• Solución: usa el Style Panel de Webflow para ajustar las dimensiones y la alineación del Embed Element.

3. Errores

• Causa: conflictos con otros scripts o restricciones del navegador.
• Solución: usa la consola de desarrollador del navegador para identificar y corregir errores de JavaScript.

Consejos avanzados

Si quieres personalizar el widget, probarlo en distintos dispositivos o reutilizarlo en varias páginas, esto es lo que necesitas saber.

• Personalizar el widget: usa el Style Panel de Webflow o CSS personalizado para ajustar la apariencia del widget, como el tamaño, la alineación o los colores.
• Pruebas en distintos dispositivos: usa las herramientas de diseño responsive de Webflow para asegurarte de que el widget funcione correctamente en ordenadores, tablets y dispositivos móviles.
• Reutilizar el widget: guarda el Embed Element como Component si tienes pensado usar el widget en varias páginas. Así mantendrás un estilo uniforme y será más fácil de gestionar.

Conclusiones

Integrar el widget de IA conversacional de ElevenLabs en Webflow es sencillo gracias a las funciones Embed Element y Custom Code de la plataforma. Tanto si quieres mejorar la interacción en una sola página como en todo tu sitio, sigue los pasos anteriores para empezar.

Si necesitas más ayuda, no dudes en contactar con el equipo de soporte de ElevenLabs o consultar los foros de la comunidad de Webflow para obtener más orientación. 

Si aún no lo has hecho, regístrate en la plataforma de agentes de IA de ElevenLabs hoy mismo para iniciar el proceso. 

Preguntas frecuentes