Cómo añadir el widget de IA conversacional de ElevenLabs a tu sitio web de Framer

El widget de IA conversacional de ElevenLabs te permite mejorar tu sitio web de Framer con conversaciones interactivas impulsadas por IA. Tanto si buscas aumentar la interacción con clientes como si quieres mejorar la atención al cliente, la IA conversacional puede ayudarte. 

En esta guía te explicamos cómo añadir el widget a tu sitio web de Framer. Aprenderás a configurar widgets para todo el sitio o para páginas concretas, así como a solucionar problemas habituales.

Antes de empezar

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

1. Cuenta de Framer: acceso a un proyecto de Framer que permita añadir código personalizado (disponible en planes de pago).
2. Cuenta de ElevenLabs: configura tu agente de IA conversacional y copia su código de inserción (incluidos los fragmentos < script > y < div >).
3. Conocimientos básicos de Framer: comprensión básica de la configuración del sitio y los elementos Embed de Framer

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 de IA y copia el código de inserción proporcionado, que incluye:
4. • Un fragmento < script > para cargar la funcionalidad del widget.
   • Un fragmento < div > para definir dónde aparecerá el widget.

Paso 2: Añade el script a la configuración del sitio de Framer

1. Abre tu proyecto de Framer.
2. En la esquina superior derecha, haz clic en Project Settings.
3. Ve a la pestaña General y desplázate hasta la sección Custom Code.
4. Pega el fragmento < script > de tu código de inserción de ElevenLabs en el campo End of < body > tag.
5. Guarda los cambios. Así te aseguras de que se cargue el script necesario en tu sitio.

Paso 3: Añade el widget a una página específica

1. En tu proyecto de Framer, ve a la página donde quieres que aparezca el widget.
2. Añade un elemento Embed desde la sección Utilities del menú Insert.
3. Selecciona el elemento Embed en el lienzo para acceder a su configuración.
4. Cambia Type a HTML.
5. Pega el fragmento < div > del código de inserción de ElevenLabs en el campo HTML.
6. Coloca y ajusta el tamaño del elemento Embed en el lienzo según lo necesites.

Paso 4: Publica y prueba

1. Haz clic en Publish para publicar los cambios.
2. Abre tu sitio web en un navegador para comprobar que el widget aparece y funciona correctamente.
3. • Nota: El código personalizado no se muestra en el modo Preview de Framer; debes publicar el sitio para verlo.

Problemas habituales y soluciones

Si no consigues que la integración funcione, no te preocupes: consulta estos consejos para solucionar problemas. 

Problema 1: El widget no se muestra

• Causa: falta el fragmento < script > o < div >, o no está colocado correctamente.
• Solución: asegúrate de que el fragmento < script > esté añadido al campo End of < body > tag de Site Settings y de que el fragmento < div > esté en el elemento Embed.

Problema 2: El widget solo se ve parcialmente

• Causa: el tamaño o la posición del elemento Embed no son correctos.
• Solución: ajusta las dimensiones y la alineación del elemento Embed en el editor de Framer.

Problema 3: Errores de script

• Causa: scripts en conflicto o recursos externos bloqueados.
• Solución: abre la consola del navegador para comprobar si hay errores de JavaScript. Asegúrate de que Framer tenga permisos para cargar scripts externos.

Consejos avanzados

¿Buscas opciones de personalización más avanzadas? Estos consejos te ayudarán. 

• Personalizar el widget: usa CSS personalizado para dar estilo al widget e integrarlo de forma fluida con el diseño de tu sitio web.
• Pruebas en distintos dispositivos: las herramientas de diseño responsive de Framer facilitan probar el widget en vistas de móvil, tableta y escritorio para garantizar que se adapte correctamente.
• Añadir widgets a páginas específicas: para incluir el widget solo en páginas concretas, añade el fragmento < div > a un elemento Embed en las páginas deseadas y asegúrate de que el fragmento < script > esté presente en Site Settings.

Consideraciones finales 

Siguiendo esta guía, puedes mejorar tu sitio de Framer con interacciones dinámicas impulsadas por IA y adaptadas a las necesidades de tu audiencia. Publica los cambios, prueba la configuración y deja que tu IA conversacional empiece a interactuar con visitantes hoy mismo. Si necesitas más ayuda, contacta con el equipo de soporte.

Regístrate en Agentes de Voz IA hoy mismo para empezar.