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

Por Andrey Davydov · actualizado 18 de septiembre de 2026

Guía paso a paso para un popup en Framer: 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: Editor del sitio en Framer

Ejemplo: un popup en Framer

Una startup lanzó su versión 2 y su web está en Framer. Durante cinco segundos se ve la nueva portada; después aparece una vez un modal “La v2 ya está aquí: mira el tour de 90 segundos” con enlace al vídeo del lanzamiento.

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 Framer, 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 tu proyecto de Framer abre Site settings y la sección Custom code. Requiere un plan de sitio de pago.
Paso 2 · ilustración esquemática
Paso 03
Pega al final del head
Pega la línea de Clew en End of <head> tag y guarda.
Paso 3 · ilustración esquemática
Paso 04
Publica
Pulsa Publish. El código se ejecuta en el sitio publicado, no en la vista previa del lienzo.
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 N segundos: 5 segundos
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 Framer

Framer navega sin recargas completas

Pasar de una página a otra no recarga el documento. El widget sigue estos cambios de ruta por su cuenta, así que un popup ligado a la URL de una página aparece cuando el visitante llega.

Nombres de clase generados

Clases de Framer como framer-1x2y3z pueden cambiar tras editar. Un modal no necesita selector; si más adelante añades tooltips, revísalos en Estado tras republicar.

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 cambiar el texto sin republicar en Framer?

Sí. El popup vive en Clew: edita y guarda, y la web muestra el texto nuevo en la siguiente visita a la página.

¿Baja la puntuación de velocidad de Framer?

La línea es async y carga un script pequeño sin dependencias después de la página; no bloquea el renderizado.

¿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.

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

Ejemplo: un popup en Framer

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

Copia tu snippet de Clew

Abre Site settings → Custom code

Pega al final del head

Publica

Escribe el popup en Clew