Cómo crear un tour de producto en WordPress sin programador
Un recorrido guiado en WordPress en unos veinte minutos: instala una línea, recorre tu propia interfaz en el editor visual y publica un tour que empieza justo donde lo necesitan los usuarios nuevos.
- Tiempo
- ● 20 minutos
- Precio
- Plan Free
- Quién lo hace
- Administrador de WordPress
Ejemplo: un tour de producto en WordPress
Una web de cursos online en WordPress con un plugin LMS ve alumnos perdidos tras matricularse. En /courses un tour de 3 pasos enseña la lista de lecciones, el botón “Marcar como completada” y dónde aparece el certificado.
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.
Cómo crear el tour de producto en WordPress, paso a paso
- 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
Instala un plugin de código para la cabecera
En Plugins → Add New instala y activa el plugin gratuito WPCode (o usa la opción de “scripts en la cabecera” de tu tema). No edites
header.php: las actualizaciones del tema lo sobrescriben.
Paso 2 · ilustración esquemática - Paso 03
Pega la línea en el cuadro Header
Abre Code Snippets → Header & Footer, pega la línea de Clew en Header y pulsa Save Changes.
Paso 3 · ilustración esquemática - Paso 04
Vacía la caché
Si usas WP Rocket, LiteSpeed Cache, W3 Total Cache o una CDN, vacía la caché. En los ajustes de “retrasar JavaScript”, excluye
tryclew.io/widget.
Paso 4 · ilustración esquemática - 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.
Paso 5 · ilustración esquemática - 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 /coursesCuá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 6 · ilustración esquemática - 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.
Paso 7 · ilustración esquemática
Errores comunes: tour de producto en WordPress
“Retrasar JavaScript” oculta el tour de producto hasta la interacción
WP Rocket, LiteSpeed y Perfmatters pueden aplazar los scripts hasta el primer scroll o clic. El widget arranca tarde y un elemento Al cargar la página parece roto. Añade tryclew.io/widget a las exclusiones.
Las páginas con sesión iniciada suelen ser distintas
Las áreas de miembros (/my-account de WooCommerce, páginas de cursos de un LMS) muestran otro marcado que el de los visitantes anónimos. Crea los pasos con la sesión de un miembro típico, no como administrador con barras extra.
Ancla los pasos a elementos que ve todo el mundo
Banners, bloques personalizados y variantes de tests A/B no los ven todos. Usa la navegación, títulos y botones principales; si falta un elemento, el paso aparece en Estado.
Preguntas y respuestas
¿Funciona con LearnDash o Tutor LMS?
Sí. Clew no se integra con el plugin: señala los elementos de la página del curso en el navegador.
¿Funciona en WordPress.com?
Plugins como WPCode necesitan el plan Business de WordPress.com o superior. WordPress autoalojado funciona en cualquier hosting.
¿Se verá en wp-admin?
Los plugins de cabecera suelen añadir el código solo al sitio público. Para guías dentro de /wp-admin, añade la línea con un snippet para el área de administración (WPCode permite elegirla).
¿El tour de producto es gratis?
Sí: los tours están en el plan Free con hasta 3 publicados. Solo necesitas Pro para reglas de audiencia, tests A/B y más tours.
¿Tengo que saber selectores CSS?
No. Editar en tu sitio abre el editor en tu página y Elegir elemento rellena el selector cuando haces clic en un elemento.
Qué más puedes añadir en WordPress
- Cómo añadir un popup a una web en WordPress sin programador
- Cómo añadir un tooltip a una web en WordPress sin programador
- Cómo crear una guía interactiva de producto en WordPress sin programador
Tour de producto en otras plataformas
- Google Tag ManagerCómo crear un tour de producto con Google Tag Manager sin programador
- LovableCómo crear un tour de producto en una app de Lovable sin programador
- Bolt.newCómo crear un tour de producto en una app de Bolt.new sin programador
- v0Cómo crear un tour de producto en una app de v0 sin programador
- ReplitCómo crear un tour de producto en una app de Replit sin programador
- CursorCómo crear un tour de producto en una app hecha con Cursor sin programador
- Claude CodeCómo crear un tour de producto con Claude Code sin programador
- ChatGPT CodexCómo crear un tour de producto con ChatGPT Codex sin programador
- Qwen CodeCómo crear un tour de producto con Qwen Code sin programador