Chatbot IA para sitios Framer: la guía de configuración para 2026

Framer se ha convertido en la herramienta por defecto para fundadores que quieren un sitio de marketing que realmente se publique. Tipografía limpia, colecciones CMS estructuradas, animaciones suaves, y todo sin escribir una línea de React. Pero en el momento en que llega el primer visitante con una pregunta, Framer deja de ayudar: no hay chat en vivo integrado, no hay widget de FAQ, y los plugins de la comunidad son formularios de correo básicos o están detrás de precios empresariales.

El hueco importa. La mayor parte de las decisiones de compra B2B se toman antes de hablar con ventas, y buena parte de esa investigación sucede a horas raras, cuando nadie vigila la bandeja de entrada. Una página estática de FAQ es una lápida para los deals: los visitantes la hojean, no encuentran nada específico a su caso y cierran la pestaña.

Un chatbot de IA real cierra ese hueco. No el de árbol de decisión de 2018, sino un asistente con LLM que lee tu documentación, tus precios, tus casos de estudio y responde con fuentes. Específicamente para Framer, el chatbot adecuado tiene tres rasgos:

1. Cero dependencia en tiempo de build — nada que instalar en el proyecto Framer, ningún componente de código custom, ninguna reexportación de Next.js. Se coloca como un único script de embed.
2. Funciona con el contenido del CMS de Framer — puede rastrear tu sitio publicado y mantenerse sincronizado a medida que añades páginas.
3. Coincide con tu sistema visual — los diseñadores de Framer son obsesivos con la marca; un chatbot con aspecto de burbuja de soporte de 2019 se desinstala al instante.

Chatloom se construyó exactamente para satisfacer esos tres requisitos, y por eso aparece tantas veces en los Slacks de fundadores Framer en 2026.

La ruta más rápida es el embed por código custom, disponible en cualquier plan de Framer incluido el Hobby gratuito. El flujo completo son cuatro pasos y toma menos de tres minutos si ya tienes una cuenta en Chatloom:

Crear agente → Rastrear sitio Framer → Copiar embed → Pegar en el Custom Code de Framer → Publicar

1. Crea tu agente. Regístrate en chatloom.app, dale un nombre al agente y elige un modelo (GPT-4.1 Mini es el predeterminado y resuelve el 95% de las preguntas de un sitio de marketing por céntimos al mes).
2. Apúntalo a tu sitio Framer. El rastreador integrado de Chatloom toma tu URL publicada (tudominio.framer.website o tu dominio propio) e indexa todas las páginas accesibles. Para un sitio típico de 12 páginas tarda unos 90 segundos. El crawler respeta tu robots.txt y cumple los rate limits, así que no activa la protección antibots de Framer.
3. Obtén el snippet de embed. En el panel del agente, abre Install → Custom embed y copia el script de tres líneas:

<script>
  window.CHATLOOM_AGENT_ID = "agt_xxxxxxxxxxxxxxxx";
</script>
<script async src="https://chatloom.app/widget.js"></script>

1. Pégalo en Framer. Abre tu proyecto Framer, ve a Site Settings → General → Custom Code y pega el snippet en el campo End of body. Guarda, publica. El widget aparece en todas las páginas, incluidas las que añadas en el futuro.

Ese es todo el trabajo del desarrollador. Sin npm, sin ruta de API, sin plugin de Framer que autorizar. El widget vive en la CDN de Chatloom y se actualiza solo, así que no vuelves a tocar ese código.

Los diseñadores de Framer obsesionan por una cosa: el chatbot no puede parecer pegado con cinta. Chatloom diseñó su widget builder para ese requisito exacto. Cada propiedad visual relevante es un control, no un nombre de clase.

En la sección Widget del builder puedes configurar:

• Modo del launcher — botón, panel compacto, overlay a pantalla completa o sidebar. El modo a pantalla completa funciona muy bien en landings Framer porque respeta el viewport del hero y atenúa el fondo.
• Colores de marca — primario, acento y superficie. Toda la superficie del chat (cabecera, burbujas, sugerencias, indicador de escritura) cambia de tema en tiempo real.
• Radio de las esquinas — iguala el 12px por defecto de Framer, afínalo para sitios editoriales o redondéalo del todo para marcas desenfadadas.
• Tipografías custom — sube un .woff2 o elige desde Google Fonts. En un sitio de marketing la batalla se libra en la tipografía, y es la función más pedida por la comunidad Framer.
• Icono y avatar — sube tu marca en PNG transparente. El botón del launcher respeta el canal alfa y se ve nítido en retina.
• Fondo del chat — gradiente, color sólido o imagen. Combínalo con tu hero en Framer y el widget se percibe como parte de la página, no como un añadido de terceros.

Cada sección del builder tiene un botón Test Live que abre el widget real en un viewport simulado. No publiques nada que no haya pasado la prueba visual del Test Live.

Un chatbot con una base de conocimiento vacía es peor que no tener chatbot: inventa respuestas y espanta visitantes. Los sitios Framer son especialmente fáciles de entrenar porque el contenido ya viene estructurado: las secciones hero tienen titulares claros, los ítems del CMS comparten campos, las tablas de precios viven en componentes nativos.

Chatloom ofrece cuatro vías de ingesta y todas funcionan sobre un proyecto Framer:

1. Crawl — pega tu dominio Framer una vez y Chatloom recorre el sitemap, extrae el contenido principal, limpia los elementos de UI (navbar, banners de cookies, footer) y trocea el resto para RAG. Por sí solo cubre el 80% de las preguntas de marketing.
2. Subida de sitemap — si tu sitio está protegido con contraseña o quieres entrenar un subconjunto, sube una sitemap.xml y elige qué URLs entrenar.
3. Subida de PDF y documentos — suelta tu pitch deck, tu one-pager, tu PDF de precios o la documentación de onboarding. Chatloom los analiza con el mismo pipeline de embeddings que el crawl.
4. Texto manual — para las respuestas matizadas que aún no están en tu sitio («¿qué pasa si cancelo a mitad del trial?»), escríbelas directamente en la base de conocimiento. Se convierten en chunks de primera clase y superan al crawl cuando un visitante hace exactamente esa pregunta.

El motor de búsqueda híbrida que hay debajo (vectores densos + BM25 + RRF + reranker de Cohere) significa que no tienes que pensar en coincidencia de keywords. «¿Cómo bajo de plan?» devuelve la respuesta correcta aunque tu documentación diga «cambiar de plan».

La IA no es todo el producto en un sitio Framer. En el momento en que el bot se topa con un comprador serio, tiene que quitarse del medio. Chatloom integra tres caminos de escalado:

Traspaso humano. Cualquier conversación puede ser retomada por un operador humano en la bandeja de Chatloom. El operador ve la transcripción completa, la ruta de página del visitante (y por tanto qué sección del sitio Framer disparó el chat) y las puntuaciones de confianza que emitía la IA. Los fundadores Framer suelen encargarse ellos mismos el primer mes y luego delegan en un freelancer o un SDR por contrato.

Captura de leads. El bot puede recopilar nombre, email y una o dos preguntas de cualificación en conversación natural, y enviar el lead al CRM vía webhook, Zapier o integración directa con HubSpot/Pipedrive. Sin formularios.

Reservas de calendario. Pon un enlace de Cal.com o Calendly en el system prompt y el bot repartirá URLs de reserva cuando el comprador diga cosas como «¿puedo ver una demo?» o «¿cómo empiezo?». Para ventas de alta intención convierte muchísimo mejor que un botón estático de «Reservar demo» en la navegación.

Los tres caminos comparten el mismo registro de conversación. Si la IA respondió los tres primeros mensajes y un humano tomó el cuarto, el CRM recibe todo el historial — sin ese momento incómodo de «¿puedes repetir lo que le dijiste al bot?».

Aquí es donde los fundadores de Framer se preparan para el presupuesto de Intercom. La economía es totalmente distinta ahora.

Chatloom Free (0 $/mes) cubre 100 mensajes de IA al mes, rastreo ilimitado de páginas, personalización de marca y el script de embed. Para una landing Framer con waitlist es literalmente suficiente.

Chatloom Starter (29 $/mes) desbloquea 2.000 mensajes, traspaso a chat en vivo, analíticas, webhooks a CRM y elimina la insignia «Powered by Chatloom». Es el plan al que llegan la mayoría de fundadores en cuanto tienen tráfico real.

Chatloom Pro (99 $/mes) añade enrutamiento de modelos personalizado, soporte prioritario, límites de mensajes más altos y acceso multi-seat — útil cuando ya hay un SDR por contrato o una persona de soporte a tiempo parcial compartiendo bandeja.

Compáralo con los establecidos:

Para un sitio de marketing hecho en Framer esos números establecidos están totalmente desproporcionados respecto al tráfico. Las matemáticas del punto de equilibrio también son más amables de lo que se piensa: con el plan Starter, el chatbot se paga solo si desvía dos correos al mes que habrían ido a una VA freelance de 75 $/hora. En la práctica el ratio es más bien de 40 a 1.