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

El widget de ElevenLabs IA conversacional te permite mejorar tu sitio web de Framer con conversaciones interactivas impulsadas por IA. Tanto si quieres aumentar la interacción con clientes como mejorar tu 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, y 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 los planes de pago).
2. Cuenta de ElevenLabs: configura tu agente de IA conversacional y copia el código de inserción (incluidos los fragmentos < script > y < div >).
3. Conocimientos de Framer: conocimientos básicos 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 > del 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 concreta

1. En tu proyecto de Framer, ve a la página donde quieres que aparezca el widget.
2. Añade un Embed Element desde la sección Utilities del menú Insert.
3. Selecciona el Embed Element 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 Embed Element en el lienzo según 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 te cuesta hacer 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 está colocado incorrectamente.
• Solución: asegúrate de añadir el fragmento < script > al campo End of < body > tag de Site Settings y de incluir el fragmento < div > en el Embed Element.

Problema 2: El widget solo se ve parcialmente

• Causa: el tamaño o la posición del Embed Element no son correctos.
• Solución: ajusta las dimensiones y la alineación del Embed Element 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 pueden ayudarte. 

• Personalizar el widget: utiliza CSS personalizado para dar estilo al widget e integrarlo perfectamente 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 las vistas de móvil, tablet y escritorio para asegurar que se escale correctamente.
• Añadir widgets a páginas concretas: para incluir el widget solo en páginas concretas, añade el fragmento < div > a un Embed Element en las páginas deseadas y asegúrate de que el fragmento < script > esté presente en Site Settings.

Reflexiones 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.