Guías por plataforma 10 de octubre de 2026

Cómo añadir un widget de vídeo a Framer

Aprende a instalar un widget de vídeo en Framer, ajustar dónde aparece y su imagen de marca, y probarlo en ordenador y móvil antes de publicar.

Cómo añadir un widget de vídeo a Framer

Lo más importante

  • Para instalar CompleteGreet, copia el script del widget en el código personalizado del proyecto de Framer y publica el sitio.
  • En un sitio de Framer, las reglas para mostrar el widget, sus acciones, los formularios y la imagen de marca se configuran en el servicio del widget, no en el editor de páginas de Framer.
  • Prueba la página publicada en un ordenador y en un móvil.

¿Cómo instalas CompleteGreet en Framer?

Para instalar CompleteGreet, copia el script del widget en el código personalizado del proyecto de Framer y publica el sitio. El script carga el widget flotante en tus páginas.

Diagrama del proceso para instalar CompleteGreet en Framer
  1. En CompleteGreet, abre la configuración del widget y copia el script de instalación. Usa el script del widget que has configurado, no el código para insertar un vídeo dentro de una página.

  2. En Framer, abre el proyecto y selecciona Project Settings y después Custom Code en la barra lateral izquierda. Haz clic en Add Script, o en el icono + si ya tienes entradas de código. Ponle un nombre que puedas reconocer más adelante.

  3. Elige el inicio de head como ubicación y selecciona All pages. Pega el script completo en el campo de código. No modifiques el script.

  4. Guarda la entrada, vuelve al editor del sitio y haz clic en Publish. Los cambios de Project Settings no aparecen en el sitio público hasta que termina una nueva publicación. Comprueba la URL publicada.

La pantalla Custom Code está en Project Settings, fuera del editor visual.

Para la primera comprobación, usa la URL pública. La vista previa del editor es distinta del sitio publicado. Una ventana privada del navegador ayuda a descartar una copia antigua de la página o una sesión ya iniciada.

Por ejemplo, después de publicar un sitio de portfolio, abre su página de inicio y espera unos segundos a que aparezca el widget flotante. Después pega en el navegador la URL de una segunda página para comprobar que All pages también se aplica allí.

Comprueba la misma URL con un ancho de móvil de unos 390 píxeles y también en un ordenador. Si el widget aparece en el ordenador pero no en el móvil, mira si una barra de navegación fija o un aviso de cookies lo tapa antes de cambiar el script de instalación.

Si el widget no aparece en ninguna página, vuelve a Custom Code. Comprueba que la entrada esté guardada, activada y configurada para el inicio de head. Corrígela, publica de nuevo y recarga la página pública.

¿Qué puedes personalizar en Framer?

En un sitio de Framer, las reglas para mostrar el widget, sus acciones, los formularios y la imagen de marca se configuran en el servicio del widget, no en el editor de páginas de Framer. Framer controla el diseño de la página que lo rodea.

Comparación entre el diseño de Framer y los ajustes del widget

Configura el widget para que aparezca en URL concretas y comprueba la página pública en la dirección exacta que has seleccionado. Una barra al final de la URL puede dar lugar a errores en una prueba rápida. Usa la URL publicada y no te fíes solo de la vista previa del editor.

Elige la acción adecuada para la página: un enlace, una reserva, un chat, una llamada, un enlace a una página de producto o un formulario. Usa un texto claro en el botón principal para que los visitantes sepan qué ocurrirá antes de pulsarlo.

Opciones de botones del widget de vídeo de CompleteGreet: llamada, chat, enlace, formulario, reserva y productos.

Un formulario permite a los visitantes enviar sus datos sin salir de la página. Prueba los campos obligatorios y el destino de los envíos en el sitio publicado, no solo en la pantalla de configuración.

La personalización de marca tiene un límite práctico: los estilos de página de Framer no controlan automáticamente un widget insertado. El plan BUILD de CompleteGreet incluye la opción de quitar la insignia Built With. Comprueba el aspecto final en la vista previa del widget antes de publicar.

¿Qué debes comprobar antes de publicar?

Prueba la página publicada en un ordenador y en un móvil. Comprueba que la burbuja de vídeo no tape la navegación, los avisos de cookies ni los botones fijos. La vista previa no basta.

Diagrama de las comprobaciones en ordenador y móvil antes de publicar

En un ordenador, abre la burbuja y prueba todos los controles. Ciérrala y comprueba que puedes seguir desplazándote por la página con normalidad. En un móvil, pulsa el control de cierre y cada botón del vídeo. Los controles pequeños que funcionan bien con un ratón pueden resultar incómodos al pulsarlos con el pulgar.

Comprueba también el ancho mínimo del diseño para móvil. En ese tamaño, los diseños de Framer pueden acercar unos elementos a otros.

Las reglas de visualización por página necesitan una prueba aparte. Abre la URL exacta donde debe aparecer la burbuja y después comprueba la página de inicio y una página cercana donde deba permanecer oculta.

CompleteGreet permite mostrar burbujas en URL concretas. Prueba los dos casos de cada regla: que la burbuja esté oculta no demuestra por sí solo que la configuración sea correcta. Comprueba que la regla coincida con la ruta de la página publicada, sobre todo en páginas anidadas, como una página de producto dentro de una categoría. Mantén una lista breve de URL de prueba mientras ajustas la regla para comprobar cada cambio en las mismas páginas.

Framer admite componentes de vídeo dentro de la página y contenido insertado, mientras que un widget de vídeo puede aparecer separado del contenido de la página. Elige según dónde deba mostrarse el vídeo y cómo quieras que lo encuentren los visitantes.

Una burbuja flotante con una persona que presenta el sitio tiene una función distinta de un vídeo dentro de una página de Framer.

Usa el componente Video de Framer para colocar un vídeo dentro de una página, o sus componentes YouTube y Vimeo para vídeos alojados en esas plataformas. Usa un componente Embed cuando un servicio requiera un iframe o un script.

Comprueba que el formato encaje con la ubicación del vídeo y que no tape la navegación ni los controles de consentimiento. Revisa la página publicada en ordenador y móvil antes del lanzamiento.

Preguntas frecuentes

¿Qué elemento de Framer admite el script de un widget de vídeo?

Para un widget flotante de CompleteGreet, pega el script de instalación en Project Settings y después en Custom Code, como se explica arriba. El componente Embed de Framer sirve para contenido colocado dentro de la página, incluidos los iframe y los scripts que los crean. Comprueba el sitio publicado después de añadir el script para confirmar que el widget se carga donde esperas.

¿Qué debo comprobar si un componente Embed de Framer queda en blanco?

Para insertar un iframe, comprueba que la URL o el script estén en el componente Embed y que el sitio de origen permita insertar su contenido. Algunos sitios lo bloquean mediante cabeceras HTTP. Para el widget flotante de CompleteGreet, revisa el script en Project Settings y después en Custom Code. Comprueba también que las reglas de URL incluyan la dirección de la página publicada. Prueba la página pública antes de dar por hecho que la instalación ha fallado.

¿El componente Video de Framer funciona como una burbuja de vídeo flotante?

No. El componente Video de Framer muestra el vídeo dentro del diseño de la página, mientras que un saludo flotante de CompleteGreet usa un script de widget insertado. Usa el componente Video de Framer para vídeos subidos o alojados, con opciones como reproducción automática e imagen de portada. Para el saludo flotante de CompleteGreet, usa Project Settings y después Custom Code.

¿Los campos del CMS de Framer pueden controlar el vídeo de cada página de detalle?

Sí. Añade un campo de texto Video URL para un vídeo externo o un campo File para un formato subido, como MP4. Después conecta ese campo al componente Video de Framer mediante una variable. El vídeo puede cambiar con cada elemento del CMS. Un saludo de CompleteGreet es un widget insertado por separado, no un campo de vídeo del CMS dentro de la página.

Azad Habib

Azad Habib

CEO & Founder of CompleteGreet

Azad Habib is the founder of CompleteGreet. With a background in ecommerce and user experience, he works at the intersection of trust, clarity, and conversion to help businesses make their websites feel more human from the first click.