Cómo añadir un aviso de paywall en una app de Bolt.new sin programador

Ejemplo: un aviso de mejora en una app de Bolt.new

Cómo añadir el aviso de paywall en una app de Bolt.new, 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 proyecto en Bolt.new

   Abre el proyecto en bolt.new. Bolt lo ejecuta en el navegador y edita los archivos desde el chat.

   

3. Paso 03

   Envía el prompt con tu clave

   Sustituye PEGA_AQUI_TU_CLAVE por tu clave y envía el prompt de abajo. Cubre la etiqueta y lo que necesita el aviso de paywall.

   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>
   
   Es un proyecto de Bolt.new (normalmente Vite): pon la etiqueta en el index.html raíz justo antes de </head>; si es Next.js, usa next/script en el layout raíz.
   
   Cuando el usuario con sesión esté cargado, y cada vez que cambie la suscripción, llama a Clew.identify({ plan: <id del plan actual del usuario como cadena, p. ej. "free"> }). 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 un atributo data-tour a los botones de las funciones de pago (por ejemplo data-tour="export"). No añadas lógica propia de pagos, bloqueo o paywall y no cambies lo que hacen los botones.
   
   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

   Revisa los archivos y despliega

   Comprueba que index.html tiene una línea más y que no se instaló nada de npm, y pulsa Deploy (Netlify o el hosting de Bolt). La vista previa dentro de Bolt no es la app real.

   

5. Paso 05

   Escribe el aviso de mejora

   En Clew abre Flujos → + Nuevo flujo y elige Ventana modal. Un paso: un título con el beneficio (“Exportar a CSV está en Pro”), una frase de valor y, en Texto del enlace / URL del enlace, el botón y la URL de tu página de precios o checkout.

   

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
   Formato	Ventana modal
   Dónde mostrarlo (URL de la página)	Sección por prefijo /projects
   Cuándo mostrarlo	Al hacer clic en un elemento: [data-tour="new-project"]
   Segmentación de audiencia	Propiedad plan es igual a starter
   Frecuencia	En cada visita

   

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: aviso de paywall en una app de Bolt.new