Popups, tours de producto y checklists sin programador
¿Quieres un popup de bienvenida, un tour guiado por tu app o un checklist de onboarding, pero los desarrolladores están ocupados? Clew es una línea en tu sitio que añades como ya gestionas la web: un gestor de etiquetas, un asistente de IA o un constructor. Después, todos los formatos se crean en un editor visual, sin releases.
¿Qué quieres añadir?
Elige el resultado que necesitas. Cada página explica cuándo ayuda el formato, cómo configurarlo en Clew y cuánto cuesta: el precio sale directamente de la tabla de planes.
Cómo añadir un popup a tu web sin programador
Una ventana modal con tu oferta, anuncio o ayuda, en la página correcta, en el momento justo y una vez por visitante.
Prueba gratis de 14 días, sin tarjetaAbrir guía →Tour de productoCómo crear un tour de producto sin programador
Tooltips paso a paso que guían al usuario por una pantalla: señalan el botón, lo explican y pasan al siguiente paso.
Plan FreeAbrir guía →Checklist de onboardingCómo añadir un checklist de onboarding a tu app sin programador
Una lista con progreso en una esquina de la app: las primeras tareas del usuario nuevo, cada una con enlace a la página correcta.
Prueba gratis de 14 días, sin tarjetaAbrir guía →Onboarding de usuariosCómo configurar el onboarding de usuarios sin programador
Un flujo de primera sesión: popup de bienvenida, un tour corto por la pantalla clave y un checklist para la siguiente visita.
Tours gratis · resto con prueba de 14 díasAbrir guía →TooltipCómo añadir tooltips y pistas a tu web sin programador
Una sola pista junto a un campo o botón, que aparece cuando el visitante llega ahí o al hacer clic.
Plan FreeAbrir guía →Guía interactivaCómo crear una guía interactiva de producto sin programador
Un checklist de ayuda cuyos puntos lanzan tours en las páginas correctas: un manual práctico dentro del producto.
Prueba gratis de 14 días, sin tarjetaAbrir guía →Aviso de paywallCómo añadir un aviso de paywall para mejorar de plan sin programador
Un modal de mejora dirigido a usuarios gratis que llegan a una función de pago, con enlace a tu propia página de precios.
Prueba gratis de 14 días, sin tarjetaAbrir guía →Elige tu camino
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.
Abrir guía →Vibe codingAsistentes de IA para programar
Un prompt para Claude Code, Cursor, Lovable, Bolt.new, v0 y Replit que coloca la línea en el archivo raíz correcto.
Abrir guía →Sin códigoConstructores 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.
Abrir guía →¿Ya está instalado? Ahora comprueba qué funciona
Reparte a los visitantes entre dos versiones de un tour, tooltip o checklist y quédate con la que más gente termina.
Qué guía te conviene
- Tu sitio ya tiene Google Tag Manager y puedes publicar en élGoogle Tag Manager →
- Creas la app con Lovable, Bolt.new, v0, Replit, Cursor o Claude CodeAsistentes de IA para programar →
- El sitio está en WordPress, Webflow, Shopify, Wix, Squarespace, Framer o TildaConstructores web y CMS →
Dónde conseguir tu código
Todas las guías empiezan aquí. Crea una cuenta gratis, añade tu sitio y abre Admin → Resumen. La tarjeta “El widget aún no ha dado señales.” muestra tu línea personal: haz clic en ella para copiarla.
La línea tiene este aspecto, pero con tu clave en lugar del marcador. La clave es pública a propósito: de todos modos acaba en el HTML de tu página.
<!-- 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>
Tours de producto, popups y onboarding en la era de la IA → (PDF, 2 páginas · La guía está en inglés.)
Problemas frecuentes y preguntas
¿De verdad no necesito un desarrollador?
No, si puedes editar los ajustes de tu sitio, tu contenedor de GTM o tu proyecto creado con IA. Si el producto es una app a medida y nadie del equipo tiene acceso, pulsa Invitar a un desarrollador en Admin → Resumen: prepara un correo con la línea exacta y las instrucciones. Para un desarrollador es trabajo de cinco minutos.
¿Qué método es mejor?
El que ya usas. Todas las guías añaden la misma línea y Clew funciona igual después. La instalación directa (constructor o asistente de IA) carga un poco antes que un gestor de etiquetas; solo se nota en un tour que arranca justo al abrir la página.
¿Dónde va Clew: en la web de marketing o en la app?
Donde están las personas a las que quieres guiar, normalmente la aplicación web con inicio de sesión. Los tours solo funcionan en las páginas donde está la línea.
¿Tendré que reinstalar al cambiar los tours?
No. La línea no cambia: los tours, tooltips y checklists se crean y publican en el editor de Clew sin volver a tocar el sitio.
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.