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

¿Quieres aumentar la interacción y ofrecer un soporte al cliente de primer nivel en tu sitio web de Squarespace? ElevenLabs Conversational AI puede ayudarte.

Esta guía te llevará paso a paso para añadir el widget a tu sitio de Squarespace, ya sea en una página específica o en todo tu sitio web. También explicará problemas comunes que podrías encontrar y te proporcionará consejos para solucionarlos.

Antes de empezar

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

1. Cuenta de Squarespace: Acceso a un plan Business o Commerce, ya que estos planes permiten usar Code Blocks y Code Injection.
2. Cuenta de ElevenLabs: Configura tu agente de Conversational AI en ElevenLabs y copia el código de inserción (que contiene fragmentos de < script > y < div >).
3. Familiaridad con Squarespace: Conocimientos básicos para añadir bloques o navegar por la configuración de Code Injection.

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 y configura tu agente de IA.
3. Copia el código de inserción proporcionado, que consiste en:
4. • Un fragmento de < script > para cargar la funcionalidad del widget.
   • Un fragmento de < div > para especificar dónde aparecerá el widget.

Paso 2: Añade el widget usando un bloque de código

Si quieres el widget en una página o entrada de blog específica, usa un bloque de código.

1. Navega a la página o entrada de Squarespace donde quieres que aparezca el widget.
2. Haz clic en el símbolo + para añadir un bloque.
3. Selecciona Código del menú.
4. Pega el fragmento de < div > del código de inserción de ElevenLabs en el Bloque de Código.
5. Guarda el bloque y asegúrate de que esté correctamente posicionado en la página.

Paso 3: Añade el script usando Code Injection

Para asegurar que el widget funcione correctamente, necesitas incluir el fragmento de < script > usando Code Injection.

1. Desde tu panel de Squarespace, ve a Configuración > Avanzado > Code Injection.
2. Pega el fragmento de < script > en la sección de Pie de página.
3. Guarda tus cambios.

Nota: La sección de Pie de página asegura que el script se cargue en todas las páginas, habilitando la funcionalidad de los widgets añadidos mediante Bloques de Código.

Paso 4: Publica y prueba

1. Publica la página o entrada donde se ha añadido el widget.
2. Abre tu sitio web en vivo para verificar que el widget aparece y funciona correctamente. Importante: El código personalizado a menudo no se muestra en la vista previa del editor de Squarespace—publica la página para probar la integración.

Problemas comunes y solución de problemas

Si tienes problemas para que la integración funcione correctamente, no te preocupes—estos consejos deberían ayudarte.

Problema 1: El widget no se muestra

• Causa: Fragmentos de < script > o < div > faltantes o mal colocados.
• Solución: Asegúrate de que el fragmento de < script > esté en la sección de Code Injection del Pie de página y el fragmento de < div > esté correctamente añadido a un Bloque de Código.

Problema 2: El widget solo se ve parcialmente

• Causa: Conflictos de tamaño o diseño del Bloque de Código.
• Solución: Ajusta el tamaño y la alineación del bloque. Usa CSS personalizado si es necesario para una colocación precisa.

Problema 3: Errores de script

• Causa: Scripts en conflicto o restricciones del navegador.
• Solución: Usa la consola del navegador (por ejemplo, Chrome DevTools) para identificar errores. Resuelve conflictos de scripts o verifica problemas de CORS.

Consejos avanzados

¿Buscas opciones de personalización más avanzadas? Echa un vistazo a los consejos a continuación.

• Personalización del widget: Usa CSS personalizado en la sección Diseño > CSS Personalizado de Squarespace para estilizar el widget. Ajusta colores, fuentes o ubicación para que se alineen con el diseño de tu sitio.
• Pruebas en diferentes dispositivos: Prueba tu sitio en diferentes dispositivos (escritorio, tableta y móvil) para asegurar que el widget se adapte y funcione correctamente en todos los tamaños de pantalla.
• Añadir widgets a múltiples páginas: Para incluir el widget en varias páginas, repite el proceso de Bloque de Código para cada página y asegúrate de que el script esté activo en el Pie de página de Code Injection.

Reflexiones finales

Añadir el widget de Conversational AI de ElevenLabs a tu sitio web de Squarespace es una forma sencilla de mejorar la interactividad y la interacción. Ya sea que lo estés integrando en una sola página o en todo tu sitio, las funciones de Code Blocks y Code Injection de Squarespace hacen que la integración sea fluida.

Sigue esta guía paso a paso, prueba tu configuración a fondo y disfruta de los beneficios de la IA conversacional en tu sitio web. Para más ayuda, contacta con el soporte de ElevenLabs.

O, si aún no lo has hecho, regístrate para Conversational AI hoy mismo.