Cómo añadir un popup a una web en Webflow sin programador

Por Andrey Davydov · actualizado 18 de septiembre de 2026

Guía paso a paso para un popup en Webflow: instala una línea, escribe el modal en el editor de Clew y decide cuándo aparece —tras unos segundos, al hacer scroll o en una visita repetida— sin volver a tocar la plantilla.

Tiempo: ● 10 minutos
Precio: Prueba gratis de 14 días, sin tarjeta
Quién lo hace: Administrador del sitio en Webflow

Ejemplo: un popup en Webflow

Un estudio de diseño en Webflow quiere que los visitantes de la portada vean su último caso de éxito. Un modal “Así duplicamos los registros de Acme” aparece al hacer scroll por media portada, una vez por visitante, con un botón al caso.

Este formato forma parte del plan Pro. Cada cuenta nueva empieza con una prueba gratis de 14 días con todos los formatos y reglas de audiencia, sin tarjeta. Al terminar no se borra nada y lo publicado se sigue mostrando; los tours y tooltips siguen gratis en el plan Free.

Cómo añadir el popup en Webflow, 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.
```

<script src="https://tryclew.io/widget/PEGA_AQUI_TU_CLAVE.js" async></script>
```
Paso 1 · ilustración esquemática
Paso 02
Abre Site settings → Custom code
En el panel de Webflow abre los Site settings del sitio y la pestaña Custom code. El código personalizado requiere un Site plan de pago.
Paso 2 · ilustración esquemática
Paso 03
Pega en Head code
Pega la línea de Clew en Head code y pulsa Save changes.
Paso 3 · ilustración esquemática
Paso 04
Publica el sitio
El código personalizado llega al sitio real solo tras Publish, a tu dominio propio y a webflow.io si usas ambos.
Paso 4 · ilustración esquemática
Paso 05
Escribe el popup en Clew
En Clew abre Flujos → + Nuevo flujo y elige Formato Ventana modal. Añade un paso: un título corto, una o dos frases y, en Texto del enlace / URL del enlace, el texto del botón y la página que abre. El modal no necesita selector: siempre aparece centrado.
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	Ventana modal
Dónde mostrarlo (URL de la página)	Ruta exacta `/`
Cuándo mostrarlo	Tras desplazarse un N %: 50 % de la página
Segmentación de audiencia	Sin reglas: todos los que abren la página
Frecuencia	Una vez por visitante

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: popup en Webflow

El dominio de staging cuenta como otra URL

Las reglas de URL comparan rutas, así que un popup configurado para /pricing aparece tanto en tusitio.webflow.io como en tu dominio. Es útil para probar antes de publicar en el dominio.

Las Interactions pueden solaparse

Si una Interaction de Webflow ya abre un modal al cargar, las dos capas compiten. Usa un disparador de scroll o de retraso para el popup de Clew.

No lo juntes con los popups del constructor

Si el tema o un plugin ya muestra un popup de newsletter o de cookies en esa página, el visitante verá dos capas. Desactiva uno o dale a Clew otro disparador (scroll o segunda visita).

Preguntas y respuestas

¿Puedo darle al popup el estilo de mi web en Webflow?

Defines colores de fondo, texto, borde y acento y el radio de las esquinas en Apariencia, así encaja con tu marca sin CSS.

¿Necesito un plan de pago de Webflow?

Sí. Webflow solo permite código personalizado en todo el sitio con Site plans de pago, y no hay alternativa soportada.

¿Puedo mostrar el popup solo en una página?

Sí. Instala la línea en todo el sitio y elige Ruta exacta o Sección por prefijo en Dónde mostrarlo (URL de la página). No aparecerá en ninguna otra página.

¿El popup es gratis?

El formato modal forma parte de Pro; las cuentas nuevas tienen 14 días de prueba con todo, sin tarjeta. Los tours y tooltips son gratis en el plan Free.

¿Adónde lleva el botón?

A cualquier página que pongas en URL del enlace. Se abre en otra pestaña para que el visitante no pierda la página donde estaba.

Qué más puedes añadir en Webflow

Cómo añadir un tooltip a una web en Webflow sin programador

Cómo añadir un popup a una web en Webflow sin programador

Ejemplo: un popup en Webflow

Cómo añadir el popup en Webflow, paso a paso

Copia tu snippet de Clew

Abre Site settings → Custom code

Pega en Head code

Publica el sitio

Escribe el popup en Clew