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

¿Buscas mejorar la experiencia del cliente? Conversational AI puede ayudarte. Al añadir el Conversational AI de ElevenLabs a tu sitio Webflow, los visitantes pueden tener conversaciones naturales como si estuvieran hablando con un miembro de tu equipo.

En esta guía, te explicaremos el proceso para añadir el widget de Conversational AI de ElevenLabs a tu sitio Webflow, integrando el widget usando HTML y JavaScript personalizados.

Antes de comenzar

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

1. Cuenta de Webflow: Necesitas un Workspace activo de Core, Growth, Agency o Freelancer, o un Plan de Sitio, para acceder al Elemento de Inserción.
2. Cuenta de ElevenLabs: Configura tu agente de Conversational AI en ElevenLabs y copia el código de inserción proporcionado (que incluye fragmentos de < script > y < div >).
3. Familiaridad con el Diseñador de Webflow: Es útil tener un conocimiento básico de cómo añadir y editar Elementos de Inserción 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 Conversational AI.
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 específica, utiliza el Elemento de Inserción.

1. Abre tu proyecto de Webflow en el Diseñador.
2. Navega a la página donde quieres que aparezca el widget.
3. Desde el Panel de Elementos, arrastra el Elemento de Inserción a la ubicación deseada en la página.
4. En el editor de código del Elemento de Inserción, pega el fragmento de < div > del código de inserción de ElevenLabs.
5. Haz clic en Guardar y Cerrar para aplicar los cambios.

Nota: El Elemento de Inserción actúa como un marcador de posición para tu widget en el Diseñador. El widget real solo se renderizará cuando el sitio esté publicado.

Paso 3: Añade el script globalmente

Para asegurar que el widget funcione correctamente, necesitas incluir el fragmento de < script > globalmente en tu sitio.

1. Ve a tu Panel de Control de Webflow y abre la Configuración del Proyecto.
2. Navega a la pestaña de Código Personalizado.
3. Pega el fragmento de < script > en la sección de Código del Pie de Página. Esto asegura que el script se cargue en todas las páginas donde se use el widget.
4. Haz clic en Guardar Cambios.

Paso 4: Publica y prueba

1. Publica tu sitio en el dominio de prueba de Webflow o en tu dominio personalizado.
2. Abre tu sitio en un navegador para verificar que el widget aparece y funciona como se espera.

Importante: El código personalizado no se renderiza en el Diseñador de Webflow. Debes publicar tu sitio para ver el widget en vivo.

Problemas comunes y solución de problemas

¿Tienes problemas configurando la integración? No te preocupes, estos consejos te ayudarán.

1. El widget no se muestra

• Causa: Fragmentos de < script > o < div > faltantes o mal ubicados.
• Solución: Asegúrate de que el fragmento de < script > esté en la sección de Código del Pie de Página, y el fragmento de < div > esté correctamente colocado en un Elemento de Inserción.

2. Desalineación del widget

• Causa: Colocación o estilo incorrecto del Elemento de Inserción.
• Solución: Usa el Panel de Estilo de Webflow para ajustar las dimensiones y la alineación del Elemento de Inserción.

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 buscas personalizar el widget, probar en diferentes dispositivos o reutilizar el widget en varias páginas, esto es lo que necesitas saber.

• Personalización del widget: Usa el Panel de Estilo de Webflow o CSS personalizado para ajustar la apariencia del widget, como tamaño, alineación o colores.
• Pruebas en diferentes dispositivos: Usa las herramientas de diseño responsivo de Webflow para asegurar que el widget funcione sin problemas en dispositivos de escritorio, tabletas y móviles.
• Reutilización del widget: Guarda el Elemento de Inserción como un Componente si planeas usar el widget en varias páginas. Esto permite un estilo consistente y una gestión más sencilla.

Reflexiones finales

Integrar el widget de Conversational AI de ElevenLabs en Webflow es sencillo, gracias a las funciones de Elemento de Inserción y Código Personalizado de la plataforma. Ya sea que busques mejorar la interacción en una sola página o en todo tu sitio, sigue los pasos anteriores para comenzar.

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

Si aún no lo has hecho, regístrate en ElevenLabs hoy para comenzar el proceso.

Preguntas frecuentes