Como incorporar um tour virtual no seu site (com o código)

Um tour virtual vende mais no seu próprio site do que como um link em que as pessoas talvez nunca cliquem. Incorporá-lo significa que os visitantes podem olhar o imóvel sem sair da sua página. Basta copiar e colar uma vez, desde que você use o código certo.

O código de incorporação

Todo tour que pode ser incorporado oferece um <iframe>. Esta é a versão que recomendamos, já responsiva (ocupa a largura e mantém o formato 16:9):

<div style="position:relative;width:100%;aspect-ratio:16/9">
  <iframe src="https://roomtourapp.com/embed/seu-tour"
    title="Tour virtual 360°"
    allow="fullscreen; gyroscope; accelerometer; magnetometer; xr-spatial-tracking"
    allowfullscreen loading="lazy"
    style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe>
</div>

O que cada parte faz:

aspect-ratio:16/9 na caixa mantém o formato do tour em qualquer tela. Sem isso, muitos temas espremem o iframe a 150 pixels de altura.
allow="…gyroscope; accelerometer…" permite que os visitantes olhem ao redor movendo o celular. Sem isso, o navegador bloqueia os sensores dentro do iframe.
allowfullscreen faz o botão de tela cheia funcionar.
loading="lazy" faz o tour carregar só quando o visitante rola até ele, então a sua página continua rápida.
title é lido em voz alta pelos leitores de tela. Descreva o imóvel.

Com o RoomTour você não precisa escrever isso: a página do tour no painel web tem o código pronto para copiar, com o endereço do seu tour.

Onde colar

WordPress (editor de blocos): adicione um bloco HTML personalizado (Custom HTML) e cole o código. No editor clássico, mude antes para a aba Texto.
Wix: Add → Embed code → Embed HTML, cole o código e estique a caixa até a largura da seção.
Squarespace: adicione um bloco Code e cole o código.
Webflow: arraste um elemento Embed para a página e cole o código.
HTML puro: cole onde o tour deve aparecer.

Portais imobiliários

Os portais não deixam colar código de incorporação: eles têm um campo para o link do tour virtual. Use ali o link curto do tour, não o código de incorporação. O nosso guia passo a passo mostra como fazer um tour virtual com o celular, da captura à publicação.

Problemas comuns

O tour aparece como uma faixa fina. O tema ignora a altura do iframe. Use o contêiner com aspect-ratio mostrado acima.
Olhar ao redor movendo o celular não funciona. Falta o atributo allow ou o seu criador de sites o remove. Cole o código completo.
A página está lenta. Confira se o loading="lazy" continua lá e se há só um tour por página.
Dois logos. Se o seu site já mostra a sua marca, use o modo incorporado do tour, que esconde o logo do fornecedor do tour. Os endereços /embed/ do RoomTour fazem isso.

Perguntas frequentes

Como incorporar um tour virtual no meu site?

Copie o código de incorporação do tour (um iframe) no seu fornecedor de tours e cole num bloco de HTML ou de incorporação da página. Use um contêiner responsivo para que ele mantenha o formato no celular.

Como é o código de incorporação de um tour virtual?

É um iframe que aponta para o tour, com permissões para tela cheia e para os sensores de movimento do celular, para que os visitantes possam olhar ao redor movendo o aparelho. A versão responsiva o coloca dentro de uma caixa com proporção fixa.

Um tour incorporado deixa o meu site mais lento?

Não se ele carregar sob demanda: com loading="lazy" o tour só começa a carregar quando o visitante rola a página até ele. Evite colocar vários tours na mesma página.

Posso incorporar um tour virtual num portal imobiliário?

Os portais normalmente não aceitam código de incorporação. Eles têm um campo para o link do tour virtual: cole ali o link do tour.