Como incorporar um tour virtual no seu site (passo a passo)

Receber o link do tour é metade do trabalho. A outra metade é colocá-lo no seu site sem quebrar o layout nem deixar a página pesada. Os erros são poucos e sempre os mesmos.

O que é o código de incorporação

É uma linha de HTML — um iframe — que reserva uma área da sua página e carrega o tour ali dentro. Ele funciona em WordPress, Wix, Squarespace, Webflow e em site feito à mão. No WordPress, use o bloco de HTML personalizado, nunca o editor de texto comum, que escapa as tags.

Os três ajustes que importam

Proporção em vez de altura fixa. Definir height: 600px parece resolver e quebra no celular. Use proporção — 16 por 9 ou 16 por 10 — para a área se ajustar sozinha a qualquer tela.

Permissões. O tour precisa de giroscópio e acelerômetro para funcionar no celular, e de tela cheia. Sem declarar isso no atributo allow, o botão de expandir simplesmente não responde.

Carregamento sob demanda. Um tour carregado junto com a página deixa o site lento e prejudica seu ranqueamento. A solução é mostrar uma capa com botão de play e só carregar o tour quando o visitante clicar. É assim que os tours desta página funcionam.

Onde colocar

Acima da dobra, se o espaço é o principal argumento de venda. Numa aba dedicada, se o site tem muita informação concorrendo. O que não funciona é enterrar o tour num menu secundário — ninguém procura o que não sabe que existe.

Se der problema

Tour que não aparece geralmente cai em um de três casos: o site está em HTTP e o tour em HTTPS, algum plugin de segurança está bloqueando iframes, ou o editor converteu as aspas do código. Nessa ordem de verificação, quase sempre se resolve.

Vale sempre manter um link direto visível como alternativa, para o visitante que estiver num navegador restritivo.

O código, explicado

Incorporar um tour é colocar um iframe na sua página: um quadro que carrega o tour de onde ele está hospedado. Você recebe um trecho pronto e cola no HTML, no bloco de código do seu construtor de sites ou no editor do WordPress.

Três atributos importam de verdade. O endereço do tour. As permissões, que liberam giroscópio, tela cheia e VR no celular. E as dimensões, que é onde quase todo mundo erra.

O erro que corta o tour no celular

Definir altura fixa em pixels. No desktop parece certo; no celular o quadro fica com proporção errada e a interface do tour some nas bordas. A correção é usar proporção em vez de altura fixa, deixando o quadro se adaptar à largura disponível.

Em CSS moderno, resolve-se com aspect-ratio no contêiner e o iframe ocupando 100% dele. Assim o tour mantém o formato em qualquer tela.

Como não deixar a página lenta

Tour é conteúdo pesado. Se ele carrega junto com a página, o tempo de abertura sobe e isso pesa no seu ranqueamento.

Duas medidas resolvem quase tudo. Use loading="lazy", para o tour só carregar quando chega perto da área visível. E, melhor ainda, coloque uma capa com botão: a página mostra uma imagem estática e o iframe só é criado quando a pessoa clica. É o padrão que usamos na nossa própria página de tours.

Detalhes que evitam suporte depois

Preencha o title do iframe: ajuda leitor de tela e é item de acessibilidade. Deixe sempre um link para abrir o tour em nova aba, porque alguns navegadores e configurações corporativas bloqueiam conteúdo incorporado. E teste em celular real, não só no modo responsivo do navegador, principalmente o comportamento de tela cheia.

Se o tour estiver sob domínio próprio, verifique também se a sua página está em HTTPS. Conteúdo incorporado por HTTP em página segura é bloqueado.