Cómo crear un diagnóstico basado en inteligencia artificial para una página web de Squarespace
La mayoría de los «lead magnets» ofrecen a los usuarios algo estático.
Un PDF. Una lista de comprobación. Una guía. Una hoja de trabajo.
Esos recursos pueden seguir siendo útiles, pero la IA permite crear un tipo diferente de «imán de clientes potenciales»: uno que se adapta a cada persona.
En lugar de decir «Descarga esta guía», puedes invitar a alguien a responder unas cuantas preguntas y obtener un resultado personalizado.
Ese resultado podría ayudarles a comprender por qué su página web no se comunica con claridad, en qué aspectos su oferta resulta confusa, si su página de inicio inspira suficiente confianza o qué tipo de «imán de clientes potenciales» se adapta mejor a su negocio.
Para los usuarios de Squarespace, la versión más sencilla no requiere una aplicación completa, un panel de control, un sistema de inicio de sesión ni un proyecto de software a medida.
Necesitas tres elementos principales:
Una página de Squarespace
Un Worker de Cloudflare
Una clave de API de OpenAI
La página de Squarespace muestra el formulario y el resultado.
El Cloudflare Worker actúa como capa intermedia segura.
OpenAI genera el diagnóstico personalizado.
El proceso es el siguiente:
Formulario de Squarespace → Cloudflare Worker → OpenAI → el resultado aparece en Squarespace
Y ya está.
El truco está en seguir el orden correcto.
No empieces por el código.
Empieza por el diagnóstico.
Paso 1: Decide qué es lo que el diagnóstico debería ayudar a la gente a ver
Un buen diagnóstico no es solo un cuestionario.
Un cuestionario suele clasificar a alguien en una categoría.
Un diagnóstico ayuda a una persona a darse cuenta de algo útil sobre su situación.
Por ejemplo, en lugar de preguntar:
¿Qué tipo de página web tienes?
Quizá te preguntes:
¿Tu página web refleja la situación actual de tu empresa?
Esa pregunta resulta más útil porque compara dos cosas:
qué es lo que realmente ocurre hoy en día en la empresa
y qué es lo que transmite actualmente la página web
Ese tipo de diagnóstico puede dar lugar a un resultado que alguien realmente reconozca.
Es posible que descubran que su sitio web presenta una falta de credibilidad, una falta de posicionamiento, una falta de claridad en la oferta o una falta de confianza.
El valor no se limita a la etiqueta.
Lo que importa es el reconocimiento.
La persona debería marcharse pensando:
Eso explica lo que he estado sintiendo.
Paso 2: Utiliza ChatGPT para perfilar el diagnóstico
Antes de pedirle código a ChatGPT, pídele que te ayude a definir el diagnóstico.
Empieza con tu idea expresada en lenguaje sencillo.
Por ejemplo:
Quiero crear un diagnóstico que ayude a los empresarios a comprender si su página web sigue ajustándose al negocio que dirigen actualmente.
A continuación, pide a ChatGPT que te ayude a reflexionar sobre las decisiones importantes:
¿Qué debería ayudar a comprender este diagnóstico?
¿A quién va dirigido?
¿Qué debe introducir el visitante?
¿Debería la herramienta analizar una URL, texto pegado, respuestas de un formulario o alguna combinación de estos?
¿Qué preguntas debería plantear?
¿Qué categorías de resultados resultarían útiles?
¿Qué debería incluir el resultado final?
¿Qué debería hacer el visitante tras obtener su resultado?
Esta primera conversación no trata sobre código.
Se trata de la forma del diagnóstico.
Lo que quieres es obtener un esquema sencillo que incluya:
el nombre del diagnóstico
el público objetivo
la promesa
las preguntas del formulario
las categorías de resultados
el formato de los resultados
la llamada a la acción
el tono de los resultados
Una vez que se aclaran esos aspectos, la parte técnica resulta mucho más sencilla.
Paso 3: Pide a ChatGPT que genere la configuración técnica
Una vez que el diagnóstico esté claro, pide a ChatGPT que convierta el esquema en elementos técnicos.
En el caso de Squarespace, lo que quieres es que genere dos cosas principales:
Código de Cloudflare Worker
y código de incrustación de Squarespace
El Cloudflare Worker es el backend.
El código de incrustación de Squarespace es lo que hay que pegar en un bloque de código de tu página web.
«The Worker» es importante porque tu clave API de OpenAI nunca debe introducirse directamente en Squarespace ni en el JavaScript del navegador.
El trabajador protege la llave.
Así pues, cuando alguien rellena el formulario de tu página de Squarespace, el formulario envía la información al Worker. El Worker la envía a OpenAI. OpenAI devuelve el resultado. El Worker envía el resultado de vuelta a la página de Squarespace.
El visitante solo ve la forma y el resultado.
Nunca ven la clave de la API.
Paso 4: Configurar Cloudflare y OpenAI
Crea una cuenta en Cloudflare y ve a la sección «Workers & Pages».
Crea un nuevo «Worker». Puedes empezar con el «Worker» predeterminado «Hello World».
A continuación, ve a la plataforma de OpenAI y crea una clave de API.
De vuelta en Cloudflare, añade esa clave de OpenAI como secreto.
El secreto suele llamarse:
OPENAI_API_KEY
Tu código Worker utilizará ese secreto cuando realice una llamada a OpenAI.
Una vez guardada la clave en Cloudflare, puedes pegar el código de Worker generado por ChatGPT e implementarlo.
Cloudflare te proporcionará una URL de Worker.
Necesitarás esa URL para la incrustación en Squarespace.
Paso 5: Añadir el código de inserción a Squarespace
A continuación, coge el código de incrustación de Squarespace que ha generado ChatGPT.
Dentro de ese código, debería haber un marcador de posición para la URL de tu Worker.
Sustituye el marcador de posición por la URL real de Worker de Cloudflare.
A continuación, añade el código de incrustación completo a un bloque de código de Squarespace.
Esa incrustación suele incluir el formulario, un poco de estilo, el comportamiento al enviarlo, un mensaje de carga y el área de resultados.
Ahora la página de Squarespace cuenta con una interfaz de diagnóstico operativa.
Paso 6: Probar el circuito completo
La primera prueba no consiste en comprobar si el resultado del diagnóstico es perfecto.
Lo primero que hay que comprobar es si todo el bucle funciona.
Envía el formulario.
Asegúrate de que la información pase de Squarespace a Cloudflare, de Cloudflare a OpenAI y, a continuación, de vuelta a Squarespace en forma de resultado visible.
Una vez que eso funcione, podrás ir perfeccionándolo.
Quizá las preguntas deberían ser más precisas.
Quizá habría que buscar nombres más adecuados para las categorías de resultados.
Quizá el resultado suene demasiado genérico.
Quizás el formulario debería mostrar una pregunta cada vez, en lugar de todas a la vez.
Quizá la llamada a la acción debería ser más clara.
Eso es normal.
La primera versión demuestra que el sistema funciona.
La próxima versión mejora la experiencia.
Qué puedes construir con esto
Una vez que comprendas el patrón, podrás utilizarlo para todo tipo de «lead magnets» interactivos.
Un diagnóstico del posicionamiento de un sitio web.
Una revisión de la claridad de la página de inicio.
Una auditoría de la página de ofertas.
Un buscador de «lead magnets».
Un cuestionario sobre el servicio en el tenis.
Una herramienta para comprobar si una propuesta es adecuada.
Una revisión del posicionamiento de la cartera.
Auditoría de fiabilidad de una página de donaciones.
Una evaluación del grado de preparación para la IA.
La estructura se mantiene prácticamente igual.
Solo cambia el diagnóstico.
Eso es lo que lo hace útil para Squarespace.
No estás convirtiendo tu sitio web en una aplicación completa.
Estás añadiendo una capa interactiva inteligente a una página.
La versión resumida
A continuación te explicamos todo el proceso en un lenguaje sencillo:
Decide qué quieres que el diagnóstico ayude a la gente a ver.
Utiliza ChatGPT para definir las preguntas, las categorías de resultados y el resultado final.
Vuelve a utilizar ChatGPT para generar el código de Cloudflare Worker y el de Squarespace.
Añade tu clave de API de OpenAI a Cloudflare como un secreto.
Pega el código de Worker en Cloudflare.
Pega el código de inserción en Squarespace.
Pruébalo.
A continuación, refina.
El orden es importante:
Primero, diseña el diagnóstico.
A continuación, genera la estructura básica.
Instala, prueba y perfecciona.
Esa es la forma más sencilla de crear un diagnóstico basado en IA en una página web de Squarespace.
