Cómo configurar el onboarding de usuarios en una app hecha con Cursor sin programador

Ejemplo: onboarding de usuarios en una app hecha con Cursor

Cómo configurar el onboarding de usuarios en una app hecha con Cursor, paso a paso

1. Paso 01

   Copia tu snippet de Clew

   Crea una cuenta gratis (o inicia sesión), añade tu sitio y abre Admin → Resumen. Haz clic en la línea de la tarjeta del widget para copiarla: ya lleva la clave real de tu sitio en lugar del marcador.

   <!-- Clew: sustituye PEGA_AQUI_TU_CLAVE por la clave del sitio de Admin > Resumen -->
   <script src="https://tryclew.io/widget/PEGA_AQUI_TU_CLAVE.js" async></script>

   Copiar

   

2. Paso 02

   Abre el repositorio en Cursor, modo Agent

   Abre la carpeta del proyecto en Cursor y el chat en modo Agent, para que edite los archivos por sí mismo.

   

3. Paso 03

   Envía el prompt con tu clave

   Sustituye PEGA_AQUI_TU_CLAVE por tu clave y envíalo. Cursor lee el repositorio y elige el archivo raíz correcto de la lista del prompt.

   Añade el widget de onboarding de Clew a esta app.
   
   Inserta esta etiqueta exacta una sola vez para que cargue en todas las páginas, también tras los cambios de ruta del lado del cliente:
   <script src="https://tryclew.io/widget/PEGA_AQUI_TU_CLAVE.js" async></script>
   
   Busca el archivo HTML raíz o el layout raíz de este proyecto (index.html en Vite, app/layout.tsx con next/script en Next.js App Router, app.head.script de nuxt.config.ts en Nuxt, src/app.html en SvelteKit) y añade ahí la etiqueta.
   
   Tras el inicio de sesión, llama a Clew.identify() con propiedades no personales como cadenas que distingan a un usuario nuevo de uno existente, por ejemplo { signup_source: "web", onboarded: "false", role: "owner" }, y actualiza onboarded a "true" cuando el usuario complete la acción clave. Si el widget aún puede no haber cargado, define primero el stub de cola: window.TutorKit = window.TutorKit || { q: [], identify: function (p) { this.q.push(["identify", p]); } }; y llama a window.TutorKit.identify(...). Añade también atributos data-tour a la navegación principal y al botón principal de crear. Nunca envíes nombres ni emails.
   
   Reglas:
   - Usa la URL del script exactamente como está. No la descargues, no la empaquetes ni instales un paquete npm.
   - Si el proyecto define una Content-Security-Policy, permite https://tryclew.io en script-src y connect-src.
   - No cambies nada más y enséñame el diff.

   Copiar

   

4. Paso 04

   Acepta el diff, haz commit y despliega

   Revisa el diff —la etiqueta en un archivo raíz y los pequeños añadidos del prompt—, acéptalo, haz commit y push. Tu hosting despliega como siempre.

   

5. Paso 05

   Crea los tres elementos del onboarding

   En Flujos crea tres elementos: un Ventana modal con una frase de bienvenida y un enlace a la pantalla clave; un tour Tooltips paso a paso de 3–4 pasos en esa pantalla, hecho con Editar en tu sitio y Elegir elemento; y un Checklist de onboarding con las tareas de configuración restantes.

   

6. Paso 06

   Elige dónde, cuándo y a quién se muestra

   En el mismo editor, completa Dónde mostrarlo (URL de la página), Cuándo mostrarlo, Segmentación de audiencia y Frecuencia. Estos son los ajustes del ejemplo de arriba:

   Ajuste	Valor
   Popup de bienvenida
   Formato	Ventana modal
   Dónde mostrarlo (URL de la página)	Ruta exacta /deals
   Cuándo mostrarlo	Al cargar la página
   Segmentación de audiencia	Propiedad role es igual a sales_rep
   Frecuencia	Una vez por visitante
   Tour de producto
   Formato	Tooltips paso a paso
   Dónde mostrarlo (URL de la página)	Sección por prefijo /deals/pipeline
   Cuándo mostrarlo	Al cargar la página
   Segmentación de audiencia	Sin reglas: todos los que abren la página
   Frecuencia	Una vez por visitante
   Checklist
   Formato	Checklist de onboarding
   Dónde mostrarlo (URL de la página)	Sección por prefijo /deals
   Cuándo mostrarlo	En la visita número N: 2
   Segmentación de audiencia	Sin reglas: todos los que abren la página
   Frecuencia	Una vez por visitante

   

7. Paso 07

   Publica y compruébalo en el sitio real

   Pon Estado en Publicado y guarda. Abre la página en una ventana privada: Clew recuerda quién ya vio un elemento de “una vez”, así que tu navegador habitual puede saltárselo. Las vistas, finalizaciones y abandonos aparecen en las estadísticas.

   

Errores comunes: onboarding de usuarios en una app hecha con Cursor