Cómo añadir tooltips y pistas a tu web sin programador
A veces al visitante le basta una frase en el sitio justo: “solo te llamamos para confirmar”, “talla pequeña: pide una más”. Clew pone esa frase junto al propio elemento, sin tocar la plantilla.
- Tiempo
- ● 10 minutos
- Precio
- Plan Free
- Formato
- Tooltips paso a paso
Qué es un tooltip de Clew
Un tooltip es un elemento de un solo paso con el formato Tooltips paso a paso: una burbuja pequeña con título y texto, pegada a un elemento de la página y colocada automáticamente (o Arriba, Abajo, Izquierda, Derecha).
Puede aparecer Al cargar la página, Tras N segundos o Al hacer clic en un elemento; esta última opción convierte cualquier icono o enlace en el disparador de la pista. El elemento lo eliges haciendo clic con Elegir elemento.
Buenos lugares para una pista
Campos de formulario que hacen dudar
Teléfono, NIF, tamaño de empresa: una línea sobre por qué lo pides quita fricción.
Precios y selectores de plan
Qué significa “por usuario” o cuánto ahorras con el pago anual, justo al lado del número.
Opciones de producto
Tallas, compatibilidad y plazos junto al selector, no en unas FAQ que nadie abre.
Ajustes dentro de una app
Una pista al hacer clic junto a una opción avanzada, tantas veces como haga falta.
Cómo añadir un tooltip 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
Pega el tooltip al elemento
En Clew abre Flujos → + Nuevo flujo, deja Tooltips paso a paso y pulsa Editar en tu sitio. En tu página pulsa Elegir elemento, haz clic en el campo o botón y escribe un título corto y una frase. Ajusta Posición si la posición automática tapa algo importante.
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 /productsCuándo mostrarlo Tras N segundos: 8 segundos 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: tooltip 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
¿Los tooltips son gratis?
Sí. Los tooltips y tours están en el plan Free: un sitio, hasta 3 publicados, sin tarjeta y sin límite de tiempo.
¿Puede aparecer cada vez?
Sí: pon Frecuencia en En cada visita. Con Al hacer clic en un elemento se convierte en una pista bajo demanda.
¿Funciona en móvil?
Sí. La burbuja se recoloca para caber en pantalla y desplaza la página hasta el elemento.
¿Y si el elemento no está en la página?
El tooltip no se muestra y la pestaña Estado avisa del elemento que falta, así te enteras tras un rediseño.