iframe (inline frame)

Necesitas mostrar la encuesta directamente en tu pagina - no mediante un enlace, sino dentro de un bloque. Un iframe (inline frame) es un elemento HTML que incrusta una pagina web dentro de otra.

En el iframe colocas la URL de la encuesta - y el formulario aparece en tu sitio, el encuestado no se marcha a otro dominio. Comodo para formularios de feedback, encuestas tras un articulo y formularios en la cuenta del cliente. En SurveyNinja el codigo para incrustar una encuesta mediante iframe esta disponible en los ajustes de publicacion. Relacionado con el feedback - una encuesta en un iframe conserva el contexto de la pagina. Las alternativas son un enlace directo y un widget (si el servicio lo ofrece).

Un iframe es una "ventana" con contenido ajeno en tu pagina. El navegador carga la URL del iframe y la representa en el area definida.

Definicion

Iframe (inline frame) - un elemento HTML que permite incrustar un documento HTML independiente (pagina) dentro de la pagina actual. Se define con la etiqueta <iframe src="URL">. El atributo src contiene la direccion de la pagina incrustada - por ejemplo, un enlace a una encuesta. El tamano se establece con los atributos width y height o mediante CSS. Se usa para incrustar encuestas, formularios, mapas y videos en tu propio sitio. El contenido dentro del iframe esta aislado de la pagina principal (seguridad y estilos). Relacionado con HTML y la publicacion de encuestas.

En resumen: una "pagina dentro de una pagina" - muestras la encuesta con tu propio diseno sin redirigir al usuario.

Por que incrustar una encuesta mediante iframe

El encuestado permanece en tu sitio - no se va por un enlace, hay menos abandonos. Se conserva el contexto de la pagina - la encuesta esta junto al articulo, al producto o al formulario de solicitud. Un unico contexto visual - la pagina es tuya, el bloque de la encuesta esta incrustado. Comodo para landing pages, blogs y cuentas de cliente. La desventaja es que hay que fijar una altura: si la encuesta es larga o de varios pasos, el iframe puede ser alto o requerir desplazamiento dentro del marco.

Como incrustar una encuesta en un iframe

Toma el enlace de la encuesta (el enlace publico del constructor). Pegalo en el atributo src de la etiqueta iframe. Ejemplo:

<iframe src="https://surveyninja.io/es/s/xxxxx" width="100%" height="500" frameborder="0"></iframe>

Ancho y alto. width y height van en pixeles o porcentajes. 100% de ancho - la encuesta se extiende por toda la columna. Una altura de 400-600 px es tipica para una encuesta corta; para una larga pon mas (800-1000) o usa una altura adaptable mediante un script si el servicio admite postMessage. frameborder="0" elimina el borde alrededor del marco.

El codigo de insercion suele estar en la seccion "Publicacion" o "Incrustar" del servicio de encuestas. En SurveyNinja puedes copiar el codigo del iframe en los ajustes de publicacion de la encuesta - pegalo en la plantilla de tu sitio o en el bloque de tu CMS. Mas detalles en el articulo de ayuda sobre la publicacion de encuestas.

Iframe y seguridad

El navegador aisla el contenido del iframe: la pagina principal y la pagina del marco son origenes distintos (same-origin policy). Los scripts de la pagina principal no pueden acceder al contenido de un iframe de otro dominio, y viceversa. Esto protege los datos. Para incrustar una encuesta de otro dominio (por ejemplo, surveyninja.io), el servidor de la encuesta debe permitir la visualizacion en un iframe - la cabecera X-Frame-Options o Content-Security-Policy. Si el servicio prohibe la incrustacion, el iframe estara vacio o mostrara un error. Los servicios de encuestas modernos suelen permitir iframes para sus propios formularios.

Adaptabilidad y moviles

En moviles un ancho fijo en pixeles puede salirse de la pantalla. Usa width="100%" y limita el contenedor con los estilos de la pagina (max-width). Altura: en un telefono una encuesta larga funciona mejor con un iframe alto o con desplazamiento interno. Algunos servicios entregan una pagina de encuesta adaptable - se ajusta sola al ancho del iframe. Comprueba la visualizacion en el telefono despues de la insercion.

Iframe vs enlace directo vs widget

Iframe. La encuesta esta incrustada en tu pagina. Ventajas: el usuario no se va. Desventajas: necesita espacio en la pagina y ajuste de altura.

Enlace directo. El encuestado va a la URL de la encuesta. Ventajas: sencillo, sin codigo. Desventajas: salir del sitio, a veces un completion rate mas bajo por el cambio de contexto.

Widget (popup, boton flotante). La encuesta se abre en una ventana emergente o panel. A menudo se implementa mediante un iframe dentro del widget. Ventajas: no ocupa espacio hasta que se hace clic. Desventajas: algunos usuarios no lo notan o lo cierran.

La eleccion depende del objetivo: una encuesta tras un articulo - es logico un iframe al final; recoger feedback desde cualquier pagina - un widget o un enlace en la cabecera.

Atributos adicionales del iframe

title - una descripcion del marco para la accesibilidad (lectores de pantalla). sandbox - restricciones para el contenido del marco (por ejemplo, bloqueo de scripts). Para encuestas no suele hacer falta - el servicio de encuestas gestiona su propia pagina. loading="lazy" - carga diferida del iframe al desplazarse; para una encuesta al pie de la pagina puede acelerar la carga. Si la encuesta esta sobre el pliegue - mejor sin lazy, para que el formulario este listo de inmediato.

Cuando un iframe no es la mejor opcion

Una encuesta muy larga en una sola pagina - la altura del iframe se vuelve enorme y la pagina "salta". Considera un enlace directo o un widget paso a paso. Los firewalls corporativos estrictos a veces bloquean el contenido de iframes en dominios externos - entonces una encuesta por enlace es mas fiable. Necesitas una personalizacion completa para tu diseno (fuentes, colores dentro de la encuesta) - un iframe muestra la pagina del servicio; para una personalizacion profunda mira en los ajustes del propio servicio de encuestas.

Errores tipicos

Altura demasiado pequena. La encuesta se corta, el encuestado no ve las preguntas. Pon una altura con margen o pruebala en una encuesta real.

Un ancho rigido en px en moviles. En una pantalla estrecha el iframe se sale del borde. Usa porcentajes o unidades adaptables (vw, max-width).

Una URL incorrecta o desactualizada. Se movio la encuesta, se cambio el enlace - el iframe muestra un 404. Comprueba el enlace despues de publicar.

El sitio de encuestas bloquea el iframe. Si el servicio no permite la incrustacion (X-Frame-Options: DENY), el iframe no mostrara la encuesta. Entonces solo un enlace directo o un widget con redireccion.

Integracion con la analitica

Los eventos dentro del iframe (envio del formulario, paso entre etapas) pueden no llegar a la analitica de la pagina principal - el dominio es distinto. El paso de eventos a la ventana principal es posible mediante postMessage si el servicio de encuestas lo admite. O consulta las estadisticas en la cuenta del servicio de encuestas: cuantas visitas, cuantas se completaron. Relacionado con la response rate y la tasa de abandono - si un iframe en tu propia pagina da un completion rate mayor que un enlace, se ve en los informes.

En SurveyNinja: el codigo de insercion

Crea una encuesta, abre la seccion de publicacion. Elige la opcion "Incrustar en el sitio" o "Iframe" - el servicio generara un codigo listo con tu enlace de encuesta. Copia el codigo y pegalo donde lo necesites en la pagina (un bloque HTML en el CMS, una plantilla). Si es necesario, cambia el ancho y el alto para que encajen en tu diseno. La encuesta se abrira dentro de tu documento HTML. Las respuestas se guardan en SurveyNinja, y la exportacion y los informes funcionan igual que con un enlace normal. Si tu sitio esta en su propio dominio - la encuesta en el iframe sigue cargandose desde el dominio del servicio de encuestas; los datos se transmiten por una conexion segura.

Iframe (inline frame) - un elemento HTML para incrustar una pagina dentro de otra. Se usa para mostrar una encuesta en tu propio sitio sin seguir un enlace. Se define con src, width, height. En SurveyNinja el codigo del iframe esta disponible en los ajustes de publicacion de la encuesta.