Cómo añadir un chatbot a tu sitio Framer: tutorial de 5 minutos

Antes de pegar nada en Framer, ten tres cosas listas:

• Un sitio Framer publicado. Puedes incrustar scripts en un borrador, pero el widget solo corre en la URL publicada. Si no has pulsado Publish aún, hazlo primero.
• Una cuenta de Chatloom. El plan gratuito vale. Regístrate en chatloom.app, verifica el email y aterrizarás en un panel vacío con el botón «Create your first agent».
• Un texto corto para entrenar. Con 200 palabras sobre tu producto basta para conseguir una respuesta real en el primer mensaje de prueba. Sácalas del hero y del Acerca de.

Esa es toda la lista de requisitos. No necesitas Framer Pro, ni dominio propio, ni un asiento de Zapier, ni un desarrollador de guardia.

En el panel de Chatloom pulsa Create new agent. Dale un nombre (el de tu empresa sirve), elige idioma (Chatloom soporta 95+ con respuestas nativas en diez) y escoge un preset de personalidad: Support, Sales o Custom.

Para un sitio de marketing Framer, Sales es casi siempre el default correcto. Está afinado para cualificar leads, empujar hacia reservas de demo y responder preguntas de precios con seguridad en vez de derivar a un formulario.

Una vez creado el agente aterrizas en el builder. No toques nada más todavía — configuraremos la marca después. Por ahora coge el snippet de embed: Install → Custom embed. Copia ambas etiquetas script al portapapeles.

En Framer abre tu proyecto y pulsa el icono de la rueda (Site Settings) arriba. Baja a General → Custom Code. Verás tres áreas de texto:

• Start of head — para etiquetas de verificación, preloads y snippets de analítica que deben cargarse pronto.
• End of body — para scripts que deben correr después del render. Aquí va Chatloom.
• End of head — para overrides de CSS y meta tags.

Pega las dos etiquetas script del paso 1 en End of body. Guarda. Luego pulsa Publish arriba a la derecha. El widget estará en vivo en la URL publicada en menos de diez segundos.

Abre tu sitio publicado en una ventana de incógnito. Deberías ver el launcher de Chatloom en la esquina inferior derecha. Haz clic, se abre el panel de chat, escribe una pregunta. Felicidades — tu sitio Framer ya tiene un chatbot de IA.

El widget existe, pero todavía no sabe nada de tu producto. Este paso es el que se salta la mayoría de guías.

Vuelve a Chatloom y abre Knowledge base → Add source. Tienes cuatro opciones:

• Crawl website — pega tu dominio Framer. El crawler recorre el sitemap y extrae el texto renderizado de cada página. Es la elección correcta para la mayoría de sitios Framer y tarda menos de dos minutos.
• Upload files — suelta tu pitch deck, el one-pager o la lista de precios.
• Paste text — para FAQs rápidas, detalles de precios o respuestas del tipo «¿y si…?» que aún no están en el sitio.
• Sitemap URL — úsalo si tu sitio Framer está protegido con contraseña o tiene páginas no indexadas que el bot debe conocer.

Para un sitio Framer típico, la combinación ganadora es Crawl + Paste text. El crawl cubre todo lo que ya está en el sitio; el campo de pegado cubre los matices que nunca llegaron al copy.

Lanza el entrenamiento. En el free tarda unos 60 segundos. El panel muestra «Ready» cuando la base de conocimiento está consultable.

Este es el paso que separa un chatbot que parece una burbuja de soporte de 2019 de uno que se siente nativo del diseño Framer. En el builder, abre la sección Widget.

Empieza por Launcher mode. Botón es el default seguro (círculo flotante abajo a la derecha), pero Fullscreen merece una prueba en landings — todo el viewport se atenúa y el chat toma el centro, lo que es un patrón de conversión mucho más fuerte para los CTAs del hero.

Luego, Brand colors. Chatloom expone primario, acento y superficie. Iguálalos con tu paleta Framer. A la derecha hay una vista previa en vivo que se actualiza al instante.

Tipografía. Sube el .woff2 de la fuente Framer que usas (o elige del picker de Google Fonts). La superficie del chat, los chips de sugerencias y los headers se re-renderizan con la fuente nueva. En una pantalla retina no distingues el widget de un componente nativo.

Radio de esquina. Framer usa 12 px por defecto en la mayoría de componentes. Igualarlo hace que el widget desaparezca en el diseño.

Logo y avatar. Sube un PNG transparente. El botón del launcher respeta el PNG; el avatar de la IA aparece junto a cada mensaje del bot.

Guarda. Vuelve a abrir tu sitio Framer en incógnito. El widget ya es indistinguible de una parte nativa del diseño.

Dos últimos toques antes de dar esto por hecho.

Limita el widget. Por defecto Chatloom aparece en todas las páginas del sitio. Si quieres quitarlo de la página de precios (común cuando prefieres que sea el equipo de ventas quien atienda ahí), usa las Visibility rules del widget: excluye URLs que coincidan con /pricing, /contact o el patrón que quieras.

Configura saludos. En la sección Messages del builder, escribe un mensaje de bienvenida breve («Hola — puedo responder preguntas sobre integración con Framer, precios o cómo empezar. ¿En qué estás trabajando?») y 3–5 prompts sugeridos. Los prompts sugeridos son la palanca de conversión con mayor apalancamiento de todo el widget; la gente los pulsa mucho más que escribe.

Prueba. Abre el sitio en incógnito, ten una conversación completa desde varias páginas de entrada y haz específicamente preguntas que aún no estén documentadas. Mira cómo maneja el bot el «no lo sé» — si alucina, añade la respuesta a la base de conocimiento y vuelve a probar. Cinco minutos de esto al principio evitan una semana de conversaciones malas.

Ese es el flujo completo. La mayoría de fundadores Framer terminan toda la secuencia en menos de 15 minutos y no vuelven a tocar el script de embed.