iframe (inline frame)

Voce precisa mostrar a pesquisa diretamente na sua pagina - nao por um link, mas dentro de um bloco. Um iframe (inline frame) e um elemento HTML que incorpora uma pagina web dentro de outra.

No iframe voce coloca a URL da pesquisa - e o formulario aparece no seu site, o respondente nao sai para outro dominio. Pratico para formularios de feedback, pesquisas apos um artigo e formularios na conta do cliente. No SurveyNinja o codigo para incorporar uma pesquisa por iframe esta disponivel nas configuracoes de publicacao. Relacionado ao feedback - uma pesquisa em um iframe mantem o contexto da pagina. As alternativas sao um link direto e um widget (se o servico oferecer um).

Um iframe e uma "janela" com conteudo de terceiros na sua pagina. O navegador carrega a URL do iframe e a renderiza na area definida.

Definicao

Iframe (inline frame) - um elemento HTML que permite incorporar um documento HTML separado (pagina) dentro da pagina atual. E definido com a tag <iframe src="URL">. O atributo src contem o endereco da pagina incorporada - por exemplo, um link para uma pesquisa. O tamanho e definido com os atributos width e height ou via CSS. E usado para incorporar pesquisas, formularios, mapas e videos no seu proprio site. O conteudo dentro do iframe fica isolado da pagina principal (seguranca e estilos). Relacionado ao HTML e a publicacao de pesquisas.

Em resumo: uma "pagina dentro de uma pagina" - voce mostra a pesquisa no seu proprio design sem redirecionar o usuario.

Por que incorporar uma pesquisa por iframe

O respondente permanece no seu site - nao sai por um link, ha menos desistencias. O contexto da pagina e preservado - a pesquisa fica ao lado do artigo, do produto ou do formulario de solicitacao. Um unico contexto visual - a pagina e sua, o bloco da pesquisa esta incorporado. Pratico para landing pages, blogs e contas de cliente. A desvantagem e que voce precisa definir uma altura: se a pesquisa for longa ou de varias etapas, o iframe pode ficar alto ou exigir rolagem dentro do quadro.

Como incorporar uma pesquisa em um iframe

Pegue o link da pesquisa (o link publico do construtor). Cole-o no atributo src da tag iframe. Exemplo:

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

Largura e altura. width e height ficam em pixels ou porcentagens. 100% de largura - a pesquisa se estende por toda a coluna. Uma altura de 400-600 px e tipica para uma pesquisa curta; para uma longa coloque mais (800-1000) ou use uma altura adaptavel por meio de um script se o servico suportar postMessage. frameborder="0" remove a borda ao redor do quadro.

O codigo de insercao geralmente esta na secao "Publicacao" ou "Incorporar" do servico de pesquisas. No SurveyNinja voce pode copiar o codigo do iframe nas configuracoes de publicacao da pesquisa - cole-o no modelo do seu site ou no bloco do seu CMS. Mais detalhes no artigo de ajuda sobre a publicacao de pesquisas.

Iframe e seguranca

O navegador isola o conteudo do iframe: a pagina principal e a pagina do quadro sao origens diferentes (same-origin policy). Os scripts da pagina principal nao tem acesso ao conteudo de um iframe de outro dominio, e vice-versa. Isso protege os dados. Para incorporar uma pesquisa de outro dominio (por exemplo, surveyninja.io), o servidor da pesquisa deve permitir a exibicao em um iframe - o cabecalho X-Frame-Options ou Content-Security-Policy. Se o servico proibir a incorporacao, o iframe ficara vazio ou mostrara um erro. Os servicos de pesquisa modernos costumam permitir iframes para seus proprios formularios.

Responsividade e dispositivos moveis

Em dispositivos moveis uma largura fixa em pixels pode ultrapassar a tela. Use width="100%" e limite o contêiner com os estilos da pagina (max-width). Altura: em um celular uma pesquisa longa funciona melhor com um iframe alto ou com rolagem interna. Alguns servicos entregam uma pagina de pesquisa responsiva - ela se ajusta sozinha a largura do iframe. Verifique a exibicao no celular apos a insercao.

Iframe vs link direto vs widget

Iframe. A pesquisa esta incorporada na sua pagina. Pros: o usuario nao sai. Contras: precisa de espaco na pagina e ajuste de altura.

Link direto. O respondente vai para a URL da pesquisa. Pros: simples, sem codigo. Contras: sair do site, as vezes um completion rate menor por causa da mudanca de contexto.

Widget (popup, botao flutuante). A pesquisa abre em uma janela popup ou painel. Muitas vezes e implementado por meio de um iframe dentro do widget. Pros: nao ocupa espaco ate o clique. Contras: alguns usuarios nao notam ou fecham.

A escolha depende do objetivo: uma pesquisa apos um artigo - um iframe no final e logico; coletar feedback de qualquer pagina - um widget ou um link no cabecalho.

Atributos adicionais do iframe

title - uma descricao do quadro para acessibilidade (leitores de tela). sandbox - restricoes para o conteudo do quadro (por exemplo, bloqueio de scripts). Para pesquisas geralmente nao e necessario - o servico de pesquisas gerencia a propria pagina. loading="lazy" - carregamento adiado do iframe ao rolar; para uma pesquisa no rodape da pagina pode acelerar o carregamento. Se a pesquisa estiver acima da dobra - melhor sem lazy, para que o formulario esteja pronto de imediato.

Quando um iframe nao e a melhor escolha

Uma pesquisa muito longa em uma unica pagina - a altura do iframe fica enorme e a pagina "pula". Considere um link direto ou um widget passo a passo. Firewalls corporativos rigorosos as vezes bloqueiam o conteudo de iframes em dominios externos - entao uma pesquisa por link e mais confiavel. Voce precisa de personalizacao completa para o seu design (fontes, cores dentro da pesquisa) - um iframe mostra a pagina do servico; para uma personalizacao profunda veja as configuracoes do proprio servico de pesquisas.

Erros tipicos

Altura pequena demais. A pesquisa fica cortada, o respondente nao ve as perguntas. Defina uma altura com folga ou teste em uma pesquisa real.

Uma largura rigida em px em dispositivos moveis. Em uma tela estreita o iframe ultrapassa a borda. Use porcentagens ou unidades adaptaveis (vw, max-width).

Uma URL incorreta ou desatualizada. A pesquisa foi movida, o link foi alterado - o iframe mostra um 404. Verifique o link apos a publicacao.

O site de pesquisas bloqueia o iframe. Se o servico nao permitir a incorporacao (X-Frame-Options: DENY), o iframe nao exibira a pesquisa. Entao apenas um link direto ou um widget com redirecionamento.

Integracao com a analise

Os eventos dentro do iframe (envio do formulario, transicao entre etapas) podem nao chegar a analise da pagina principal - o dominio e diferente. A transmissao de eventos para a janela principal e possivel por meio de postMessage se o servico de pesquisas suportar. Ou consulte as estatisticas na conta do servico de pesquisas: quantos acessos, quantos concluiram. Relacionado a response rate e a taxa de abandono - se um iframe na sua propria pagina der um completion rate maior que um link, isso aparece nos relatorios.

No SurveyNinja: o codigo de insercao

Crie uma pesquisa, abra a secao de publicacao. Escolha a opcao "Incorporar no site" ou "Iframe" - o servico gerara um codigo pronto com o seu link da pesquisa. Copie o codigo e cole onde precisar na pagina (um bloco HTML no CMS, um modelo). Se necessario, altere a largura e a altura para se ajustarem ao seu layout. A pesquisa abrira dentro do seu documento HTML. As respostas sao salvas no SurveyNinja, e a exportacao e os relatorios funcionam como com um link comum. Se o seu site estiver no proprio dominio - a pesquisa no iframe ainda carrega a partir do dominio do servico de pesquisas; os dados sao transmitidos por uma conexao segura.

Iframe (inline frame) - um elemento HTML para incorporar uma pagina dentro de outra. Usado para mostrar uma pesquisa no seu proprio site sem seguir um link. Definido por src, width, height. No SurveyNinja o codigo do iframe esta disponivel nas configuracoes de publicacao da pesquisa.