Popups y tours en WordPress, Webflow, Shopify y otros constructores
¿Quieres un popup en tu tienda, un tooltip en la página de precios o un tour para miembros? Todos los constructores populares tienen un campo de código para el head de todo el sitio: pega ahí la línea de Clew una vez y crea cada formato en el editor de Clew.
- Tiempo
- ● 5 minutos
- Quién lo hace
- Administrador del sitio
- 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.
<!-- 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>
Paso 1 · ilustración esquemática - Paso 02
Busca el campo de código del head de todo el sitio
Busca un ajuste llamado Custom code, Code injection o Header que se aplique a todo el sitio y no a una sola página. La ruta exacta de cada plataforma está en la tabla de abajo.
Paso 2 · ilustración esquemática - Paso 03
Pega la línea en el head
Pega tu línea en el campo del head, no en el body ni en una sola página. Si ya hay otros scripts, como la analítica, añade Clew en una línea nueva; el orden no importa.
Paso 3 · ilustración esquemática - Paso 04
Guarda y publica
Guarda el ajuste. En Webflow, Framer y Tilda el código llega al sitio real solo después de volver a publicarlo; en WordPress, Shopify, Wix y Squarespace basta con guardar.
Paso 4 · ilustración esquemática - Paso 05
Vacía la caché
Si el sitio usa un plugin de caché o una CDN (WP Rocket, LiteSpeed Cache, W3 Total Cache, Cloudflare), vacía la caché para que los visitantes reciban páginas con la nueva línea. Los plugins que retrasan o combinan JavaScript deben excluir
tryclew.io/widget.
Paso 5 · ilustración esquemática - Paso 06
Comprueba que funciona
Abre cualquier página del sitio publicado 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
Rutas exactas por plataforma
Los nombres de los menús están en inglés, como en las ilustraciones; si usas la plataforma en español, la ruta es la misma.
| Plataforma | Dónde pegar | Nota |
|---|---|---|
| WordPress | Instala el plugin gratuito WPCode → Code Snippets → Header & Footer → Header → Save Changes | O la opción de “scripts en la cabecera” de tu tema. No edites archivos del tema: las actualizaciones los sobrescriben. En WordPress.com, los plugins requieren el plan Business o superior. |
| Webflow | Site settings → Custom code → Head code → Save y después Publish | El código personalizado requiere un Site plan de pago. |
| Shopify | Online Store → Themes → … → Edit code → layout/theme.liquid, justo antes de </head> → Save | Se aplica a la tienda. Repítelo si cambias de tema. |
| Wix | Settings → Custom code → + Add Custom Code → All pages, Load code once, Head → Apply | Requiere un plan Premium y un dominio conectado. |
| Squarespace | Settings → Developer tools → Code injection (en sitios antiguos: Advanced) → Header → Save | La inyección de código no está en el plan más barato. |
| Framer | Site settings → Custom code → End of <head> tag → Save y después Publish | El código personalizado requiere un plan de pago. |
| Tilda | Site Settings → More → HTML code for the HEAD section → Edit code → Save y después Publish all pages | Requiere el plan Personal o Business. |
| HTML simple | Antes de </head> en cada página, o una vez en la cabecera compartida | Sube los archivos modificados al hosting. |
¿Web de marketing o producto?
Los tours ayudan sobre todo dentro del producto al que la gente inicia sesión. Si tu web de marketing está en Webflow pero la app es a medida, instala Clew en la app: mira la guía para asistentes de IA o la de Google Tag Manager.
Problemas frecuentes y preguntas
¿Puedo añadirlo solo en algunas páginas?
Añádelo en todo el sitio. En qué páginas y a quién se muestra un tour se configura en Clew, así no tendrás que volver a los ajustes del sitio.
Mi plan no tiene campo de código personalizado
Webflow, Framer, Wix y Squarespace solo permiten scripts de terceros en planes de pago, y no hay alternativa soportada. Sube de plan o instala Clew directamente en el producto.
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
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 →