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

El Conversational AI widget de ElevenLabs te permite mejorar tu sitio web de Framer con conversaciones interactivas impulsadas por IA. Ya sea que busques aumentar la interacción con clientes o mejorar tu soporte al cliente, Conversational AI puede ayudarte.

En esta guía, te explicaremos los pasos para añadir el widget a tu sitio web de Framer. Aprenderás a configurar widgets para todo el sitio o para páginas específicas y a resolver problemas comunes.

Antes de empezar

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

1. Cuenta de Framer: Acceso a un proyecto de Framer con la capacidad de añadir código personalizado (disponible en planes de pago).
2. Cuenta de ElevenLabs: Configura tu agente de Conversational AI y copia su código de inserción (incluyendo los fragmentos < script > y < div >).
3. Familiaridad con Framer: Comprensión básica de la Configuración del Sitio y Elementos de Inserción 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 Conversational AI.
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 Configuración del Proyecto.
3. Ve a la pestaña General y desplázate hacia abajo hasta la sección de Código Personalizado.
4. Pega el fragmento < script > de tu código de inserción de ElevenLabs en el campo Fin de la etiqueta < body >.
5. Guarda tus cambios. Este paso asegura que el script necesario se cargue 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 de Inserción desde la sección de Utilidades del menú Insertar.
3. Selecciona el Elemento de Inserción en tu lienzo para acceder a su configuración.
4. Cambia el Tipo a HTML.
5. Pega el fragmento < div > del código de inserción de ElevenLabs en el campo HTML.
6. Posiciona y ajusta el tamaño del Elemento de Inserción en tu lienzo según sea necesario.

Paso 4: Publica y prueba

1. Haz clic en Publicar para que tus cambios se hagan efectivos.
2. Abre tu sitio web en un navegador para verificar que el widget aparece y funciona correctamente.
3. • Nota: El código personalizado no se mostrará en el modo de Vista Previa de Framer; debe publicarse para verlo.

Problemas comunes y resolución de problemas

Si tienes dificultades para que la integración funcione, no te preocupes: consulta estos consejos de resolución de problemas a continuación.

Problema 1: El widget no se muestra

• Causa: Fragmento < script > o < div > faltante o mal colocado.
• Solución: Asegúrate de que el fragmento < script > esté añadido al campo Fin de la etiqueta < body > en la Configuración del Sitio y el fragmento < div > esté en el Elemento de Inserción.

Problema 2: El widget solo se ve parcialmente

• Causa: El Elemento de Inserción está mal dimensionado o posicionado.
• Solución: Ajusta las dimensiones y la alineación del Elemento de Inserción 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 verificar 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 deberían ayudarte.

• Personalización del widget: Usa CSS personalizado para estilizar el widget e integrarlo perfectamente con el diseño de tu sitio web.
• Pruebas en diferentes dispositivos: Las herramientas de diseño responsivo de Framer facilitan la prueba del widget en vistas de móvil, tablet y escritorio para asegurar un escalado adecuado.
• Añadir widgets a páginas específicas: Para incluir el widget solo en páginas específicas, añade el fragmento < div > a un Elemento de Inserción en las páginas deseadas y asegúrate de que el fragmento < script > esté presente en la Configuración del Sitio.

Reflexiones finales

Siguiendo esta guía, puedes mejorar tu sitio de Framer con interacciones dinámicas impulsadas por IA, adaptadas a las necesidades de tu audiencia. Publica tus cambios, prueba tu configuración y deja que tu Conversational AI comience a interactuar con los visitantes hoy mismo. Para más ayuda, contacta con el soporte de ElevenLabs.

Regístrate para Conversational AI hoy mismo para comenzar.