Cómo crear un tour de producto sin programador
Un tour de producto le enseña a un usuario nuevo dónde está cada cosa: “aquí creas un proyecto, aquí invitas al equipo”. En Clew haces clic en los elementos de tu propia app, escribes una frase por paso y publicas: sin aprender selectores y sin desplegar código.
- Tiempo
- ● 20 minutos
- Precio
- Plan Free
- Formato
- Tooltips paso a paso
Qué es un tour de producto de Clew
Un tour de producto (recorrido guiado, walkthrough) es una cadena de tooltips pegados a elementos de la página. En Clew es el formato Tooltips paso a paso: cada paso señala un elemento, tiene título y texto, y el usuario pulsa Siguiente hasta Listo.
No hace falta escribir selectores CSS: Editar en tu sitio abre el editor sobre tu sitio, donde Elegir elemento te deja hacer clic en el propio elemento. El tour sigue la navegación de las aplicaciones de una sola página e indica en qué paso abandona la gente.
Dónde compensa un tour
Primera sesión en un SaaS
De tres a cinco pasos en la pantalla principal, hasta la acción que aporta valor primero. Los tours largos se saltan.
Una sección nueva o rediseñada
Los usuarios abren una pantalla cambiada: un tour corto en esa URL explica qué se movió.
Formularios complejos
Ajustes, integraciones, informes con filtros: un tooltip por campo difícil ahorra tickets de soporte.
Ver dónde se paran
El embudo muestra cuántos vieron cada paso. Un paso con mucha caída suele indicar una pantalla confusa, no un mal tooltip.
Cómo crear un tour de producto en 5 pasos
- 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>
Paso 1 · ilustración esquemática - Paso 02
Añade la línea a tu sitio una sola vez
Pega el snippet donde gestionas tu sitio. Cada guía lleva 5–10 minutos y no hay que repetirla: todo lo demás se hace en Clew.
Paso 2 · ilustración esquemática - Paso 03
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.
Paso 3 · ilustración esquemática - Paso 04
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 /app/reportsCuá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 
Paso 4 · ilustración esquemática - Paso 05
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.
Paso 5 · ilustración esquemática
Paso a paso: tour de producto en tu plataforma
Elige la plataforma con la que está hecho tu sitio o tu app. Cada guía trae los pasos de inserción, un ejemplo con ajustes listos y los errores típicos de esa plataforma.
¿Es gratis?
Gratis en el plan Free de Clew, sin tarjeta y sin límite de tiempo: un sitio y hasta 3 tours o tooltips publicados. Las reglas de audiencia y los tests A/B llegan con Pro.
Preguntas y respuestas
¿El tour de producto es gratis en Clew?
Sí. Los tours y tooltips están en el plan Free: un sitio, hasta 3 publicados, sin tarjeta y sin límite de tiempo. Las reglas de audiencia y los tests A/B llegan con Pro.
¿Y si los desarrolladores cambian la página?
Si un elemento desaparece, la pestaña Estado muestra el paso que no lo encuentra. Pide a los desarrolladores un atributo data-tour en los elementos clave: los selectores como [data-tour="create"] sobreviven a los rediseños.
¿Cuántos pasos debe tener?
Entre tres y cinco. Muestra el camino al primer resultado, no cada botón. Lo demás, en tooltips en su propia pantalla o en un checklist.
¿Funciona en apps de React, Vue o Next.js?
Sí. El widget detecta los cambios de ruta del lado del cliente, así que un tour ligado a /dashboard arranca cuando el usuario navega ahí sin recargar.