Cómo crear un tour de producto en una app de Lovable sin programador

Ejemplo: un tour de producto en una app de Lovable

Cómo crear el tour de producto en una app de Lovable, 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 chat del proyecto en Lovable

   Abre tu proyecto en Lovable. El chat edita el código directamente; asegúrate de estar en la versión principal que publicas, no en un remix antiguo.

   

3. Paso 03

   Envía el prompt con tu clave

   Copia el prompt, sustituye PEGA_AQUI_TU_CLAVE por tu clave y envíalo. Además de la etiqueta, pide lo que el tour de producto necesita del código.

   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 Lovable (React + Vite): pon la etiqueta en index.html justo antes de </head>.
   
   Añade también atributos data-tour estables a los elementos que señalará un tour de producto: la navegación principal, el botón principal de crear/añadir, el filtro o buscador principal y el título de la página, por ejemplo data-tour="create-button". No cambies sus estilos, textos ni comportamiento.
   
   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 el cambio y publica

   Abre la vista de código: espera index.html con una línea añadida y los pequeños añadidos del prompt. Después pulsa Publish: el widget solo funciona en la app publicada.

   

5. Paso 05

   Construye el tour sobre tu página

   En Clew abre Flujos → + Nuevo flujo, deja Formato en Tooltips paso a paso y pulsa Editar en tu sitio. En tu página pulsa Elegir elemento, haz clic en el elemento del paso 1 y escribe un título y una o dos frases. Repite para 3–5 pasos; la vista previa se actualiza mientras escribes.

   

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	Tooltips paso a paso
   Dónde mostrarlo (URL de la página)	Sección por prefijo /dashboard
   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

   

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: tour de producto en una app de Lovable