Tours y onboarding en una app hecha con IA

Por Andrey Davydov · actualizado 29 de septiembre de 2026

¿Hiciste tu app con Lovable, Bolt.new, v0, Replit, Cursor o Claude Code y ahora los usuarios nuevos se pierden? Pega un prompt, comprueba que cambió un solo archivo y publica. Los tours, checklists y avisos de mejora se crean en Clew, no con más prompts.

Tiempo: ● 5 minutos
Quién lo hace: Tú y tu asistente de IA
Pasos: 6

Paso a paso

Paso 01
Copia tu código de Clew
Regístrate o inicia sesión en Clew y abre Admin → Resumen. La tarjeta “El widget aún no ha dado señales.” muestra tu línea con la clave real: haz clic para copiarla. Tenla a mano para el paso 3.
Paso 1 · ilustración esquemática
Paso 02
Abre el proyecto en un modo que edite archivos
- Claude Code: ejecuta claude en la carpeta del proyecto.
- Cursor: abre el chat en modo Agent.
- Lovable, Bolt.new, v0: el chat del proyecto.
- Replit: Agent o Assistant.
Paso 2 · ilustración esquemática

Paso 03

Pega el prompt con tu clave

Copia el prompt, sustituye PEGA_AQUI_TU_CLAVE por tu clave y envíalo. El prompt indica el archivo correcto para cada stack, así el asistente no reparte la etiqueta por varios componentes.

Añade a esta app el widget de onboarding de Clew.

Inserta esta etiqueta exactamente así, para que cargue una sola vez en cada página, también tras los cambios de ruta en el cliente:
<script src="https://tryclew.io/widget/PEGA_AQUI_TU_CLAVE.js" async></script>

Dónde ponerla (elige lo que corresponda a este proyecto):
- HTML simple, React + Vite, Vue + Vite: index.html, justo antes de </head>
- Next.js App Router: app/layout.tsx, con next/script: <Script src="(la misma URL)" strategy="afterInteractive" /> dentro de <body>
- Next.js Pages Router: pages/_app.tsx, con el mismo componente next/script
- Nuxt 3: nuxt.config.ts, app.head.script: [{ src: "(la misma URL)", async: true }]
- SvelteKit: src/app.html, justo antes de %sveltekit.head%
- Astro: el <head> del layout compartido
- Cualquier otro caso: la plantilla HTML raíz o el layout raíz que se renderiza en todas las páginas

Reglas:
- Usa la URL exactamente como está. No descargues el script, no lo empaquetes ni instales paquetes npm.
- Añádela en un solo sitio, nunca dentro de un componente que se vuelve a renderizar.
- 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.

Chat de un asistente de IA con el prompt de instalación de Clew — Paso 3 · ilustración esquemática

Paso 04
Comprueba que cambió un solo archivo
Revisa el diff antes de aceptarlo. Lo esperado: un archivo y una línea añadida (o un pequeño bloque <Script> en Next.js) con tu clave real. Si el asistente también tocó componentes, instaló paquetes o copió el script al proyecto, pídele que lo deshaga y deje solo la etiqueta.
Paso 4 · ilustración esquemática
Paso 05
Publica o despliega
La etiqueta solo funciona en la app desplegada. Pulsa Publish o Deploy en Lovable, Bolt.new, v0 o Replit. En Claude Code o Cursor, haz commit y push como siempre si tu hosting despliega desde git.
Paso 5 · ilustración esquemática
Paso 06
Comprueba que funciona
Abre la app publicada en una ventana normal y vuelve a Admin → Resumen en Clew. En menos de un minuto la tarjeta se pone verde: “El widget está activo.”
Paso 6 · ilustración esquemática

Dónde va la etiqueta en cada stack

Úsalo para revisar el trabajo del asistente. Sustituye el marcador por tu clave.

Stack	Archivo	Qué se añade
HTML simple	`index.html` (cada página)	La línea antes de `</head>`
React + Vite, Vue + Vite	`index.html` en la raíz del proyecto	La línea antes de `</head>`
Next.js App Router	`app/layout.tsx`	`<Script src="https://tryclew.io/widget/PEGA_AQUI_TU_CLAVE.js" strategy="afterInteractive" />` dentro de `<body>`
Next.js Pages Router	`pages/_app.tsx`	El mismo componente `<Script>`
Nuxt 3	`nuxt.config.ts`	Una entrada en `app.head.script` con `src` y `async: true`
SvelteKit	`src/app.html`	La línea antes de `%sveltekit.head%`
Astro	layout compartido	La línea dentro de `<head>`

Qué suele generar cada herramienta

Los proyectos de Lovable y Bolt.new suelen ser React + Vite, así que la etiqueta va en index.html. v0 genera Next.js con App Router: app/layout.tsx. En Replit depende de la plantilla. Con Claude Code y Cursor, el asistente lee tu repositorio y elige el archivo de la lista del prompt.

Problemas frecuentes y preguntas

¿Es seguro pegar la clave del sitio en un chat de IA?

Sí. La clave del sitio no es una contraseña: es pública y acaba en el HTML de tu página. No sirve para editar tours ni para leer tus datos.

El asistente instaló un paquete npm o copió el script

Pídele que lo revierta. Clew se carga desde su propia URL para que las correcciones y novedades lleguen a tu app sin recompilar.

¿La etiqueta sobrevivirá a los siguientes cambios de la IA?

Normalmente sí, porque está en el archivo raíz. Si tras una regeneración grande Admin → Resumen deja de mostrar “El widget está activo”, vuelve a enviar el prompt.

El panel sigue diciendo “El widget aún no ha dado señales.”

Abre una página del sitio publicado en una ventana normal del navegador y recarga el panel al cabo de un minuto. Si no cambia: comprueba que el cambio está publicado y no solo guardado; que sustituiste el marcador por tu clave real; y en las herramientas de desarrollo del navegador, pestaña Network, busca widget/…js: debe responder 200. Un 404 significa que la clave es incorrecta.

Mi sitio tiene Content Security Policy

Dos directivas y nada más: script-src https://tryclew.io y connect-src https://tryclew.io. El widget no usa eval, ni URL blob:, ni workers, y añade su hoja de estilos por CSSOM en vez de como marcado, así que style-src 'unsafe-inline' no hace falta en Chrome, Edge, Firefox 101+ ni Safari 16.4+. Los navegadores más antiguos reciben un elemento <style> de reserva: si aún los admites y tu style-src no lleva 'unsafe-inline', allí los tours se verán sin estilos. Para copiar y pegar: Content-Security-Policy: script-src 'self' https://tryclew.io; connect-src 'self' https://tryclew.io;

¿Puedo fijar la versión del widget y usar <code>integrity=</code>?

Sí. La línea de las guías — /widget/PEGA_AQUI_TU_CLAVE.js — es la continua: siempre sirve el widget actual, y por eso no puede llevar un hash de Subresource Integrity (los bytes cambian). Junto a ella, cada versión se sirve también en una dirección inmutable con hash del contenido. Consulta https://tryclew.io/api/v1/widget-version?site=TU_CLAVE y recibirás version, path e integrity; ponlos en la etiqueta: <script src="https://tryclew.io/widget/v/<version>/TU_CLAVE.js" integrity="sha384-…" crossorigin="anonymous" async></script>. Una URL fijada no cambia nunca, así que el navegador rechaza el archivo si difiere un solo byte. Actualizas la versión cuando quieras: consulta el mismo endpoint en tu script de despliegue. Nada más cambia: los tours se siguen publicando desde el editor de Clew sin tocar el sitio.

¿Un bloqueador de anuncios se come el widget?

No. Nuestro dominio no está en ninguna de las listas grandes —EasyList, EasyPrivacy, AdGuard, uBlock Origin—, así que los tours, los tooltips y las checklists aparecen también para quien usa un bloqueador. Lo delicado son las estadísticas: EasyPrivacy bloquea toda petición ping de terceros, por eso el widget envía sus eventos como una petición normal, que esas listas sí dejan pasar. Para quedar fuera del alcance de cualquier lista personalizada, sirve el widget desde tu propio dominio: apunta https://tu-sitio/clew/* a https://tryclew.io/* en tu CDN o nginx y cambia la línea por <script src="/clew/widget/TU_CLAVE.js" async></script>. El widget consultará la API con el mismo prefijo y todo será de primera parte.

¿Funciona en aplicaciones de una sola página (React, Vue, Next.js)?

Sí. Carga la línea una vez, en el HTML raíz o el layout raíz. El widget detecta por sí mismo los cambios de ruta en el cliente (History API y cambios de hash), así que no lo añadas por ruta ni lo dispares con un activador “History Change”: una segunda copia se ignora, pero es trabajo inútil.

¿Y el banner de consentimiento de cookies?

Clew guarda una cookie propia y entradas en localStorage para recordar qué tours completó cada visitante y contar las finalizaciones. No envía datos a redes publicitarias. Si puede ejecutarse antes del consentimiento lo decide tu política de privacidad; si tu herramienta de consentimiento lo bloquea hasta que el visitante acepta, los tours simplemente empiezan después.

Uso un plugin de caché u optimización

Vacía la caché después de instalar; si no, los visitantes seguirán recibiendo páginas antiguas sin la línea. Si el plugin retrasa, combina o difiere JavaScript (WP Rocket, LiteSpeed Cache, Autoptimize, Cloudflare Rocket Loader), excluye tryclew.io/widget de esas optimizaciones.

¿Hará más lento mi sitio?

No. La línea lleva async: el navegador descarga el widget en paralelo y lo ejecuta sin bloquear la página. El widget no tiene dependencias.

¿Puede mi app avisar a Clew de que un paso del onboarding está hecho?

Sí, y es una sola línea. Una tarea del checklist puede llevar una regla que la marque sin que el visitante haga clic: una página a la que llega, un clic en un elemento que indiques con un selector CSS, o un evento que dispare tu propio código — Clew.complete('invited'), donde invited es la clave que escribiste junto a la tarea en el editor. Llámalo en el momento en que la tarea está realmente hecha, por ejemplo cuando tu API confirma la invitación. Es seguro llamarlo en cualquier momento y devuelve false si no hay ningún checklist con esa clave en la página. El nombre antiguo TutorKit sigue funcionando.

Otras formas de instalar

Gestor de etiquetas

Google Tag Manager

Etiqueta de HTML personalizado en todas las páginas, comprobación en vista previa y publicación. Para sitios que ya usan GTM.

Tiempo: 10 minutos · sin desarrolladoresAbrir guía →Sin código

Constructores web y CMS

WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda o HTML: dónde está el campo de código del head y qué pulsar.

Tiempo: 5 minutos · sin desarrolladoresAbrir guía →