Cómo agregar un chatbot de IA a tu sitio de Webflow

Los sitios de Webflow se ven pulidos, cargan rápido y te dan un control de diseño preciso. Pero no vienen con chat de IA integrado. Si quieres un chatbot que realmente entienda tu contenido y pueda sostener conversaciones reales con los visitantes, tienes que agregar uno tú mismo.

La buena noticia: agregar un chatbot de IA a Webflow toma unos 20 minutos y no requiere código más allá de pegar una sola etiqueta de script. Creas el chatbot, lo entrenas con el contenido de tu sitio y lo agregas a Webflow mediante la configuración de Custom Code. Funciona en todas las páginas, coincide con tu diseño y empieza a responder las preguntas de los visitantes de inmediato.

Esta guía cubre todo el proceso: crear y entrenar el chatbot, incrustarlo en Webflow, personalizar la apariencia y configurarlo para obtener los mejores resultados.

Comparación de opciones de chat para Webflow

Antes de entrar en la configuración, así se comparan los principales enfoques para agregar funciones de chat a Webflow.

Si necesitas un widget de chat donde un equipo humano responda en tiempo real, una herramienta de chat en vivo como Intercom es la opción correcta. Si quieres un asistente con IA que responda preguntas automáticamente, entrenado con el contenido real de tu sitio, un chatbot de IA es la mejor opción. La mayoría de los dueños de sitios de Webflow quieren esto último: un asistente de autoservicio que gestiona las preguntas de los visitantes sin necesidad de personal.

Paso 1: crea tu chatbot

Empieza creando un chatbot en Agentkit. Necesitas una cuenta gratuita.

1. Ve a Agentkit y regístrate.
2. Crea un chatbot nuevo y ponle un nombre que refleje su propósito (por ejemplo, "Asistente del sitio web" o el nombre de tu marca).
3. Elige un modelo de IA. GPT-4o es una opción predeterminada sólida. Tienes una variedad de modelos para elegir entre OpenAI, Anthropic (Claude) y Google (Gemini).

Paso 2: entrena con el contenido de tu sitio de Webflow

Este es el paso que hace que el chatbot sea realmente útil. Le estás dando tu contenido real de sitio web para que pueda responder las preguntas de los visitantes con precisión.

Agrega la URL de tu sitio web

1. En el panel de Agentkit, ve a la página Fuentes de tu chatbot.
2. Haz clic en Agregar fuente y elige Sitio web.
3. Ingresa la URL de tu sitio de Webflow (por ejemplo, https://yoursite.webflow.io o tu dominio personalizado https://yoursite.com).
4. El rastreador sigue los enlaces desde tu URL principal e indexa todas las páginas accesibles: tu página de inicio, la página "acerca de", las páginas de servicios, el portafolio, las entradas del blog, preguntas frecuentes, precios y cualquier otro contenido enlazado.

Para los sitios de Webflow que usan interacciones, animaciones o contenido cargado dinámicamente, el rastreador de Agentkit usa Firecrawl para renderizar JavaScript antes de indexar. Esto asegura que el contenido cargado mediante interacciones de Webflow se capture con precisión.

Agrega pares de preguntas y respuestas para temas clave

Mientras que el rastreo del sitio web captura tu contenido general, los pares de preguntas y respuestas te dan control preciso sobre respuestas específicas. Crea pares para las preguntas más importantes de tus visitantes:

Los pares de preguntas y respuestas tienen prioridad sobre el contenido rastreado, así que son tu herramienta para asegurarte de que el chatbot diga exactamente lo que quieres en los temas críticos.

Sube documentos (opcional)

Si tienes recursos que no están publicados en tu sitio de Webflow (casos de éxito en formato PDF, documentos de especificación de servicios, listas de precios), súbelos como fuentes de documentos. El chatbot usará este contenido junto con los datos de tu sitio web para responder preguntas.

Prueba en el Playground

Antes de agregar el chatbot a tu sitio en vivo, pruébalo en el Playground de Agentkit.

Haz las preguntas que tus visitantes suelen hacer:

• "¿Qué servicios ofreces?"
• "¿Cuánto cuesta?"
• "¿Cómo empiezo?"
• "¿Trabajas con empresas del sector [industria]?"
• "¿Cuál es tu política de reembolsos?"

Si alguna respuesta es incorrecta, incompleta o está mal redactada, ajusta tus datos de entrenamiento. Agrega o actualiza pares de preguntas y respuestas, agrega más fragmentos de texto, o mejora tu fuente de sitio web para incluir páginas específicas que puedas haber pasado por alto.

Paso 3: personaliza la apariencia del widget

Antes de incrustarlo, configura el widget del chatbot para que coincida con el diseño de tu sitio de Webflow.

En el panel de Agentkit, ve a Configuración de tu chatbot:

Tema de color. Define el color principal para que coincida con tu marca. Usa el código hexadecimal exacto de la guía de estilo de tu Webflow. La burbuja del chatbot, el encabezado y el botón de enviar usan todos este color.

Posición. Elige la esquina inferior derecha (predeterminada y más común) o la esquina inferior izquierda. Elige el lado que no entre en conflicto con otros elementos flotantes de tu sitio de Webflow.

Mensaje de bienvenida. Escribe un mensaje que coincida con la voz de tu marca y establezca expectativas claras:

• Para un negocio de servicios: "Hola, puedo responder preguntas sobre nuestros servicios, precios y proceso. ¿En qué puedo ayudarte?"
• Para un producto SaaS: "¡Bienvenido! Pregúntame lo que quieras sobre nuestro producto, funciones o precios."
• Para un sitio de portafolio: "Hola. Puedo contarte sobre nuestro trabajo, capacidades y cómo colaboramos con los clientes."

Mensajes sugeridos. Agrega de tres a cinco mensajes sugeridos que guíen a los visitantes hacia tus conversaciones más valiosas:

• "¿Qué servicios ofreces?"
• "¿Cuánto cuesta?"
• "¿Puedo ver ejemplos de tu trabajo?"
• "¿Cómo empiezo?"

Avatar. Sube tu logo o un ícono de marca como avatar del chatbot para lograr una imagen coherente.

Paso 4: incrústalo en Webflow

Aquí está la instalación real. Tienes dos opciones en Webflow: en todo el sitio (cada página) o por página específica.

Opción A: instalación en todo el sitio (recomendada)

Esto agrega el chatbot a cada página de tu sitio de Webflow.

1. En el panel de Agentkit, ve a Configuración de tu chatbot y luego a Incrustar.
2. Copia la etiqueta de script:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

3. En Webflow, abre tu Project Settings (el ícono de engranaje en la barra lateral izquierda del Designer, o desde el panel del proyecto).
4. Ve a la pestaña Custom Code.
5. Pega la etiqueta de script en la sección Footer Code (el campo con la etiqueta "Before </body> tag").
6. Haz clic en Save Changes.
7. Publica tu sitio para que los cambios surtan efecto.

El chatbot ahora aparecerá en cada página de tu sitio de Webflow publicado.

Opción B: instalación por página específica

Si solo quieres el chatbot en ciertas páginas (por ejemplo, tu página de precios y tu página de contacto, pero no tu blog):

1. En el Designer de Webflow, abre la página donde quieres el chatbot.
2. Abre Page Settings (ícono de engranaje cerca del nombre de la página en el panel de Pages).
3. Desplázate hasta la sección Custom Code.
4. Pega la etiqueta de script en el campo Before </body> tag.
5. Haz clic en Save y luego en Publish.

Repite el proceso para cada página donde quieras el chatbot. Las páginas sin el script no mostrarán el chatbot.

Verifica la instalación

Después de publicar:

1. Abre tu sitio de Webflow en una pestaña nueva del navegador (o en una ventana de incógnito para evitar la caché).
2. Busca la burbuja de chat en la esquina inferior.
3. Haz clic en la burbuja y envía un mensaje de prueba.
4. Verifica que la respuesta sea correcta y que el estilo se vea bien.
5. Pruébalo en un dispositivo móvil para confirmar que el widget se muestra correctamente en pantallas más pequeñas.

Si el chatbot no aparece de inmediato después de publicar, actualiza la página forzando la recarga (Ctrl+Shift+R o Cmd+Shift+R). El CDN de Webflow puede tardar un minuto en propagar el código actualizado.

Paso 5: configura las restricciones de dominio

Una vez que tu chatbot esté activo, restríngelo a tu dominio para que no se pueda incrustar en sitios no autorizados.

1. En el panel de Agentkit, ve a Configuración de tu chatbot.
2. En Dominios permitidos, agrega el dominio de tu sitio de Webflow (por ejemplo, yoursite.com).
3. Si también usas el dominio predeterminado de Webflow (yoursite.webflow.io), agrégalo también.

El chatbot solo se cargará en los dominios especificados. Esto evita que alguien copie tu código de incrustación y use tu chatbot (y tu cuota de mensajes) en su propio sitio.

Consejos específicos de Webflow

Trabajar con interacciones de Webflow

Si tu sitio de Webflow usa muchas interacciones y animaciones, el widget del chatbot se carga de forma independiente y no interfiere con ellas. El widget usa una superposición de posición fija, así que se ubica sobre el contenido de tu página sin verse afectado por las transformaciones de Webflow ni las animaciones activadas por scroll.

Páginas de colección de CMS

Si tienes un blog o portafolio de CMS en Webflow, el chatbot (instalado en todo el sitio) aparecerá en cada página de colección de CMS. Entrena al chatbot con la URL completa de tu sitio para que pueda responder preguntas sobre cualquier contenido, incluidas las páginas de CMS.

Si el contenido de tu CMS cambia con frecuencia, considera el plan Standard ($119.99/mes), que incluye reentrenamiento automático. El chatbot vuelve a rastrear tu sitio periódicamente y detecta las entradas de CMS nuevas de forma automática.

Webflow Ecommerce

Para los sitios de Webflow Ecommerce, entrena al chatbot con tus páginas de productos, política de envío, política de devoluciones y preguntas frecuentes. El chatbot puede responder preguntas de productos, explicar las opciones de envío y gestionar consultas de devolución. Consulta nuestra guía de chatbot para ecommerce para conocer los detalles de configuración.

Staging vs. producción

Si usas el entorno de staging de Webflow (yoursite.webflow.io) para hacer pruebas antes de publicar en tu dominio personalizado, puedes agregar el script del chatbot a ambos. Usa la restricción de dominio para controlar en qué dominio está activo el chatbot. Durante las pruebas, permite ambos dominios. En producción, restríngelo solo a tu dominio personalizado.

Impacto en el rendimiento

El widget de Agentkit se carga de forma asincrónica (nota el atributo async en la etiqueta de script). Esto significa que no bloquea la carga de tu página. Se carga en segundo plano después de que el contenido de tu página está listo. No hay un impacto medible en el tiempo de carga de tu sitio de Webflow ni en tu puntaje de Lighthouse.

Captura de leads en Webflow

Un chatbot en tu sitio de Webflow es una herramienta de captura de leads además de una herramienta de soporte. Los visitantes que interactúan con el chatbot ya demostraron interés. Capturar su correo electrónico en el momento indicado convierte a un visitante casual en una oportunidad de seguimiento.

Configuración de la captura de leads

1. En el panel de Agentkit, ve a Acciones de tu chatbot.
2. Activa Recopilar leads con nombre y correo electrónico como campos obligatorios.
3. Configura cuándo aparece el formulario en las instrucciones de tu chatbot: "Después de responder la pregunta de un visitante sobre servicios o precios, ofrécele enviarle más detalles y usa el formulario de captura de leads para recolectar su correo electrónico."

Conectar los leads con tus herramientas

Zapier, los webhooks y el acceso a la API REST están disponibles desde el plan Hobby ($29.99/mes).

Para profundizar en las estrategias de captura de leads, consulta Cómo usar chatbots para generación de leads.

Cómo hacer coincidir el diseño de tu Webflow

Tu sitio de Webflow tiene un lenguaje de diseño específico. Así se logra que el chatbot se sienta nativo en lugar de agregado a última hora.

Color de marca. Copia el valor hexadecimal exacto de tu color de marca principal desde el panel de estilo de Webflow y úsalo como el color del widget del chatbot. Esto asegura que la burbuja de chat y el encabezado combinen con tu sitio.

Coherencia de fuente. El widget del chatbot usa una pila de fuentes de sistema limpia que combina bien con la mayoría de las elecciones tipográficas de Webflow. El texto del widget es deliberadamente neutro para no entrar en conflicto con fuentes personalizadas.

Espaciado y posición. Si tu sitio de Webflow tiene un pie de página fijo, un botón de CTA flotante o un aviso de cookies, ubica el chatbot en el lado opuesto para evitar superposiciones. Puedes elegir esquina inferior izquierda o inferior derecha en la configuración del chatbot.

Tono del mensaje de bienvenida. Escribe el mensaje de bienvenida y los mensajes sugeridos con la misma voz que el resto del contenido de tu sitio de Webflow. Si tu sitio es informal y amigable, el chatbot debería coincidir. Si tu sitio es profesional y formal, el chatbot debería reflejar eso.

Cómo medir el desempeño del chatbot en tu sitio de Webflow

Después de que el chatbot haya estado funcionando algunas semanas, revisa su desempeño en el panel de Agentkit.

Revisa los registros de conversación semanalmente durante el primer mes. Ahí es donde encuentras las victorias rápidas: preguntas que el chatbot responde mal y que son fáciles de corregir con un par de preguntas y respuestas, y preguntas que responde bien que puedes usar para validar tu enfoque de entrenamiento.

Planes de Agentkit para sitios de Webflow

La facturación anual ahorra aproximadamente un 20% en todos los planes pagos. La mayoría de los sitios de Webflow empiezan en el plan Free para hacer pruebas, y luego pasan a Hobby cuando ven que el chatbot gestiona preguntas reales de visitantes.

Solución de problemas comunes

El chatbot no aparece después de publicar. El CDN de Webflow puede tardar unos minutos en propagar los cambios. Actualiza la página forzando la recarga. Si aún no aparece, verifica que el script esté en el campo correcto de Custom Code (Footer Code en Project Settings, o el campo Before </body> tag en Page Settings).

El chatbot aparece en el Designer pero no en el sitio publicado (o viceversa). La vista previa del Designer no ejecuta scripts personalizados. Solo verás el chatbot en el sitio publicado. Este es el comportamiento esperado de Webflow.

El chatbot se superpone con un elemento de Webflow. Cambia la posición del chatbot (inferior izquierda o inferior derecha) en la configuración de Agentkit, o ajusta el z-index de tu elemento de Webflow si debería aparecer por encima del chatbot.

El chatbot da respuestas incorrectas. Revisa la pregunta específica en tus registros de conversación y luego agrega o actualiza un par de preguntas y respuestas con la respuesta correcta. Los pares de preguntas y respuestas tienen prioridad sobre el contenido rastreado para las preguntas que coinciden.

El chatbot no carga en páginas específicas. Si usaste la instalación por página específica, verifica que el script esté presente en la configuración de Custom Code de esa página. Si usaste la instalación en todo el sitio, revisa que no haya un script en conflicto o un encabezado de seguridad que lo esté bloqueando.

Cómo empezar

Agregar un chatbot de IA a tu sitio de Webflow es uno de los cambios de mayor impacto que puedes hacer con el menor esfuerzo. Una sola etiqueta de script te da un asistente 24/7 que responde preguntas de los visitantes, captura leads y mejora la experiencia de todos los que visitan tu sitio.

1. Regístrate en Agentkit (gratis).
2. Crea un chatbot y entrénalo con la URL de tu sitio de Webflow.
3. Agrega pares de preguntas y respuestas para las preguntas más importantes de tus visitantes.
4. Personaliza el widget para que coincida con tu marca.
5. Pega el código de incrustación en la configuración de Custom Code de Webflow.
6. Publica y prueba.

Todo el proceso toma unos 20 minutos. Tu chatbot empieza a responder preguntas reales de los visitantes de inmediato.

Crea tu chatbot gratis →

No se requiere tarjeta de crédito.